Adobe
サインイン 注文状況 ユーザー登録

著者 越田吏帝氏

越田吏帝氏

Content

作成日

14 October 2008

ページ ツール

Tags

ユーザーレベル

すべて

Additional Requirements

Flex Component Kit extension for Flash CS3

はじめに

最近ウィジェットという言葉にふれることも多くなったとおもいますが、ウィジェットとは主にデスクトップ上で動作する特定の機能を持った簡易的なアプリケーションの総称です。ウィジェットにはFlashやAjax等のインターネット技術が利用されており、時計やカレンダー、天気予報といった、日常よく使うものから、キャラクターがデスクトップ上を歩き回るようなものまで様々な種類のウィジェットが公開されています。

AIRはウィジェット専用のプラットフォームではありませんが、Flashの描画パフォーマンスを有し、クロスプラットフォームで動作するという点で、強力なウィジェットプラットフォームとして活用することができます。

本連載では、AIRでデスクトップウィジェットを制作する方法について、実際のプロジェクト例と実装例を交えながら、複数回に渡ってお届けしようと思います。今回は、FlexをベースにFlashと連携を行った、開発手法について解説を行います。

ウィジェット向きの開発環境を考えるならFlex Builder

AIRアプリケーションの開発を行う場合は、いくつもの方法が用意されています。Flash CS3でFlashをベースに作成したり、Flex BuilderでRIAアプリケーションとして開発することもできます。また、Ajaxを使ったWebページと同じようにDreamweaverで作成することも可能です。

AIRの開発ツールと利用技術について
図１：AIRの開発ツールと利用技術について

このように既存の技術を使って、自分が得意とする方法でアプリケーションを開発できるのがAIRの大きな特徴ですが、本格的な機能を持たせるウィジェットの開発を考えた場合、Flex Builderを開発環境として使用したFlexでの開発を第一に検討する事をお勧めします。

MXMLでの記述と再利用性

Flexには、クラス定義、インスタンス定義・生成、プロパティ設定、イベントハンドラ設定をXMLで記述できる、MXMLという仕組みがあります。
「部品を作る（クラス定義）」はActionScriptで、「部品同士を組み合わせてアプリケーションを作る」はMXMLでという切り分けができます。
強力なバインディング機能や、MXMLのアトリビュートに書く形でのイベントハンドラ定義なども、より少ない手間でアプリケーションを構築する助けとなります。

Flexフレームワーク及び mxパッケージライブラリの利用

Flexフレームワークとmxパッケージライブラリは、Webアプリケーション開発用に設計され、AIR開発用に拡張されています。サーバサイドとの通信周りの機能も充実しており、抽象化度の高いライブラリは、開発途中での通信仕様の変更にも柔軟に対応できます。

デバッガとプロファイラの利用

これはFlex SDK採用の理由というより、開発環境であるFlex Builder導入の理由になるのですが、Flex Builderには充実したデバッガとプロファイラがあります。
制作物が複雑化・大規模化してくると、問題箇所の発見や追跡にはデバッガが必須となります。
また、クラスごとにインスタンスのライフサイクルや、使用メモリ量を追えるプロファイラは、メモリリークの検出に有用です。

プロファイラ実行時のスクリーンショット
図２：プロファイラ実行時のスクリーンショット

テスト用コンポーネント FlexUnitの存在

ユニットテスト用のツールとしてFlexUintが公開されています。非同期のテストにも利用できるため、通信機能のテストにも有用です。

FlexUnitの実行時のスクリーンショット
図３：FlexUnitの実行時のスクリーンショット

FlashとFlexを組み合わせて開発するには

Flexベースのアプリケーションで、よりリッチな表現を実現する

FlexはMXMLを組み合わせることで、ユーザーインターフェースを簡単にする事ができ、アニメーション効果を演出するエフェクトや、ユーザー操作をイベントトリガとしてエフェクトを関連付けるビヘイビアによって様々な表現を実現することができます。

しかし例えば、複雑なアニメーションをするクリックボタンを作りたい、しかもその表現をデザイナーが確認しながらいろいろと変えてみたいといわれた場合はどうでしょうか？
このようなFlashであれば簡単ですが、Flexで行うには少し面倒です。

それならば複雑なアニメーションや演出を含む部分をFlashで作成して、Flexの部品として扱うことができれば、Flashの機能を存分に活かしたビジュアルとFlexの高機能を両立させることができます。また、デザイナーやクリエーターがFlashでしっかりと演出を構成して、Flex側のエンジニアが全体の制御やバックロジックに集中して取り組むという分業も可能です。

この方法をとる利点として、表現部分の実装とバックロジック部分の実装を明確に切り分けることにより、分業が可能になるという点が挙げられます。
表現部分の実装には、デザインやモーションなど、デザイナー寄りのスキルを持ったエンジニアが適していますし、バックロジックの実装には、堅剛なシステムを構築できる、システム設計に精通したエンジニアが適しています。
作業を、要求されるスキルという粒度で明確に切り分けることで、作業の効率化や品質の向上を期待することができます。

Flashで作成したコンポーネントとFlexの役割
図４：Flashで作成したコンポーネントとFlexの役割

今回はこの、「Flashで表示用コンポーネントを作成し、Flex側でそれを操作する」方法について、詳しく解説して行こうと思います。

UIコンポーネントとして扱える部品を Flashで作成

Flashで表示部を作成する際は、mx.flash.UIMovieClipクラスを継承したクラスを作成します。UIMovieClipは、FlexのUIComponentのメソッドを一通り含んだMovieClipです。
これを継承したクラスを作ることで、Flex側で通常のUIコンポーネント（TextInputやButton）と同様に配置・操作が可能になります。

Flash側からFlexで使用できるUIコンポーネントを生成するには、「Flex Component Kit for Flash CS3」を使用します

Flex Component Kit for Flash CS3はこちらから入手することができます。

入力の実装

入力、すなわち「ユーザ操作に応答してバックロジック側に通知する部分」の実装には、イベントを用います。Flashで作成したコンポーネントがイベントを発行し、Flexで作成したバックロジック側がそれをリスニングする方法です。
その際 addEventListenrを用いてもよいのですが、MXMLでイベントリスナを指定する方法をお勧めします。

Flash側では [Event(name="イベント名", type="イベントクラスのパス")]

例えば、fooというイベントを設定する場合は、このように定義します。

Flashでの設定

イベント定義 [Event(name="foo", type="flash.events.Event")] イベントのディスパッチ dispatchEvent(new Event('foo', false, false));

Flexでの記述

<TestView id="testView" foo="handleFooEvent(event);" /> <mx:Script> <![CDATA[ /* * testViewインスタンスから fooイベントを受け取ったときの処理 */ private function handleFooEvent (event :Event) :void { // ここに fooイベントを受け取ったときの処理を書く } ]]> </mx:Script>

出力の実装

出力、すなわち「演算の結果を、表示用コンポーネントに渡して表示させる」部分の実装には、色々な方法があります。
表示用コンポーネントのクラスに 値を設定して表示させるメソッドを定義する方法もありますし、表示用コンポーネントの方が、値の変化をlistenする方法もあります。
そんな中でお勧めなのが、「MXMLのバインディング機能と、暗黙のsetterを組み合わせた方法」です。

Flashでの設定

/** * 暗黙のsetter */ public function set displayedValue (paramValue :Object) :void { // ここに displayedValueがアップデートされたときの処理 }

Flexでの記述

<mx:Script> <![CDATA[ [Bindable] private var value :Object; ]]> </mx:Script> <TestView id="testView" displayedValue={value} />

手順をまとめます。

  • Viewに設定する値（計算結果など）は、Bindableにしておく
  • Viewクラス側の実装では、setterで定義しておく
  • Viewインスタンスを定義するMXMLノードで、Modelの値をバインディング

FlashとFlexで開発する時に注意するポイント

さて、上記の方法でAIRアプリケーションの開発をするにあたって、いくつか注意点があります。これらはとても細かい問題であるが故に、実際に問題に遭遇するまでは気付きにくいものです。

flコンポーネントが使えない

Flash CS3で使用できる flコンポーネントは、AIR上では動作しません。
flコンポーネントを使用し UIMovieClipを継承したViewクラスインスタンスを、AIRのWindowやNativeWindowに載せるとエラーがスローされます。

使用するクラスは 明示的に依存関係を作る必要がある

リンケージクラスを設定したシンボルの取り扱いで注意すべき点があります。
例えば、「SampleMovieClipクラスにリンクしたシンボル」を作成する場合、Flashのオーサリング画面上でライブラリにシンボルを作成し、メニューの[リンケージ]でリンケージプロパティ設定画面を表示させます。

[ActionScriptに書き出し]、[最初のフレームに書き出し]の2つにチェックを入れ、[基本クラス]に「flash.display.MovieClip」を、[クラス]に「SampleMovieClip」を設定すれば完了です。
この状態でパブリッシュすれば、出力されたswfには SampleMovieClipクラス定義が書き出され、getDefinitionByNameなどで参照することができます。
対し、シンボルをSWC書き出しする場合は、そのリンケージクラスに依存していないクラス定義は書き出されません。よってgetDefinitionByNameで参照しようとしてもエラーがスローされます。
UIMovieClipを継承したViewクラスをSWC書き出しして Flex側のライブラリに取り込む場合は、明示的に依存関係を定義する、もしくは使用するクラスもSWC化してライブラリに取り込む必要があります。

最後に

今回は、FlexとFlashの連携について解説を行いましたが、次回はより実例を使ったウィジェットの開発方法について解説を行いたいと思います。
次回以降も主に基礎的なことが中心となりますが、それでも学習すべきことが多いAIRアプリケーションの開発において、本連載が学習の助けとなれば幸いです。

また、AIRベースのウィジェットについてご興味があれば、下記の連絡先までお問い合わせください。

記事の内容についてのお問い合わせ窓口

アップフロンティア株式会社
〒154－0004 東京都世田谷区太子堂1－12－39 堀商ビル6F
TEL：03－5712－1631（代表）
http://www.up-frontier.jp/

Tutorials and samples

Tutorials

  • Introducing Adobe AIR Launchpad
  • Licensing Adobe AIR applications on Android
  • Developing native extensions for Adobe AIR
  • Uploading images from CameraRoll and CameraUI

Samples

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

国・地域および言語の選択

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー（2011年9月30日更新）にご同意いただいたものとみなされます。

Reviewed by TRUSTe: site privacy statement