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

連載：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.js v1.3.1の使い方

prototype.js v1.3.1の非公式マニュアル＆リファレンス Usin prototype.js v1.3.1の邦訳版（なお、元サイトは現在は1.4.0の解説にバージョンアップしている）。。

はてな技術発表会（11月11日　テーマ：script.aculo.us）

株式会社はてなの社内勉強会の公開ページ。script.aculo.us（v1.5）の使い方について動画・音声・レジュメが参照できる

　　また、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インターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう

最終更新 2005/8/2

HTML5 + UX フォーラム新着記事

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データの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する