ダウンロードいただけますはじめに最近ウィジェットという言葉にふれることも多くなったとおもいますが、ウィジェットとは主にデスクトップ上で動作する特定の機能を持った簡易的なアプリケーションの総称です。ウィジェットにはFlashやAjax等のインターネット技術が利用されており、時計やカレンダー、天気予報といった、日常よく使うものから、キャラクターがデスクトップ上を歩き回るようなものまで様々な種類のウィジェットが公開されています。AIRはウィジェット専用のプラットフォームではありませんが、Flashの描画パフォーマンスを有し、クロスプラットフォームで動作するという点で、強力なウィジェットプラットフォームとして活用することができます。本連載では、AIRでデスクトップウィジェットを制作する方法について、実際のプロジェクト例と実装例を交えながら、複数回に渡ってお届けしようと思います。今回は、FlexをベースにFlashと連携を行った、開発手法について解説を行います。BuilderAIRアプリケーションの開発を行う場合は、いくつもの方法が用意されています。BuilderでRIAアプリケーションとして開発することもできます。Ajaxを使ったWebページと同じようにDreamweaverで作成することも可能です。Builderを開発環境として使用したFlexでの開発を第一に検討する事をお勧めします。MXMLでの記述と再利用性Flexには、クラス定義、インスタンス定義・生成、プロパティ設定、イベントハンドラ設定をXMLで記述できる、MXMLという仕組みがあります。「部品を作る(クラス定義)」はActionScriptで、「部品同士を組み合わせてアプリケーションを作る」はMXMLでという切り分けができます。強力なバインディング機能や、MXMLのアトリビュートに書く形でのイベントハンドラ定義なども、より少ない手間でアプリケーションを構築する助けとなります。mxパッケージライブラリの利用Flexフレームワークとmxパッケージライブラリは、Webアプリケーション開発用に設計され、AIR開発用に拡張されています。サーバサイドとの通信周りの機能も充実しており、抽象化度の高いライブラリは、開発途中での通信仕様の変更にも柔軟に対応できます。Builderには充実したデバッガとプロファイラがあります。制作物が複雑化・大規模化してくると、問題箇所の発見や追跡にはデバッガが必須となります。クラスごとにインスタンスのライフサイクルや、使用メモリ量を追えるプロファイラは、メモリリークの検出に有用です。FlexUnitの存在ユニットテスト用のツールとしてFlexUintが公開されています。非同期のテストにも利用できるため、通信機能のテストにも有用です。FlashとFlexを組み合わせて開発するにはFlexベースのアプリケーションで、よりリッチな表現を実現するFlexはMXMLを組み合わせることで、ユーザーインターフェースを簡単にする事ができ、アニメーション効果を演出するエフェクトや、ユーザー操作をイベントトリガとしてエフェクトを関連付けるビヘイビアによって様々な表現を実現することができます。複雑なアニメーションをするクリックボタンを作りたい、しかもその表現をデザイナーが確認しながらいろいろと変えてみたいといわれた場合はどうでしょうか?このようなFlashであれば簡単ですが、Flexで行うには少し面倒です。それならば複雑なアニメーションや演出を含む部分をFlashで作成して、Flexの部品として扱うことができれば、Flashの機能を存分に活かしたビジュアルとFlexの高機能を両立させることができます。デザイナーやクリエーターがFlashでしっかりと演出を構成して、Flex側のエンジニアが全体の制御やバックロジックに集中して取り組むという分業も可能です。この方法をとる利点として、表現部分の実装とバックロジック部分の実装を明確に切り分けることにより、分業が可能になるという点が挙げられます。表現部分の実装には、デザインやモーションなど、デザイナー寄りのスキルを持ったエンジニアが適していますし、バックロジックの実装には、堅剛なシステムを構築できる、システム設計に精通したエンジニアが適しています。作業を、要求されるスキルという粒度で明確に切り分けることで、作業の効率化や品質の向上を期待することができます。今回はこの、「Flashで表示用コンポーネントを作成し、Flex側でそれを操作する」方法について、詳しく解説して行こうと思います。Flashで作成Flashで表示部を作成する際は、mx.flash.UIMovieClipクラスを継承したクラスを作成します。UIMovieClipは、FlexのUIComponentのメソッドを一通り含んだMovieClipです。これを継承したクラスを作ることで、Flex側で通常のUIコンポーネント(TextInputやButton)と同様に配置・操作が可能になります。CS3はこちらから入手することができます。入力、すなわち「ユーザ操作に応答してバックロジック側に通知する部分」の実装には、イベントを用います。Flashで作成したコンポーネントがイベントを発行し、Flexで作成したバックロジック側がそれをリスニングする方法です。addEventListenrを用いてもよいのですが、MXMLでイベントリスナを指定する方法をお勧めします。type="イベントクラスのパス")]例えば、fooというイベントを設定する場合は、このように定義します。出力、すなわち「演算の結果を、表示用コンポーネントに渡して表示させる」部分の実装には、色々な方法があります。値を設定して表示させるメソッドを定義する方法もありますし、表示用コンポーネントの方が、値の変化をlistenする方法もあります。そんな中でお勧めなのが、「MXMLのバインディング機能と、暗黙のsetterを組み合わせた方法」です。/>手順をまとめます。Viewに設定する値(計算結果など)は、BindableにしておくViewクラス側の実装では、setterで定義しておくViewインスタンスを定義するMXMLノードで、Modelの値をバインディングFlashとFlexで開発する時に注意するポイントさて、上記の方法でAIRアプリケーションの開発をするにあたって、いくつか注意点があります。これらはとても細かい問題であるが故に、実際に問題に遭遇するまでは気付きにくいものです。flコンポーネントは、AIR上では動作しません。UIMovieClipを継承したViewクラスインスタンスを、AIRのWindowやNativeWindowに載せるとエラーがスローされます。明示的に依存関係を作る必要があるリンケージクラスを設定したシンボルの取り扱いで注意すべき点があります。「SampleMovieClipクラスにリンクしたシンボル」を作成する場合、Flashのオーサリング画面上でライブラリにシンボルを作成し、メニューの[リンケージ]でリンケージプロパティ設定画面を表示させます。[ActionScriptに書き出し]、[最初のフレームに書き出し]の2つにチェックを入れ、[基本クラス]に「flash.display.MovieClip」を、[クラス]に「SampleMovieClip」を設定すれば完了です。SampleMovieClipクラス定義が書き出され、getDefinitionByNameなどで参照することができます。対し、シンボルをSWC書き出しする場合は、そのリンケージクラスに依存していないクラス定義は書き出されません。よってgetDefinitionByNameで参照しようとしてもエラーがスローされます。Flex側のライブラリに取り込む場合は、明示的に依存関係を定義する、もしくは使用するクラスもSWC化してライブラリに取り込む必要があります。最後に今回は、FlexとFlashの連携について解説を行いましたが、次回はより実例を使ったウィジェットの開発方法について解説を行いたいと思います。次回以降も主に基礎的なことが中心となりますが、それでも学習すべきことが多いAIRアプリケーションの開発において、本連載が学習の助けとなれば幸いです。AIRベースのウィジェットについてご興味があれば、下記の連絡先までお問い合わせください。堀商ビル6FTEL:03-5712-1631(代表)http://www.up-frontier.jp/地域を選択してください地域を選択すると、アドビサイトで使用する言語と内容が変わります。