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

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


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


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

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

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

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

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

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

ファイル構成
 イベントの解除とフェードアウト

 前回のファイル構成に加えて追加された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 フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間
ソリューションFLASH