U⁄A LABO

RSS

SEARCH

AUTHOR

  • KNOCKKNOCK (10件)小遣い2万円のフラッシュデベロッパー。
    帰りが遅いのにキレる嫁をだましだまし制作中・・・。

  • TAKAIW (13件)フラッシュデベロッパー。遊びでゲームを作るのも好きです。外見に似合わないイラストを描くのも好きです。とにかく作るのが好きです。

  • CHIKATHREESIX (8件)メタル界のフラッシュデベロッパー。またある時はメタルギタリスト。オーサリング中もヘッドバンギングは絶やさない。

  • YANBOU (6件)犬と猫で、家が毎日運動会のフラッシュデベロッパー。
    ビールから発泡酒へ変更で節約中。

  • AKUZE (2件)2003年からユナイティアに寄生しているフラッシュデベロッパー。
    シルクドソレイユとカナダが好き。

  • DECO-DEKAI (1件)ビートダウンパートでご飯何杯も食べられます。
    ハードコア・テクニカルディレクターを目指して日々精進。

CATEGORY

HOME  >  第1回 Flash座談会 ~ASデザインパターン考証 Bridge編~ 

2009.04.28 KNOCKKNOCK

第1回 Flash座談会 ~ASデザインパターン考証 Bridge編~ 

こんにちは、KnockKnockです。
週一回行われているFlash関連の座談会をせっかくなので、U/A Laboに載せていこうと思います。

まず第一回として、デザインパターンをActionScriptで考え話した内容を共有しようと思います。
といいましてもみんなで考えたというより自分はこのように使っているという話だったので、
まだまだ考えが浅い面はあると思いますがお付き合いください。

まずもともとプログラマーでない方にはなじみのない言葉だと思いますが「デザインパターン」というものがあります。
これはプログラムを書く上で経験を積むうちに「こういった問題を解決するには、
こういう構造のプログラムを書けばいい」というノウハウを他人が参照できるように明示的に整理したもの
です。
クラスとインターフェースをそれぞれどのように設計していけばカプセル化拡張性が保てるか、
またデザインパターンを作法として利用することで可読性をあげることができます。

Javaをはじめとするオブジェクト指向言語ではこのデザインパターンがよくつかわれますが、
ActionScriptでも同じでデザインパターンを導入することでその恩恵にあずかることができると思います。
実際はProgressionやTweenerなどのライブラリですでに利用していることではありますが。

前置きが長くなりましがデザインパターンはおもに23パターンあります。
それぞれが用途に応じて存在しますが、今回は「Bridge」を見ていきたいと思います。

1) Bridgeの概略

まず「Bridge」とは機能と実装のクラスを分けるパターンです。
あるクラスに新しい機能を追加したいと考えたときクラスを拡張して派生クラスを作ることが出来ますが、
さらに新しい機能を追加したいと考えると、またさらに拡張して派生クラスを作っていくことになります。
そうしているうちにクラスの階層がどんどん深くなってしまい、さらにはクラス同士の関係が密接に絡み合ってしまいます。
結果としてカプセル化と拡張性はクラス階層が深くなる程なくなってしまいます。
もちろんそれが間違っているわけではありません。クラスの継承関係がゆるぎなければそれはそれで問題ないかと考えます。
ただ、もうちょっと柔軟に機能を追加していきたいなと考えたときにこのBridgeが役に立ちそうです。

2) ActionScriptにおけるBridgeの利用例

FlashではMovieClipやSpriteなどDisplayObjectの表示制御が重要です。
addChildした後にどのように表示、非表示していくかの機能をクラス化した例です。

UML-Bridge.jpg

  • Displayクラス:DisplayImpl型のインスタンスを所有(コンストラクタで受け取る)し、そのインスタンスのメソッドを実行します。
  • DisplayImplクラス:実装の抽象クラス。
  • InOutDisplayImplクラス:DisplayImplの派生クラス。visible = false, trueによる表示、非表示制御を実装しています。
    durationプロパティによって遅延処理されます。
  • FrameInOutDisplayImplクラス:DisplayImplの派生クラス。
    フレームラベルに「open」「close」を設定することでフレームアニメーションでの表示、非表示制御を実装しています。
    durationプロパティによって遅延処理されます。
  • FadeInOutDisplayImplクラス:DisplayImplの派生クラス。
    スクリプトによるフェードイン、フェードアウト制御を実装しています。
    durationプロパティによって遅延処理されます。transitionプロパティによってトランジションが変更できます。
    timeプロパティによってフェードイン、フェードアウトの時間を変更できます。

3) 作成したInOutDisplayクラスの利用

作成した表示、非表示制御クラスを利用するには、以下のようになります。

// 表示、非表示の機能を実装したインスタンス
this._obj0InOut = new Display( new InOutDisplayImpl( this.obj0 ) );
this._obj1InOut = new Display( new FrameInOutDisplayImpl( this.obj1 ) );
this._obj2InOut = new Display( new FadeInOutDisplayImpl( this.obj2 ) );

// プロパティの設定
this._obj1InOut.duration = 1;
this._obj2InOut.transition = "easeOutCubic";
this._obj2InOut.time = 0.5;

// 表示
this._obj0InOut.show(); // visible = true;
this._obj1InOut.show(); // 1秒後にフレームアニメーションによる表示
this._obj2InOut.show(); // 0.5秒のスクリプトアニメーションによる表示

// プロパティの設定
this._obj1InOut.duration = 0;
this._obj2InOut.transition = "easeInCubic";
this._obj2InOut.time = 1;

// 非表示
this._obj0InOut.close(); // visible = true;
this._obj1InOut.close(); // 0秒後にフレームアニメーションによる表示
this._obj2InOut.close(); // 1秒のスクリプトアニメーションによる表示

4) 利用における感想

利用していて感じたことは

  • クラス同士の関係が弱い(委譲)ので、変更に強い
  • 新しい機能が欲しければ機能のクラスを作成してインスタンスを作ればいい。
  • クラス内のインスタンスが多くなるので、少々ややこしくなる。
  • DisplayObjectにリンゲージされているクラスに実装するべき機能か、追加機能のクラスに実装する機能かを慎重に考える必要がある。
  • 表示処理開始や表示処理終了のイベントはaddEventListenerしておかなければならない。
  • 追加機能から派生したクラスをあまり作らず、なるべくシンプルにした方がいい。

今回は詳しくは説明しませんが、ボタンやチェックボックス、ラジオボタンも機能のクラスとして作成しています。

// シンプルなロールオーバー機能付きボタン
this._button0Simple = new Button( new simpleButtonImpl( this.button0 ) );
this._button0Simple.current = false; // カレント表示
this._button0Simple.enable = true; // クリック可能

といった感じです。

まだまだ考えなければならないことはあると思いますが、
以上がActionScriptにおける自分なりのBridgeパターンの活用方法です。

この他にもたくさんデザインパターンがあります。
特にIteratorやSingletonなどは利用しやすいパターンです。
次の機会にでもご紹介していこうとおもいます。
では第2回Flash座談会をお待ちください。

CATEGORY