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

ズーミングできるWebフォトアルバムウィンドウを作ろう


田中 孝太郎
dotimpac.to
2006/2/1

本連載では、Ajaxを活用したインタラクティブなWebアプリケーション開発のポイントを、フォトアルバムを題材に解説する。全3回の連載のうち、今回はその中篇に当たる。


 前回作った部品をフォトアルバムに拡張しよう

 本連載第1回「Ajaxフォトアルバムのフェードイン画像フレームを作ろう」では、Ajaxで動作するWebフォトアルバムを開発する最初のステップとして、フェードインする画像フレームの開発について触れた。今回はその部品を使って、さらにフォトアルバムらしい機能を追加していこう。

具体的には、
  • 画像の一覧をサムネイル表示
  • 選択された画像を大きく表示
  • 画像をズームスライダーで拡大
といった機能を実装していく。

目次
ページ内の項目をクリックするとスクロールします。
ページ内リンクでスムーススクロール@ZEROBASE CASTを使用しています
前回作った部品をフォトアルバムに拡張しよう
JavaScriptライブラリの状況補足
フォトアルバムウィンドウ サンプルデモ
イベントの解除とフェードアウト
指定要素の位置まで画面をスクロールするエフェクト
ズームスライダーを追加する
Prototypeでのクラス継承
スライダーをアルバムウィンドウへ追加


 JavaScriptライブラリの状況補足

 前回の連載では、Ajaxアプリケーションの開発を支援するJavaScriptライブラリを紹介し、Prototypeとscript.aculo.usを使用して実例を詳しく解説したが、JavaScriptライブラリに関するその後の状況について、今回の内容に入る前に補足しておこう。

 現状で最もポピュラーなライブラリとなりつつあるPrototypeとscript.aculo.usについては国内での注目も高く、日本語で読める詳細資料や新機能の紹介などが活発だ。以下のサイトは網羅的で資料性も高く、Prototypeやscript.aculo.usで開発を始めるには非常に参考になる。

  また、Prototypeは1.4.0に、とscript.aculo.usは1.5.1へとそれぞれバージョンアップしている。Prototypeについては従来の1.3.1から1.4.0の間に大幅な機能追加や若干の仕様変更があるため注意が必要だ。 このように、Protytpeやscript.aculo.usは開発自体も現在進行形にあり、ドキュメントにまとまっていない機能の追加や仕様変更も頻繁な状態だ。上記の資料などで基本的な知識を押さえてから、本体のソースをある程度読解することをお勧めしたい。Prototypeやscript.aculo.usは、オブジェクトの構成やJavaScriptのコーディングが非常に洗練されている。Ajaxに限らずJavaScriptでの開発のための大きなヒントになるはずだ。

 またほかにも、AjaxやJavaScriptでのビジュアルエフェクトを扱うライブラリが登場しているようだ。moo.fxはPrototypeベースのJavaScriptエフェクトライブラリで、フェードイン/アウトはリサイズアニメーションなどごく基本的なエフェクトのみが提供される、ちょうどscript.aculo.usのサブセットのような構成になっている。ファイルサイズが全体で3KBと非常に小さいのが特徴で、ドラッグ&ドロップのような、よりリッチな機能を使わないのであれば、コンパクトなmoo.fxを選択する意味もあるだろう。

 このように、Ajaxをめぐる状況はいまだ流動的で、しかも刻一刻と変化している。先物買いや一点張りが常に正しいわけではないのは当然だが、Ajaxというキーワードに世界中の開発者が反応していることは事実で、エキサイティングだ。例えばソーシャルブックマークサービスdel.icio.usajaxタグjavascriptタグにエントリーされたサイトを見ることで、そうした世界中の開発者の意気込みを感じることができるだろう。

1/3

 INDEX

Ajaxフォトアルバムのフェードイン画像フレームを作ろう
Page1<前回作った部品をフォトアルバムに拡張しよう>
JavaScriptライブラリの状況補足
  Page2<フォトアルバムウィンドウ サンプルデモ>
ファイル構成/イベントの解除とフェードアウト/指定要素の位置まで画面をスクロールするエフェクト
  Page3<ズームスライダーを追加する>
ファイル構成/Prototypeでのクラス継承/スライダーをアルバムウィンドウへ追加

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


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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間