連載：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はハイライトやフェードイン／アウト、ドラッグ＆ドロップといった高度なエフェクトを柔軟に制御できる優秀なライブラリである。
|
||||||||||||
| 表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
|
|
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
