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

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


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

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

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

　本連載第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.usのajaxタグやjavascriptタグにエントリーされたサイトを見ることで、そうした世界中の開発者の意気込みを感じることができるだろう。

 1/3

　INDEX

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

AjaxでつくるインタラクティブWebアプリケーション バックナンバー

AjaxとPHPでリッチクライアント

Ajaxを扱うためのサーバーサイドのPHPライブラリを紹介する。リリースされたライブラリ、AjaxACを活用して好みの検索窓に改造してみよう

最終更新 2006/4/29

Ajax うきうき Watch

Ajaxという流行技術の定義を明確にしながら、Ajaxの動向からうきうきするような面白いもの、確実に押さえておきたいものを厳選してお届けしていく

最終更新 2008/5/26

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

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする
  • ビヨンド・クールジャパン!? （2012/1/27）
    コンテンツという文化力と、ものづくりという技術力を掛け合わせる。両方を国内に持ち合わせている国は多くない。チャンスなのだ
  • Qt5で10億人ユーザーへ、OSSコミュニティ化で健在に （2012/1/20）
    ノキアから売却されてQtはどうなったのか？ 弱体化してしまうのではとの心配をよそにダウンロード数は飛躍的に伸びている

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH