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

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

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

本連載では、Ajaxを活用したインタラクティブなWebアプリケーションを、ゼロから開発する。3回の連載で、簡単なWebフォトアルバムを完成させる予定だ。完結した機能を持ったAjaxアプリケーションを作り上げるステップを、具体的に解説していきたい。

Ajaxを実感しよう

　JavaScriptと非同期データ送受信を組み合わせた、Webアプリケーション開発スタイルである「Ajax」は、このキーワードが発表されたのが今年初めのことだとは思えないほどの発展を遂げており、日々新しい実験や、それを組み込んだサービスが発表されている。

　そろそろ実際にAjaxを活用したWebアプリケーションを開発してみようか、と考えている開発者も多いことだろうが、ではAjaxで何をどう作ったらいいんだろう？ という部分で立ち止まってしまってしまっているのではないだろうか。

　そこで本連載では、単なるサンプルではなく、完結した機能を持ったAjaxアプリケーションを作り上げるステップを、なるべく具体的に解説していきたい。それぞれのステップで登場する「JavaScriptの考え方」や「Ajaxの考え方」を実感してもらえればと思う。

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

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

最も手軽なインタラクティブアプリ開発環境としてのAjax

　JavaScriptで開発するAjaxの利点はさまざまに挙げられると思うが、筆者が特に関心があるのはそれが「最も手軽なインタラクティブアプリケーション開発環境である」という部分だ。

　高度なインタラクションのある、リッチなユーザーインターフェイスを持ったアプリケーションの開発というのは、従来さまざまな点で困難があった。専用の開発環境をインストールして、独自のオーサリングツールや言語の使い方を新たに覚えたり、あるいはAPIを熟知したうえでエンジンから作らなければならないような開発は、かなりの時間と根気と技術投資が必要であり、またそこで必要なインターフェイスの設計にも、ノウハウやデザイン能力が必要になる。それを専門とする開発者ならともかく、バックエンドの技術をプレゼンテーションしたり、ネット上で軽快に動くアプリケーションを作りたいと思っているような開発者にとっては、最も先に手を抜いてしまう部分ではないだろうか。

　その点、AjaxがインフラとするJavaScriptやDHTML、XMLといった技術はすでに年月を経て確立され、多くの開発者になじみのあるものであり、特別なソフトをインストールしたり、新たに多くのことを習得する必要はない。また基礎となる部分はHTMLやスタイルシートでデザインしてしまえる点も重要だ。つまり、Ajaxでは「最低限必要な部分を作るだけで、インタラクティブなインターフェイスを実現することができる」のだ。従来式のWebページやWebアプリケーションに、作り込みたい部分だけインタラクティブな機能を埋め込める。これがAjaxの画期的な「手軽さ」だろう。

　もちろん、AjaxのインターフェイスにはHTMLとは別のノウハウが必要であるし、ブラウザごとの挙動の違いという特有の問題も生じるが、このような部分は現在急速に開発が進んでいるAjax用のjavascriptツールキットやフレームワークを使用することで多くは解決することができる。次のセクションでは、筆者が開発したAjaxアプリケーションを紹介しながら、Prototypeやscript.aculo.usといったJavaScriptライブラリの効果を見ていきたい。

1/3

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

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