[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
ウェブページのサイドバーに生じる空きスペースの活用方法
ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。
[JS]普通の画像にちょっとしたエフェクトを与えてかっこよくするスクリプト -Little Colour Boxes
なんでもない普通の画像でもちょっとしたエフェクトを与え、人目を惹くようにするjQueryのプラグインを紹介します。 デモページ [ad#ad-2] Little Colour Boxesの実装 HTML HTMLは画像を配置したimg要素にidを追加するだけです。 id名は任意のものが利用でき、classなどjQueryの書式で記述できるものに変更可能です。 <img src="images/nice_pattern_islamic.gif" width="425" height="425" id="image-boxes"> JavaScript 「jquery.js」と当スクリプト「jquery-littlecolourboxes.js」を外部ファイルで指定し、下記のスクリプトを記述します。 $(document).ready(function() { $("image-boxes")
[JS]フォームの入力欄を次々にアニメーションで表示するスクリプト
フォームの項目を入力すると、次の入力欄がアニメーションで表示されるコンテンツを実装するチュートリアルを紹介します。 Gravity Registration Form with Jquery デモページ [ad#ad-2] フォームの出来ぐあいは、ウェブアプリケーションとしての成功率を左右する要因となります。 一つのアプローチとして、ユーザーに入力欄の数を少なく感じられるように、入力する項目を一つずつ表示するスクリプトを紹介します。 フォームの実装 フォームの各項目は、リスト要素で実装しています。 HTML <form method="post" > <ul> <li class="email"><label>Email: </label><br/> <input type="text" username="email" id="email" AUTOCOMPLETE=OFF/><span
5分で分かる JavaScript を知らない人が JavaScript の便利さを学べる記事を書いたよ - ginpeiのブログ
JavaScript を知らない人に JavaScript の話して欲しいと言われる夢を見たのでブログ書きました。*1 難しい話は抜きにして JavaScript は <script> と </script> で囲えば動きます。*2 HTML をコードレベルで編集できるサービスなら、設定は一切不要です。 <script> JavaScriptのコード </script> 拡張子にも制限はありません。最終的にHTML文書として出力されるのであれば、htmlでもphpでもcgiでも構いません。なおフレームの代わりにPHPを使うという為になる記事があるのですが、ここでは関係ないので読むのは後ででよいです。 ついでに JavaScript を少しでも使えるようになれば、こんなことができるという一例を紹介します。 コピーライトの西暦を自動更新 JavaScript を使えばページフッタの西暦も自動更
【レビュー】JavaScriptでつくる高効率サーバアプリ「Node.js」を試す方法 | エンタープライズ | マイコミジャーナル
Node's goal is to provide an easy way to build scalable network programs. JavaScriptフレームワークやHTML5テクニックの紹介とともにNode.jsが取り上げられることが増えている。Node.jsはChromeのJavaScriptエンジンV8を活用して開発が進められているサーバサイドプラットフォーム。JavaScriptを使ってサーバサイドで動作するアプリケーションを簡単に開発できる。Node.jsには次のような特徴がある。 JavaScriptを使ってサーバサイドアプリケーションを開発できる。 スケーラビリティの高いネットワークプログラムを高いスキルを要求されずに開発することが可能。 高い並列性を実現。内部の実装はepoll(7)、kqueue(2)、/dev/poll、select(2)などOSごとに
GSkinnerの作ったJavaScriptライブラリが素敵すぎる件 | fladdict
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
[JS]省スペースでもサムネイル付きの画像ギャラリーが設置できる -Micro Image Gallery
Micro Image Gallery: A jQuery Plugin デモページ ギャラリーはデフォルトで三種類のサイズがあり、表示パターンはサムネイル一覧と画像拡大の二種類があります。
[JS]フォームのエラー判定を行い、アドバイスを表示するスクリプト -Ketchup
カスタマイズ性に優れた、フォームのエラー箇所にツールチップをふわりとアニメーションで表示するスクリプトを紹介します。 Ketchup Ketchupは既存のフォームにも簡単に導入が可能で、マークアップの変更やツールチップのデザイン変更も簡単に行えます。 また、エラー判定も多彩な項目で設定が可能です。 入力の有無 最大・最小文字数 最大・最小数値 メールアドレスのチェック urlのチェック 日付のチェック ユーザーネーム（a-z0-9_-）のチェック など これらの判定は組み合わせて使用することも可能です。 設置方法は、スクリプトとスタイルシートを外部ファイルとして記述し、各フィールドに下記のように追加します。 HTML（変更前）
グーグルのJavaScriptツール集大成「Google Closure Tools」
2009年11月5日，Googleは自社サービス製品であるGmail，Google Maps，Google Docsなどの開発に使用しているJavaScriptアプリ開発ツール群「Google Closure Tools」を一般公開しました。 "Closure"は一般的に，閉鎖や閉店といった意味で使われます。ツールの命名としては少しネガティブなニュアンスを感じますが，Google Closure Toolsの場合は，終結といった意味で，開発プロジェクトにおける最終ステップの仕上げ用ツール。すなわち“栓”という意味で中身があふれ出さないようにキッチリ閉めておくものといった意味合いから命名されているようです。 Ultimate（究極）に近い意味でGoogleの自信の表れと受け取った方がいいかもしれません。Googleで新規公開になったプロジェクトとしては珍しく，ベータ版の表記もありません（Go
JSで超ド派手なアニメが作れる「UIZE Framework」入門 (1/5)
特殊効果機能が満載の「UIZE JavaScript Framework」 「UIZE JavaScript Framework」（以下、UIZE Framework）が今回のJavaScriptラボのテーマです。UIZE Frameworkは、エフェクト／アニメーション表現に特徴を持つJavaScript/Ajaxフレームワークで、公式サイトには見慣れない特殊効果を使った派手なスライドショーや、写真を組みあわせたアニメーション付きのグラフなど、目を引くサンプルが多数紹介されています。その表現力の高さはJavaScriptとは思えないほどで、従来のJavaScriptライブラリーやフレームワークとは一線を画しています。 この連載では過去にJavaScript/Ajaxフレームワーク「Ext JS」と「YUI（Yahoo! UI Library）」を取り上げました（関連記事）。UIZE Fr
[JS]フォームの入力フィールドにアイコンを表示するスクリプト -Sexy Forms
フォームの入力フィールドにアイコンを表示するなど、9種類のスタイルのデザインを簡単に適用できるスクリプトをCoders.meから紹介します。
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
たったの20KBでショッピングカートを実装できるJavaScript『SimpleCart.js』 | 100SHIKI
これはすごいかも。 いわゆるショッピングカート機能を実装するためのJavaScriptのライブラリがSimpleCartだ。しかも20KBというコンパクトなサイズである。 商品の陳列、注文内容の変更や削除、数量変更などをさくっと実現してくれる。なお、実際の決済にはPayPalかGoogle Checkoutを利用することになる。 残念ながら日本で使うにはまだハードルが高いが（言語や決済方法などで）、いざ実装しようと思うと面倒な機能だけにこうしたライブラリは歓迎したいところだ。 こうしたライブラリを活用してどんどん経済が活性化していくと良いですな。
ASCII.jp：Ext JSでGoogleマップを表示するチュートリアル (1/4)｜古籏一浩のJavaScriptラボ
※この記事は、「jQueryとも共存できる『Ext JS 3.0』入門」の続きです。前回の記事も合わせてご覧ください。 統一された美しいデザインのユーザーインターフェイス（UI）を作れるJavaScript/Ajaxフレームワーク「Ext JS」。前回は、Ext JSを使ったもっとも簡単なサンプルとして「アラートダイアログ」を表示してみましたが、今回はより実用的な「ウィンドウ」の表示に挑戦しましょう。Ext JSで開いたウィンドウの中に、GoogleマップAPIを利用した地図を表示します。 単純なウィンドウを表示する 最初に、もっともシンプルなウィンドウを表示してみましょう。Ext JSのウィンドウには非常に多くのオプション（設定）がありますが、オプションを指定しない状態でもとりあえず表示はできます。 ウィンドウを表示するには、new Ext.Window() によりインスタンス（ウィンド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google、JavaScriptアプリ開発ツール「Closure」を公開 
Yahoo! UI Library 3で驚きのアニメーションを作成 (1/5)
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
