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

連載：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ディレクトリ

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でのクラス継承／スライダーをアルバムウィンドウへ追加

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