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

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


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




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

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

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

画面2 ズームスライダーサンプル(WindowsIE6、Firefox1.0、Safari1.3.1で動作確認済)

ファイル構成
 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);

},

- PR -
 初めて見ると何をしているのか分からないかもしれない。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でのクラス継承/スライダーをアルバムウィンドウへ追加

古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
最終更新 2005/8/2


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

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