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

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

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

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

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

JavaScriptライブラリの状況補足

フォトアルバムウィンドウ　サンプルデモ

イベントの解除とフェードアウト

指定要素の位置まで画面をスクロールするエフェクト

ズームスライダーを追加する

Prototypeでのクラス継承

スライダーをアルバムウィンドウへ追加

フォトアルバムウィンドウ　サンプルデモ

　 それではサムネイル一覧表示機能の詳細を見ていこう。動作サンプルは以下のようになる。

　今回もサーバ通信を行っておらず、サーバからのレスポンスを想定したデータを渡すと、サムネイルの一覧表示を行うPhotoAlbumクラスを用意した。画像表示部分は前回で解説したフェードイン画像フレームを、基本的にはそのまま使用している。

　また、サムネイルの画像をクリックすると、選択した画像の拡大表示が、サムネイルウィンドウの下にフェードインで追加されるようになっている。見たい写真を順番に開いて一覧したり、不要なものを閉じたりできるわけだ。これは筆者がpiccyを開発するとき、JavaScriptを活用したWikiエンジンであるTiddlyWikiやLesserWikiのページ開閉の動作（Wikiページのリンクをクリックすると、対応するWikiページがクリックしたページの下に追加される）をヒントにフォトアルバムに利用したスタイルで、ページの構成をダイナミックに変化させることができるJavaScriptの特性を生かしたインタラクティブな機能になっていると思うが、どうだろうか。

画面1　サムネイル一覧サンプル（WindowsIE6、Firefox1.0、Safari1.3.1で動作確認済）

■ファイル構成

• photoalbum.html　ベースのWebページ、スクリプトのインクルード、フレームのテンプレートを記述
• photoalbum.css　フォトアルバムやフレームのスタイルを記述（インラインスタイルから分離した）
• jsディレクトリ
• prototype.js
• scriptaculous.js
• photoframe.js　PhotoFrameクラスのスクリプト（前回解説）
• photoalbum.js　PhotoAlbumクラスのスクリプト（新規追加）
• data.js　アルバムに表示する画像データ
• imagesディレクトリ
• spinner.gif　処理中状態を示すスピナー

イベントの解除とフェードアウト

　前回のファイル構成に加えて追加されたphotoalbum.jsを見ていこう。ここでPhotoAlbumクラスの定義を行っている。特に新規の手法はなく、前回のPhotoFrameクラスと同様にPrototypeのフレームワークと、script.aculo.usのエフェクトを使用している。

　受け取ったデータを処理してフォトフレームを並べる部分を見ておこう。

openPhoto: function(items) { // フォトフレーム表示 ＜中略＞ 　　　if(items.images) { // サムネイル一覧表示処理 　　　　　 var thumsize = 0.4; 　　　　　 // データファイルのimages（画像ファイル配列）について処理 　　　　　 for(var i=0 ; i < items.images.length ; i++) { 　　　　　 　　var item = items.images[i]; 　　　　　 　　// フォトフレームを入れるspanを生成 　　　　　 　　var frame = document.createElement('span'); 　　　　　 　　frame.className = "spacer"; 　　　　　 　　this.viewer.appendChild(frame); 　　　　　 　　// PhotoFrameオブジェクト作成 　　　　　 　　var frame = new PhotoFrame(this.albumId, frame, item.fname, 　　　　　 　　　　　　　 　 　　　　　　 item.width*tumsize, item.height*thumsize, item); 　　　　　 } 　　　} else { // オリジナルサイズ画像表示 ＜中略＞ 　　　} 　　　// float属性の回り込みを止めるためのdivを挿入 　　　var bottomspace = document.createElement('div'); 　　　bottomspace.className = "bottomSpacer"; 　　　this.viewer.appendChild(bottomspace); 　　　// 更新後のハイライトエフェクト 　　　$(this.albumId).style.backgroundColor = "#ffffff"; 　　　new Effect.Highlight(this.albumId); },

　データにある画像ファイルの数だけPhotoFrameクラスをループで生成して一覧表示し、更新後のハイライトをscript.aculo.usのエフェクトで行っている。

　今回追加された操作のうち、大きなものとして、ウィンドウを閉じて要素が消滅する処理がある。ここも見てみよう。

close: function() { // ウィンドウクローズ 　　// イベントを削除 　　Event.stopObserving($("toolbar_close_"+this.fname), 'click', this.close); 　　// ウィンドウをフェードアウト 　　var albumId = this.albumId; 　　new Effect.Fade(this.albumId, 　　　　　　　　　　{duration: 0.5, 　　　　　　　　　　 // フェードアウト後に要素を削除 　　　　　　　　　　 afterFinish: function(effect) { 　 　　　　　　　　　　　　$(albumId).parentNode.removeChild($(albumId)); 　　　　　　　　　　 }}); },

　イベント解除メソッドEvent.stopObservingはPrototypeの機能であり、前回説明したイベント登録メソッドEvent.Observeに対応するものだ。通常のWebページよりも1つのページに長くとどまり、連続的な操作を行う可能性の高いAjaxアプリケーションでは、実行時に生成したオブジェクトやDOM要素、登録したイベントなどは不要時には削除し、メモリを解放していく必要がある。またInternet Explorer 6では、DOM要素に対する循環参照がなされていると、ページを閉じてもメモリが回収されずブラウザの動作が遅くなるという問題が発見されている（IEのメモリリーク問題など参照）。このような事態を避けるためにもイベントや要素の管理は慎重に行った方がいいだろう。

※なお、PrototypeにはEvent.observeで登録されたイベントについては、ページのアンロード時にイベントを解除する機構が組み込まれている。

　Effect.Fade()は前回説明のEffect.Appear()と逆に、要素のフェードアウトを行うscript.aculo.usのエフェクトだ。オプションのafterFinishに、フェードアウト終了後に行うDOM要素の削除処理を行うコールバックを無名関数で渡している。

●　Effect.Fadeリファレンス

指定要素の位置まで画面をスクロールするエフェクト

　前回のサンプルと違い、今回はアルバムのウィンドウが複数登場するため、ウィンドウが1画面に収まらない場合が出てくる。そこで、script.aculo.usに最近追加されたスクロールインエフェクトを使用してみた。initializeの部分だ。

// すでに表示されたPhotoAlbumが呼び出された場合は、 　　// そのウィンドウをスクロールインする 　　if ($(this.albumId)) { 　　 new Effect.ScrollTo( 　　 　　$(this.albumId), 　　 　　{ afterFinish: function() { 　　 　　　　 // スクロール終了後にウィンドウをハイライトする 　　 　　　　 $(this.albumId).style.backgroundColor = "#ffffff"; 　　　 　　 　new Effect.Highlight(this.albumId); 　　 　　}.bind(this) } 　　 　　); 　　 return; 　　}

　Effect.ScrollToというのがscript.aculo.usのエフェクトで、引数に指定した要素が画面に表示される位置までスクロールしてくれる。ほかのscript.aculo.usエフェクト同様、このエフェクトにもオプションを引数で渡すことで細かい動作を指定することができ、ここではスクロール終了後（afterFinish）に対象をハイライトする処理を加えた。これでクリックした画像が画面外にスクロールアウトしている場合でも、対象を見失うことがなくなるはずだ。

●　Effect.ScrollToリファレンス

前のページへ

2/3

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

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