連載：Ajaxで作るインタラクティブWebアプリケーション （1）

Ajaxフォトアルバムのフェードイン画像フレームを作ろう

田中 孝太郎
dotimpac.to
2005/11/11

目次 ページ内の項目をクリックするとスクロールします。 ページ内リンクでスムーススクロール＠ZEROBASE CASTを使用しています

Ajaxで作るインタラクティブWebアプリケーション もっとも手軽なインタラクティブアプリ開発環境としてのAjax JavaScriptライブラリによるAjaxフレームワーク Piccy: Ajax Photo Album Hello Ajax!　フェードイン表示される画像フレームをつくる ライブラリをダウンロードする Prototypeのクラススタイル文法 DOM操作とフェードインエフェクト イベントの登録 ユーザの操作に対するリアクション

JavaScriptライブラリによるAjaxフレームワーク

　

　AjaxにおけるJavaScriptプログラミングを支援するためのライブラリが、すでに多くのプロジェクトで開発され、オープンソースライセンスの元で公開されている。

　これらは、Ajaxアプリケーションで非同期リクエストを行うためのXMLHTTPRequestの呼び出しをラッピングして容易に使えるようにしているほか、JavaScriptで頻繁に行うDOM操作やスタイルの加工、イベントの管理などを支援する関数を用意している。さらに、従来煩雑になりがちだったJavaScriptでのプログラミングに、よりオブジェクト指向的な指針を与えるフレームワークとしても機能する。

　また、上記のAjaxフレームワークの元で、さまざまなユーザーインターフェイスを部品として提供するエフェクトライブラリやUIコンポーネントも登場している。これらのライブラリを使うことで、Ajaxアプリケーションをよりユーザーフレンドリーにすることができる。ユーザーにリクエストを意識させないAjaxアプリケーションでは、現在の状態を明示したり更新に注意を促すエフェクトはアプリケーションの使用感に重要な意味を持つので、それらを容易にするライブラリもぜひ活用すべきだ。

　現在開発されている主要なライブラリを表に示すが、本連載では「Prototype」と「script.aculo.us」を使用していくこととする。Prototypeは現在最も標準的といえるJavaScriptフレームワークで、国内でも「はてな」や「mixi」といったWebサービスが一部で採用している。script.aculo.usはハイライトやフェードイン／アウト、ドラッグ＆ドロップといった高度なエフェクトを柔軟に制御できる優秀なライブラリである。

Prototype 非同期リクエスト、DOM操作、イベント管理のための最低限の機能を備えたフレームワーク。現在多く使用され始めている MochiKit AjaxだけでなくJavaScriptの言語拡張機能も含むライブラリ SAJAX JavaScriptからサーバ側の関数を呼び出す形のAjaxツールキット。Perl、PHP、Python、Rubyなどがサポートされている Dojo Ajax機能を含むUIコンポーネントを多数備えたツールキット。使用するモジュールを個別にインポートするクラスライブラリ的な構造を取っている script.aculo.us ハイライトやフェードなどのアニメーションエフェクト、ドラッグ＆ドロップなどを実現するライブラリ。Prototypeをベースに開発されている Rico エフェクトやドラッグ＆ドロップのほか、より高度なUIを搭載するライブラリ。Prototypeがベースになっている

表1　主なJavaScriptライブラリ

Piccy: Ajax Photo Album

　prototye.jsとscript.aculo.usの実用例として、筆者の開発しているWebフォトアルバムソフト「Piccy」を紹介しよう。本連載で解説するAjaxフォトアルバムは、このPiccyを簡易にしたものと考えてもらっていい。

画面1　Piccyスクリーンショット

　「Piccy」とはオンラインで閲覧と管理が可能なフォトアルバムアプリケーションとして筆者が開発しているソフトウェアだ。主要な部分でAjaxを活用している。ここでは内容の詳細については触れないが、サンプルサイトで操作を試していただければどういうものかはある程度分かっていただけるかと思う（詳細は筆者サイト記事を参照のこと）。

画面2　Piccyスクリーンショット

　フェードインやドラッグ＆ドロップなど、動きやインタラクションのある機能が多く盛り込まれているが、これらの機能のほとんどはPrototypeとscript.aculo.usの機能によって実現している。ブラウザごとの仕様の違いも多くはライブラリの関数に吸収されているので、JavaScriptプログラミングにありがちなクロスブラウザのための条件分岐も最低限しか行っていない。ライブラリの恩恵は非常に大きい。

　少し前までは、Ajaxというと検索に関する機能やサンプルが多かったが、当然ながらAjaxで実現できることは検索の高機能化にとどまらない（その威力をアピールしてAjaxを知らしめたのはあのGoogle Mapsなのだ）。ライブラリが充実してきたことで、より複雑な機能や大規模な開発にチャレンジすることができるだろう。今後Ajaxの世界がより拡大していくことを期待したい。

前のページへ

2/3

INDEX
Ajaxフォトアルバムのフェードイン画像フレームを作ろう
	Page1＜Ajaxを実感しよう＞ 最も手軽なインタラクティブアプリ開発環境としてのAjax
	Page2＜JavaScriptライブラリによるAjaxフレームワーク＞ Piccy: Ajax Photo Album
	Page3＜Hello Ajax!　フェードイン表示される画像フレームを作る＞ ライブラリをダウンロードする／Prototypeのクラススタイル文法／DOM操作とフェードインエフェクト／イベントの管理／ユーザーの操作に対するリアクション

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）