連載:Ajaxで作るインタラクティブWebアプリケーション (1)

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


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

目次
ページ内の項目をクリックするとスクロールします。
ページ内リンクでスムーススクロール@ZEROBASE CASTを使用しています
Ajaxで作るインタラクティブWebアプリケーション JavaScriptライブラリによるAjaxフレームワーク Hello Ajax! フェードイン表示される画像フレームをつくる

 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操作とフェードインエフェクト/イベントの管理/ユーザーの操作に対するリアクション

古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
最終更新 2005/8/2


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間