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

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

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

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

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

JavaScriptライブラリの状況補足

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

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

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

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

Prototypeでのクラス継承

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

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

　ここまで機能を追加すると、ずいぶんフォトアルバムアプリらしくなってきた。さらにアルバム画像の表示サイズを調節するズームスライダーも追加してみよう。こんな感じだ。

画面2　ズームスライダーサンプル（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　処理中状態を示すスピナー

Prototypeでのクラス継承

　最新バージョンのscript.aculo.usには、指定したエレメントをスライダーとして使えるクラス（Control.Slider）が入っている。今回のズームスライダーは、このスライダークラスを継承して新たなクラスを定義する形で実現してみたい。ここにもPrototypeのフレームワークが用意されている。zoomslider.jsの冒頭だ。

Control.ZoomSlider = Class.create(); // SliderのプロトタイプオブジェクトをZoomSliderに継承する Object.extend(Control.ZoomSlider.prototype, Control.Slider.prototype); // ZoomSliderの定義 Object.extend(Control.ZoomSlider.prototype, { initialize: function(element, options) { this.element = element; <ズームスライダーのDOM登録処理> 　　// optionsにオプションを追加 Object.extend(options, { alignX : this.handlesize, sliderValue : 50, range : $R(10, 100) }); 　// スーパークラス（Slider）の初期化 　var args = [this.zhandle, this.ztrack, options]; 　Control.Slider.prototype.initialize.apply(this, args); },

　初めて見ると何をしているのか分からないかもしれない。JavaScriptにはプロトタイプオブジェクトと呼ばれるプロパティの階層的継承のメカニズムがあり、Prototypeはこの仕組みの中でクラス定義やクラス的な継承の一貫した記述方法をフレームワークとして提供している。そのため記述自体はクラスベース言語とは懸け離れていることを、まず念頭に置く必要がある。

　Object.extendという記述が随所に出てくるが、これはあるオブジェクトのプロパティに別のオブジェクトのプロパティを追加するためのPrototypeの機能だ（継承に限らず、オブジェクトにプロパティを追加する用途でどこでも使用できる）。このObject.extendで、Control.ZoomSliderのプロトタイプオブジェクトに、Control.Sliderのプロトタイプオブジェクトを追加している（4行目）。Prototypeのクラス定義では機能はすべてプロトタイプオブジェクトに記述されるので、これでZoomSliderクラスにSliderクラスの機能が継承されたことになる。

　その次のObject.extendで、ZoomSlider独自の機能を記述して、さらにプロトタイプオブジェクトに追加しているわけだ。ここでSliderと同名のメソッドを書き換えることで、Sliderの動作を変更できる。またスーパークラスであるSliderの初期化を呼び出しているのが21行目である。JavaやRubyでいうところのsuper()と同様の処理だ。直前に、このSliderに渡すためにオプションをObject.extendで追加している（これは継承には関係ない）。

　Prototypeのソース（prototype.js）自身がこのフレームワークで抽象クラスやサブクラスを定義して開発されているので参考にするといいだろう。上のようなクラス継承のパターンは、単一の操作であることを強調するために下のように1行にまとめて書かれることが多いようだ。

Object.extend(Object.extend (Control.ZoomSlider.prototype, Control.Slider.prototype), { ... });

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

　上のように作ったスライダークラスをアルバムウィンドウに追加しよう。

openPhoto: function(items) { 　　this.viewer.innerHTML = ""; 　　this.images = []; 　　 ＜中略＞ 　　// スライダーを追加 　　new Control.ZoomSlider(this.viewer, 　　{onChange: this.onZoomChange.bind(this)});

onZoomChange: function(v) { 　　for(var i=0 ; i < this.images.length ; i++) this.images[i].setSize(v/100); }

　Control.Sliderが用意しているonChangeにonZoomChangeメソッドを登録して、スライダーが操作された際にonZoomChangeでフォトフレームの倍率を変えるようにしている。このためにウィンドウに表示したフォトフレームのオブジェクトをthis.imagesの配列に格納しておく。onZoomChangeではそのimagesのオブジェクトに対して、それぞれフォトフレームの大きさを変更するsetSizeを呼び出しているだけだ。

　以上、今回の解説で、フォトアルバムの表示や操作の機能についてはほぼ完成した。次回の第3回では非同期サーバ通信を実現して、アプリケーションとして完成させていきたい。

---

前のページへ

3/3

次回もお楽しみに

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

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