Adobe Flexで作るマーケティングプラットフォーム
作成日
2 March 2009
ページ ツール |
必要条件
この記事に必要な予備知識
Adobe FlexテクノロジおよびFlashテクノロジでの開発経験（推奨）。リッチインターネットアプリケーション（RIA）の開発経験およびマーケティング キャンペーンの実務経験があればなお可。
ユーザーレベル
すべて
必要な製品
- Flex Builder 3 (Download trial)
- Flash Professional CS4 (Download trial)
マーケティングプラットフォームを語るには、まずそれが何であるか、そして、それがどのような形で事業開拓の助けになるかを明確にする必要があります。まず、次のようなケースを想像してみてください。ある世界的なブランドを擁する企業のマーケティングチームが世界中の国や地域に特化したコンテンツやアクティビティを様々な言語で提供して、ターゲット顧客への訴求効果を上げるためにWebベースのソフトウェアソリューションを必要としていたとします。このようなブランドの宣伝効果を高めるには、スケーラビリティに優れるとともに、商品を迅速に市場投入でき、しかも既存の対外サービスとも円滑に統合できるようなソリューションが求められます。企画の初期段階においては、定期的に発生する新たなマーケティングキャンペーンに対応できるとともに、常に首尾一貫したブランドメッセージを発信できるようにすることが重要です。ここでの目標は、強固なブランドアイデンティティを発信しながらも、ユーザーに魅力的かつ一貫性のとれた体験を提供することにあります。
テクノロジとユーザーの期待が高度化・多様化する今、マーケティングプラットフォームの開発プロセスもそれに伴って複雑化しつつあります。今日のマーケティング戦略においては、これまで大規模なエンタープライズ級のソフトウェア開発プロジェクトにみられた課題や様々な局面も含まれるようになっています。商品やブランドのマーケティング効果を高める上で、魅力的なユーザー体験の提供は欠かせない要素になっていると言えるでしょう。
この記事ではジンの人気商品であるBombay Sapphireのマーケティングプロジェクトを例に、Flex 3フレームワークを用いて大規模なマーケティングプラットフォームを開発する際の一般的なストラテジを解説することにします。Bombay Sapphireのマーケティングプラットフォームを開発するにあたり、我々はユーザー体験の要件定義、柔軟なアーキテクチャーを実現するための開発戦略策定、プロジェクトを成功に導くためのFlexプラットフォーム活用といったトピックに関して、様々な事柄を学びました。ここでは今回のマーケティングプラットフォームの開発において我々が採用した手法を解説するとともに、この手のプロジェクトの開発時間と費用の節約につながる、アーキテクチャーおよび開発テクニック面でのヒントも紹介していきます。
この記事では、Bombay Sapphireプラットフォームの実装例を取り上げ、新たなプラットフォームの導入がいかに世界的なブランドの洗練度アップに貢献できるかについて紹介していきます。
今回、GUGGA（弊社）の開発チームに課されたチャレンジは、オリジナリティあふれるユーザー体験と映画さながらのビジュアルプレゼンテーションを提供しながら、Bombay Sapphireの広範なマーケットでそれぞれ独自のマーケティングキャンペーンやプロモーション活動を展開できるようにするための、スケーラブルなプラットフォームを実現することでした（次のビデオを参照）。
2:37
この規模のインタラクティブ体験を開発する場合、最初の難題は顧客を分析し、どのような形で訴求するのがブランドイメージにとって重要であるかの判断です。クライアントは、できるだけ早く最終的な成果品を見てみたいと考えています。だからこそ、制作段階の早い時期に、実際に機能するバージョンのプラットフォーム（または最低でもコアの機能性）を提示できることは、非常に大きなアドバンテージになります。
今回、企画段階では、開発するプラットフォームのプレゼンテーションレイヤーにどのテクノロジを採用するかという難題に直面しました。最近開発されたプロジェクトを調査すると、この手の規模のプロジェクトに関しては、過去数年にわたりGUGGAが成功を収めていることが明らかでした。GUGGAでは、これらのプラットフォームに必要な安定性と迅速なアプリケーション開発性をすべて提供する、オープンソースのカスタムFlashフレームワーク（GUGGA Flash Framework）を開発・提供しています。
様々なテクノロジを評価したところ、Flexが最も有効なソリューションであることが判明しました。Flexフレームワークは今回のプロジェクトで必要な機能性を提供するだけでなく、スケーラビリティ、拡張性、並行開発への対応性、コミュニティサポートなどにおいて、厳しい要件を満たせることが明らかになりました。
最も重要な検討事項となったのは、機能が充実し、複雑なアニメーションも備わった魅力的なインタラクティブ体験の提供に、Flexが適しているかどうかということでした。これは、Bombay Sapphireプロジェクトを手がけるまで、Flexで開発されたものとしてはビジネスアプリケーションしか目にしたことがなかったからです。初期段階の検証を行った結果、Flexフレームワークで開発を行い、Flashでフロントエンドのデザインを行うことの長所をすぐに読み取ることができました。我々は、新たなプロトタイプを試作するにつれ、次第にFlexを使ったプロジェクト開発にどんどんはまっていきました。
最終的には、スタッフ一同、大規模マーケティングプラットフォームの実現にあたり、Flexが最高のテクノロジであると確認するに至っています。
パワフル、オープンソースかつコンポーネントベースのFlexフレームワークは、我々が大規模なマーケティングプラットフォームを開発する上で必要なすべてを提供します。Flexがベストソリューションであることは、今回のブランディングプロジェクトの次に挙げる最も重要な要件を検討することで明らかになりました。
- 抜群のユーザーインターフェイスとユーザー体験を提供すること
- カスタマイズとローカライズへの対応
- アプリケーションの設計上、拡張性と柔軟性が確保されていること
- 既存の外部サービスに対しても、充実したデータアクセス性が確保できること
この記事の以下の節では上記の各要件を詳しく解説するとともに、今回のプロジェクトにおいて、これらの要件をいかにクリアーすることができたかについて説明することにします（図1参照）。
エフェクトとトランジション
マーケティングプラットフォームのユーザー体験の善し悪しは、ユーザーを魅了する形で提示される機能の数々に左右されます。今回のアプリケーションの性質を考慮すると、ユーザーインターフェイス要素はすべて複雑なデータ連動型のコンポーネントになります。ここでは、表現力と魅力に優れたユーザー体験へのニーズが非常に高いと言えるでしょう。
これらの複雑なコンポーネントにアニメーションを実装するためには、エフェクトを表現するためのパワフルなオブジェクト指向の抽象化が必要になります。この抽象化を利用することで、我々はデザインパターンの能力を生かし、強力かつ柔軟なエフェクトの組み合わせを作成しています。なお、Flexを導入する以前は、Flashフレームワークを利用して非同期型操作の合成と管理の抽象化を行っていました。
Flexのエフェクトは、これまで魅力的なWebプロジェクトの開発に用いてきたFlashフレームワークのそれと非常によく似ています。Flexエフェクトのもう1つの特長は、アニメーションの定義とその実行を分離できることです。この場面で活躍するのがMXMLです。
MXML言語
複雑なビジュアルプレゼンテーションや各種エフェクトのきめ細やかな表現・定義を可能にするのが、FlexのMXML言語です。この宣言型の言語により、前述のトランジションやコンポーネントのメンテナンス性および可読性が改善されます。IDEのFlex Builderにはコーディング作業を支援するための機能が用意されており、これらを利用することで迅速な開発作業が可能になります。
FlashとFlexの連携
アプリケーションのフロントエンド開発とバックエンド開発を網羅する包括的なソリューション提供を目指し、FlashとFlexはスムーズに連携できるよう開発されています。例えば、ユーザーインターフェイス要素の様々なステートのスキンは、Flex Component Kit for Flash（Flex 3 SDKに同梱）を利用して変更することが可能です。FlashとFlexを組み合わせた開発のメリットについては、この記事の後ほどで、2種類の興味深い手法を紹介しなが解説することにします。
コンポーネントモデル
我々が必要とした魅力的なユーザーインターフェイスとユーザー体験を実現するには、堅牢かつ信頼性の高いコンポーネントモデルの存在が不可欠でした。既存のFlexコンポーネントモデルには（モノリシックであるが故に）いくつかの問題があるとはいえ、このコンポーネントモデルに用意されているCSSサポート、ステートのサポート、データ認知機能などを用いながら、制約ベースのレイアウト定義機能を利用することはとても重要です。
コンポーネントの拡張性についてはデベロッパーコミュニティ全体がこの問題に直面しているため、様々な問題の対応策がコミュニティサポートの形で幅広く提供されています。
カスタマイズとローカライズへの対応
Bombay Sapphireのマーケティング部署は自らの宣伝メッセージを様々な国や地域の幅広いターゲットに向けて発信できることを要件に挙げていたため、我々は革新的な新戦略を打ち立てる必要がありました。そこで、我々は強力なコンポーネントモデルとデータモデルの組み合わせを利用して商品情報を複数の言語で表示し、様々な国と地域の顧客に対応できるようにしました（図2参照）。
コンポーネントモデル
複数の市場および言語に対応できるプラットフォームには、コンテンツの手軽なローカライズが可能なテクノロジを採用することが欠かせません。しかも、コンテンツを様々な言語で提供できるだけでなく、市場別に機能や特典を提供できるようにする必要もあります。Flexのコンポーネントモデルには、多言語対応を可能にするために、フォント管理とリソースバンドルという2つの重要な機能が用意されています。
データモデル
アプリケーションの機能構成の柔軟なカスタマイズをサポートするには、あらかじめFlexフレームワークに統合された「根深い」データ連動型システムの作成が不可欠になります。
拡張性と柔軟性
マーケティングプラットフォームを開発する場合、新たなキャンペーンや商品のリリースに合わせて、規模拡張や様々な変化に対応できることが求められます。プロジェクトの核となるモジュールを開発できることにより、時間の経過とともに規模を拡大したり、新たな機能をスムーズに追加できるようになります（図3参照）。
モジュール
マーケティングプラットフォームの活発かつ長期的な寿命を考えると、既存の実装を手軽に変更できるようにするために、個々のピース（モジュール）で機能を統合・拡張できるようにする必要があります。個々の機能が備わったモジュールを素早くかつ手軽に統合できる仕組みを開発するために、我々はFlexフレームワークのモジュール化機能を利用することにしました。
MXML
システムの柔軟性を確保するには、機能の依存性を効率よく管理・分離することが重要です。柔軟性を開発・維持するために必要なパワーは、MXMLとFlexデータモデルの組み合わせが提供します。
データアクセス
リッチインターネットアプリケーションの成功は、システムとWebサービス間で正しくデータを送受信できることにかかっているといっても過言ではありません。マーケティングプラットフォームでは、必要な時に確実にデータが送受信され、適切に表示されることが不可欠です。
サービスインフラ
リッチインターネットアプリケーションのクライアントには、信頼性の高い充実したデータアクセス機構が必要とされます。もちろん、これはFlexと各種サービスのインフラが得意とするところです（図5参照）。
この節で紹介したトピックをおさらいするためにも、図5の左側に記した主な機能要件とFlexフレームワークの搭載機能（図の右側）を比較してみてください。我々がマーケティングプラットフォームを開発するにあたり、Flexがいかにベストソリューションであったかがおわかりいただけるはずです。
また、Flexコミュニティの存在も評価基準の重要な要素です。Flexコミュニティが存在するからこそ、たとえプロジェクトの開発時に問題が発生しても、必要以上に心配する必要はありません。
成功するマーケティングプラットフォームを開発するための戦略
大規模なソフトウェアプロジェクトにおいては、必ず熟慮された方法論とアプローチが必要になります。以下に挙げるのは、マーケティングプラットフォームを開発する際に特に重要な事柄です。これらはよく知られた方策であり、必ず役に立つはずです。
- 全体的なシステムモデルを作成し、開発し続けることで、統合されたすべての機能とリッチコンテンツのための論理的なフレームワークが提供されます。
- 各機能をフロントエンドからバックエンドまで開発することで、たとえ開発プロセスの早い段階であったとしても、クライアントにより手軽にユーザー体験のワークフローを提示することができます。これは、クライアントとの良好な関係構築に貢献します。
- 計画になかった変更にも対応することで、デベロッパーとクライアントの双方に対して、常に柔軟性が提供されます。最終的なゴールを見失うことなく、クライアントからの変更要請に対応できることが肝心です。
- 変更の流れを管理することで、スタッフ全員の能力を出し切った、最高の作品が開発できるようになります。変更を恐れたり、変更を無駄な支障だと捉えないようにすることが重要です。変更を行うことによって物事が良くなるはずなので、変更を許容し、管理できるようにすることが肝心です。
マーケティングプラットフォームには、一般的な慣習に則ったデータ通信性と手軽な管理性を備えた、能率的なシステムアーキテクチャーを採用するのが得策で す（図6参照）。
デベロッパーとしてここで重要なのは、マルチレイヤー構成のアーキテクチャーにおいて、クライアント、コミュニケーション、ビジネスおよびデータの各レイヤーを明確に分離することです。この際、複雑なインタラクションの大半が発生するシステムのフロントエンドに、特に重点をおく必要があります（図7参照）。
つまるところ、フロントエンドのコア部分は、それぞれが入れ子状に配置された、いくつかのMVCS（Model-View-Controller-Service）構造で構成されています。
- プレゼンテーションサブシステムは複数のコンポーネントをまたぐ形になっており、様々なモジュールのドックとして機能します。これによりプラットフォームが決定されています。
- 独立したデータモデルサブシステムには、アプリケーションのデータとステートがカプセル化されています。
- サービスサブシステムは、ビジネスレイヤーとの通信のためにフロントエンドを開放します。
- コントロールサブシステムは数々の専門的なコントローラーとして散在し、アプリケーション全体に活気をもたらす役目を担っています。
モジュールは、コアのプレゼンテーションの自然なエクステンションであり、特定のコンテンツおよび機能を表示する役目を担っています。この構成なら、コア部分に触れることなく、プラットフォームに無数のモジュールをデプロイできます。
MVC（モデル／ビュー／コントローラー）のインスタンスは、各層の様々なレベルに見ることができます。例えば、フロントエンドアプリケーションは、トップレベルのMVCと捉えることができます。このパターンの実装は、あらゆるモジュールおよびマクロコンポーネントにおいても見られます。Bombay SapphireWebアプリケーションのナビゲーションシステムを構成するマクロコンポーネントが、この一例にあたります。ここでは、Papervision 3DコンポーネントとFlexコンポーネントが混ぜ合わさった高度なビューが採用されているとともに、ステートベースの制御ロジックと複雑なモデルも含まれています。MVCは、マクロコンポーネントとモジュールにかかわる詳細をアプリケーション自体から切り離すための重要なデザイン手法として認識されています。
このデザインの実現性は、MXML言語のパワーと、あらゆるレベルの制御コンテナーの手軽な反転を可能にするデータバインディング機能によって保証されています。また、Flashのイベントモデルは様々なコンポーネント間の通信のための、緩やかに関連付けられたパワフルなメカニズムを提供します。これらの原則とテクニックは、すべてのサブシステム内に適用されているだけでなく、すべてのサブシステム間にも適用されています。
次の節では、Bombay Sapphireマーケティングプラットフォームの実装に関する、いくつかの興味深い詳細を紹介することにします。
Webアプリケーションを構築する際に最も重要な検討事項と言えば、アプリケーション冒頭の読み込み体験です。今回の事例の場合、我々は世界的なブランドとして知られるBombay Sapphireを宣伝するためのマーケティングプラットフォームを開発しました。このサイトにアクセスするにあたり、サイトビジターは飲酒対象年齢であることが義務づけられています。ページが初めて読み込まれた際、ユーザーは居住する国を選択するとともに、誕生日を入力するよう求められます。つまり、ここではWebサイトへのアクセスに先だって、年齢認証（LDA）の手順を追加することが要件に含まれていました。
主な要件としては、他にも、サイトが素早く読み込まれることと、年齢認証の手順から他のコンテンツへと画面がスムーズに遷移することが求められていました。このスムーズな遷移を実現するために、我々は年齢認証用のパーツをFlexアプリケーション内で開発しました。我々は、年齢認証用のインターフェイスを表示するためだけに、ユーザーにアプリケーション全体の読み込みを強いるのは現実的ではないと考えました。そこで、適切なユーザー体験を提供するために、年齢認証が表示されるまでにかかるアプリケーションの読み込み時間を最小限に抑えるようにしています。ユーザーが年齢認証フォームの記入を終えると、実際のアプリケーションが表示される前に、最小限のローディング画面が表示されます（図9参照）。
ここでは目標を達成するために、読み込みフェーズの初期の段階で年齢認証用のフォームを読み込むことにしました。そしてユーザーが年齢認証フォームに必要 事項を記入している間、バックグラウンドではFlexフレームワークとアプリケーションロジックが読み込まれます。ユーザーが年齢認証フォームを記入し終 えた時点でバックグラウンドの読み込み処理が完了していない場合は、アプリケーションの読み込みが完了するまでPost Loading（後読み込み）の画面が表示されます（図10参照）。
この一連の流れを実装するにあたっては、Flexアプリケーションのプリローダー表示内に配置されたFlashモジュールを使用しました。Flashモジュールを使用すれば、Flexフレームワークを使うことなく、最小限のファイルサイズでインタラクティブな年齢認証（LDA）フォームを作成できることが判明しました。
配置は、当該Flashモジュールを読み込むカスタムのFlexプリローダー表示を作成することで実現されています。このカスタムFlexプリローダー表示は、年齢認証フォームのデータが渡されると、その完了イベントをディスパッチします。この完了イベントによって、アプリケーションを開くことが指示されます（図11参照）。
この実装方法について、注目に値するいくつかの詳細を次に記します。
- Flashモジュールの実装にあたっては、ファサードデザインパターンを使用しました。これにより年齢認証フォームとFlexアプリケーションを分離することができ、ソリューション自体の柔軟性が高まっています。また、このファサードにインターフェイスを利用することで、コンパイル済みのクラスが重複する問題も回避することができています。
- システムマネージャーは、プリローダーの最初の
FlexEvent.INIT_PROGRESSイベントを、SWFファイルの2フレーム目に進む条件として使用します。何らかの理由でシステムマネージャーが2フレーム目に進むことを防ぎたい場合は、このイベントをいったん吸収し、後で再ディスパッチしなければならないことが明らかでした。通常、フレームワークイベントを吸収してしまう方法は推奨されませんが、我々のケースでは、とても便利な解決策になっています。
この節では、マーケティングプラットフォームの作成時に大切なもう1つの検討事項である、ビジュアルトランジションについて解説することにします。ここでいうトランジションとは、Flex特有の事柄ではなく、あるグラフィックスのステートが他のステートにアニメーション化によって視覚的に変化するという一般的なグラフィック概念のことです。
カスタムエフェクトとトランジションの作成は、Flex開発時に頻繁に発生する作業です。しかし、複雑なトランジションの作成手順に関しては、ドキュメンテーションや公共的な知識があまり公開されていません。複雑なトランジションの動作は、条件付きのロジックや非同期方式の操作に依存していることがあります。また、実行時に生成されるエフェクトが含まれていたり、外部のモジュールに配置されたエフェクトが含まれることもあります。以下のサンプルは、なぜ我々が複雑なトランジションの合成と管理に開発時間を割かなければならなかったを示す好例です（図11参照）。
図 11. Bombay Sapphireアプリケーションでは高度なトランジションによって複数のアニメーションを同時に表示・管理
上図のサンプルでは、Flexモジュールが読み込まれた時点で表示されるアニメーションが示されています。メインのトランジションシーケンスは、外部モジュールの読み込みが完了し、初期化されるのを待ってから、ショーのエフェクトを再生します。また、メインのトランジションではいくつかの他のエフェクトが組み合わせられており、一部は他のMXMLドキュメント内で定義されています。
魅力的かつ拡張可能なビジュアルプレゼンテーションを開発するにあたっては、エフェクトの構造とその実行処理が重要な課題になります。大半のケースでは、エフェクトはアプリケーションの視聴体験または制御性に一定のビジュアルインパクトを与えます。あまりよく使われていないとはいえ、これと同じほど重要なのは、実行処理の有無の判断がビューや制御プロパティに依存するという逆のケースです。このような複雑なトランジションのフローチャートを次に示します（図12参照）。
上図のサンプルでは、2つの並列的なノードを作成しています。片方のノードには標準のフェードエフェクトの後に、一定の条件によって切り替わるフェードエフェクトまたは一時停止エフェクトが含まれています。2つ目のノードにも標準のフェードエフェクトが含まれていますが、こちらの場合はノードが完了する前に、特定のイベントが発生するのを待機するようになっています。両方のノードが完了すると、また別のエフェクトが表示されます（このエフェクトは別のMXMLドキュメントにて定義）。しかも、どのエフェクトが発生するを知ることができないため、さらに複雑になります。これはトランザクション全体の実行中に読み込まれる別々のモジュールに、エフェクトが定義されているからです。
この手の複雑なトランジションを扱わなければならない場合、複雑な条件間を手軽にナビゲートできるよう、エフェクトインフラの周囲に何らかの抽象化層を設けると便利です。
高次元のファクトリ
1つ目のエフェクトのグループは、Flexエフェクトファクトリ上に実装されています。ここでは他のファクトリをパラメーターとして受け付け、これらを実際のインスタンスの作成時に使用するような、シンプルかつより高次元なファクトリを作成しました。
以下に示すのがそのコードサンプルです。
<effect:Reference value="{detail.module.showEffect}" />
Referenceエフェクトには、インスタンスを作成するために用いられるエフェクトファクトリ（detail.module.showEffect）が渡されています。
<effect:ConditionalEffect ifCondition="{panels.visible}">
<effect:thenEffect>
<mx:Fade duration="1500" />
</effect:thenEffect>
<effect:elseEffect>
<mx:Pause duration="50" />
</effect:elseEffect>
</effect:ConditionalEffect>
Conditionalエフェクトには、引数として2つのエフェクトファクトリが渡されます。2つのうちどちらが使用されるかは、特定の条件（panels.visible）に基づいて判断されます。
ジャストインタイム（JIT）エフェクト
今回のプロジェクトの場合、一部のエフェクトインスタンスは当該インスタンスの再生直前に作成しなければならないことが判明しました。よくあるシナリオは、エフェクトファクトリの引数を「ルーズに」評価しなければならないケースです。今回のプロジェクトの場合、「モジュールエフェクト」を含むモジュールが読み込まれていないため、トランジション全体が作成される際に引数の「value」を評価することができません。
以下に示すのがそのコードサンプルです。
<effects:LazyEffect>
<effect:Reference value="{detail.module.showEffect}" />
</effects:LazyEffect>
ここでは、当該インスタンスの「ルーズな」作成を可能にすることで、単に他のエフェクトをラップするエフェクトを作成するようにしています。実際のエフェクトインスタンスの作成は、ラッパーのインスタンスが開始された時点で行われます。
「イベントブロック」エフェクト
一部のケースでは、特定のイベントが発生するまで、トランジションの実行をある時点でブロックしておかなければならないことがありました。この動作を実現するためには、当該イベントをリッスンし、このイベントが発生した時にだけ実行が完了するようなエフェクトを作成するだけでした。
<effects:WaitForEvent target="{detail}" eventName="ready" />
完成したトランジションのコード
<mx:Sequence>
<mx:Parallel>
<mx:Sequence>
<mx:Fade />
<effect:ConditionalEffect ifCondition="{panels.visible}">
<effect:thenEffect>
<mx:Fade duration="1500" />
</effect:thenEffect>
<effect:elseEffect>
<mx:Pause duration="50" />
</effect:elseEffect>
</effect:ConditionalEffect>
</mx:Sequence>
<mx:Sequence>
<mx:Fade />
<effects:WaitForEvent target="{detail}" eventName="ready" />
</mx:Sequence>
</mx:Parallel>
<effects:LazyEffect>
<effect:Reference value="{detail.module.showEffect}" />
</effects:LazyEffect>
</mx:Sequence>
ご覧のように、ここでは完全に宣言的な手法を用いています。複雑なトランジションの定義については、意味論的な手法が用いられています。この方法を用いれば、この手のトランジションの柔軟性と管理性を向上させることができます。また、トランジションの構成も容易に変更することができるので、複数の独立した、再利用可能なサブトランジションに分けることも可能です。
これらのカスタムエフェクトの抽象化を採用する際には、以下のガイドラインに注意するようにしてください。
必要であればビューステートのトランジションメカニズムであるcapture start values / playに対して適切な実装を用意する
必要であれば高度な再生制御機能のplay / pause / resume / endに対して適切な実装を用意する
この記事の最後の節では、モジュール構成のアプリケーションを開発する重要性を解説することにします。柔軟かつ拡張性に優れたアプリケーションを実現するためには、モジュール化が重要になります。Flexフレームワークは堅牢なモジュールを実現するために、非常にパワフルなインフラを提供します。次の2つのサンプルを検証してみることにしましょう（図13参照）。
1つ目のサンプルでは、Flexコンポーネントをそのままで利用する、典型的なFlexモジュールのインスタンスを使用しています。Tileリストコンポーネントや入力コントロール、フィルター、高度な検証機能などのインスタンスが用いられていることが確認できます。
2つ目のサンプルは、すべてFlashで作成されています。ここでは、Flashデベロッパーがクリエイティビティを発揮してデザインを充実させることが可能な、Flashモジュールのサポートを利用しています（図14参照）。
モジュールアーキテクチャー
モジュールは、常にプラットフォームから極力分離しておくことが重要です。そして通常はMVCSパターンがモジュールには実装されます。モジュールのアーキテクチャーを検討する際、最も重要なのはモジュールとプラットフォーム間のコミュニケーション（やり取り）です。このやり取りは、ユーザーインターフェイスとイベントを用いて行うべきです（図15参照）。
インターフェイスは初期化、構成設定およびビジュアルエフェクトに必要なメソッドとプロパティを提供します。個々のインターフェイスには必須のフィールドが含まれ、拡張機能は別のインターフェイスによって提供されます。あるロジックを個々のインターフェイスに分割する際の目標は、モジュールの作成時に不必要な複雑さが発生するのを最小限に抑えることです。
Flashのイベントモデルによって実現されるモジュールは、高度に分離された方式でプラットフォームとやり取りを行うことができます。イベントを用いて実装されるこの明示的な呼び出しテクニックは、モジュールがナビゲーションリクエストを処理したりアプリケーションレベルのサービスを利用することを可能にします。
- モジュールはイベントオブジェクトを介して引数を渡すことが可能
- モジュールはイベントオブジェクトを介して「レスポンスを受け取る」ことも可能。このイベントの使い方はやや風変わりかもしれませんが、場合によってはとても有用です。例えば、モジュールはナビゲーションリクエストを抽象化するイベントをディスパッチします。もしプラットフォームがこのナビゲーションリクエストを拒否しなければならない場合、当該イベントハンドラーは単に（このカスタムイベントのブールプロパティを設定し、）イベントオブジェクトに「拒否」フラッグを立てるだけで済みます。こうすればモジュールはイベントオブジェクトの「拒否」プロパティを確認することで、リクエストが許可されたか拒否されたかを判定することができます。このテクニックはFlashイベントの「デフォルト防止」メカニズムに似たものです。
シンプルなFlashモジュールのすすめ
もう1つ検討に値する事柄として、シンプルなFlashモジュールの導入が挙げられます。
シンプルなFlashモジュールの目安としては、以下の特徴が挙げられます。
- 複雑なインフラが不要。
- FlashモジュールはFlashオーサリング環境で開発する。
- Flashモジュールはタイムラインベースのアニメーションとインタラクティビティで構成される。
ここでいうシンプルなFlashモジュールとは、インターフェイスを使用してマーケティングプラットフォームとのやり取りを行うアプリケーションの一部と考えると良いでしょう（図16参照）。
シンプルなFlashモジュールといえど、内容は制作チームのFlashデザイナーがすべてを作成した、見事なブランディングアニメーションであっても構いません。大半のケースでは、別途の開発作業を行うことなく、シンプルなFlashモジュールをマーケティングプラットフォームに統合することが望ましいと言えます。
このシナリオは、Flashデザイナーが、アプリケーションに読み込まれるSWFファイルを生成するために用いるテンプレートFLAファイルを作成することで実現できます。この際、テンプレートFLAファイルを正しく構成しておけば、FlashデザイナーがFLAをパブリッシュすることで、その結果としてFlexモジュールが作成されるようにすることが可能です。
Flashテンプレートの構成設定は次に示す2つの手順で行えます。
- シンプルな
IFlexModuleFactoryインターフェイスのカスタム実装を作成します。
public class FlashModuleFactory extends MovieClip
implements IFlexModuleFactory
{
public function FlashModuleFactory() : void
{
super();
addFrameScript(1, secondFrameHandler);
}
private function secondFrameHandler() : void
{
stop();
dispatchEvent(new Event("ready"));
}
public function create(... parameters):Object { ... }
public function info():Object { ... }
...
}
このサンプル実装がモジュールの完了についての通知をFlexフレームワークに送ります。また、このモジュールを含むクラス（シンボル）を作成する役割も担っています
- 2つのフレームを含む空のFLAファイルを作成し、ドキュメントクラスとしてFlashModuleFactoryを設定します。
Flashデベロッパーは、このテンプレートFLAファイルを使用することで、複雑な開発作業を行うことなく手軽にプラットフォームを拡張できるようになります。
この実装にあたっての注意事項は以下のとおりです。
- この手法の場合、依存管理性およびフォント管理性は一切提供されません。また、Flexフレームワークも一切使用されません。つまり、これらのニーズに関しては、独自のコードとツールを利用して具体的に対応する必要があります。
- メモリ管理に十分注意すること。高度なオーディオコンポーネントやビデオコンポーネント、または複雑なActionScriptベースのカスタムコンポーネントを使用する場合は、メモリ管理に十分な注意を払う必要があります。これは特にモジュールの開閉時に関して言えることです。
- この手法の拡張に関しては十分に注意すること。テンプレートによって生成されるSWFの実装にあたり、1番の目標と言えば、Flashオーサリング環境のタイムラインを存分に活用したシンプルなモジュールを作成することとです。この手法はタイムラインベースの複雑なアニメーションの作成に特に適しています。拡張が必要な場合は、十分に注意するとともに、動作検証を早い段階から頻繁に行うように心がける必要があります。
読者自らがFlashフレームワークを開発したことがある場合、上記の注意事項は既に直面したことのある事柄かもしれません。
次のステップ
Bombay Sapphireプロジェクトの開発にあたり、我々はFlex SDKこそが大規模なマーケティングプラットフォームの作成に最も適した選択肢であることを認識しました。オープンソースかつコンポーネントベースのパワフルなフレームワークであるFlexは、マーケティングプラットフォームに必要な開発ツールキットを作成するための安定した基盤も提供することができます。現在、Guggaではこの手のツールキットの初期バージョンの開発を手がけています。Guggaツールキットには、この記事で紹介したテクニックの多くをはじめ、いくつもの便利な開発テクニックの実装が含まれています。
次期バージョンのFlex（コードネーム「Gumbo」）では、現在のFlex SDKに収録された数々の特典に加え、日々の実装作業で問題になりがちな多くの事柄への対策が盛り込まれる予定です。Flexの未来はさらに明るくなると言えるでしょう。
また、フロントエンド開発とバックエンド開発の両方のコンセプトをサポートする新たなIDE、Adobe Flash Catalystにもご期待ください。今後リリースが予定されているAdobe Flash Catalystは、Flashデザイナーがアプリケーションのデザイン作業を行うのに並行して、開発作業を進めることを可能にします。
その他の関連リソース
この記事はAdobe MAX 2008ミラノの「Adobe Flexで作るマーケティングプラットフォーム」セッションを基に作成されたものです。Flexを用いたマーケティングプラットフォームの作成について詳しくは、次のオンラインリソースを参照してください。
- ユーザー機能駆動開発
- アジャイルソフトウェア開発
- ビデオプレゼンテーション「The Flow of Change」
- Flexの実用的なパターン（PPT、2.4 MB）
- コントロールの反転の概要 （PDF、166K）
- ボストンFlashプラットフォームユーザーグループ
- アドビオープンソース
- 完全なカスタムプリローダー
- FlashとFlexの併用 （PDF、2.4 MB）
- Papervisionにみる複雑なモデルのソリューション
- Papervision 3D
謝辞
Bombay Sapphire Platformのデザインおよびユーザー体験は、Shift Global LLCの努力とリーダーシップによって実現されています。
