Flex 1.5 アプリケーションで Flash Player 8 の機能を使用する

Flash Player 8 の登場により、様々な新機能が使えるようになりました。また、パフォーマンスやメモリの使用量も大きく改善されています。既存のコンテンツをそのまま実行するだけでも、その差を実感することができるかと思います。

Flex の開発者であれば、Flash Player 8 のいくつかの新機能については、すぐに必要となる機会に会うことでしょう。 例えば以下のようなものが考えられます。

• ファイルのアップロード/ダウンロード
• 新しい External API を用いた、ActionScript と JavaScript 間の相互呼び出し。HTML や AJAX インターフェースと Flex インターフェースの統合が可能です。
  
• IME を直接操作できる ActionScript の新 API 。ユーザーの動作に合わせて動的に変換モードをコントロールすることが可能です。 例えば、日本語 IME の有効なユーザー環境で、ひらがなとカタカナの間で変換モードを切り替えることができます。
  
• Flex 1.5 アプリケーションに組み込むことが可能なその他の Flash Player 8 の主な機能については、次の記事をご参照ください。 Flash Player 8 and Flex 1.5 （英文）

このように、Flash Player 8 は多くのすばらしい機能を提供します。では、どのようにすれば Flex 1.5 でこれらの機能の恩恵を受けることができるでしょうか。この記事では、Flash 8 を使って作った SWF ファイルを Loader コンポーネントを使って Flex アプリケーションに読み込む方法を紹介します。この方法は単純で直接的なものです。全てのアプリケーションロジックとインターフェースは Flex で作成しておいて、Flash Player 8 の機能を小さなライブラリファイルから利用するのです。さらに、この記事では、ファイルのアップロード/ダウンロード用のサンプルコードが提供されていて、そのまま Flex 1.5 のアプリケーションで使用できるため、Flash 8 オーサリングツールを使わなくてもファイル転送機能を使用することができます。

この記事に必要なもの

このチュートリアルを開始するには、以下のソフトウェアとファイルをインストールする必要があります。

Flex 1.5

Flash Player 8

• Flash Player 8 をダウンロード

Flash Professional 8

チュートリアルとサンプルファイル

• FileIO.zip (ZIP, 9k)

Flex 1.5 における Flash Player 8 の使用

Flash Player 8 は新しい機能と可能性を提供します。Flex 1.5 アプリケーションでも、ActionScript で直接これらの API を記述してコンパイルすることで、新しい機能を使えるように思われるかもしれませんが、いくつかの理由でこれは機能しません。まず、Flex 1.5 のコンパイラは新しい ActionScript 文を理解しません。また、Flash Player 7 の SWF を生成するようにハードコードされています。今後の Flex のリリースでは Flash Player 8 の機能が全てサポートされる予定です。

しかし、がっかりする必要はありません。別の方法を使って Flash Player 8 の機能を使用することができるのです。まず、Flash 8 オーサリングツールを使い Flash Player 8 のクラスを含む小さな SWF ファイルを生成します。そして、それらの SWF ファイルを Loader コンポーネントを使い Flex 1.5 アプリケーションに読み込みます。これで、Flex 1.5 アプリケーションから ActionScript 経由でそれらの機能にアクセスできるのです。このアプローチは単純ですが、多くの Flex 開発者に必要とされていた数々の Flash Player 8 の機能を利用可能にします。

この方法の実現にはいくつかのやり方があります。まず、クラスやメソッドだけをいくつか提供する UI を含まない Flash Player 8 の SWF ファイルを作り、それを Flex 1.5 アプリケーションから使うことができます。また、ユーザーインターフェースも Flash Player 8 のコンテンツとして作成し、それを Flex アプリケーション内で実行することも可能です。どのようなアプローチを取るにせよ、イベントやプロパティやメソッドを使用して、容易に Flex アプリケーションと SWF ファイルを連携させることができます。

なお、この方法を使用する際は、Flash Player 8 のセキュリティモデルに留意してください。他のドメインからロードした SWF ファイルの持つ情報へのアクセスには注意が必要です。Flash Player 8 のセキュリティモデルのより詳しい情報については、Flash デベロッパーセンターをご覧ください。

ファイルアップロードとダウンロードのサンプル

ファイルのアップロードとダウンロードは多くの Flex 開発者から頻繁に要求された機能でした。今では、以前のようにブラウザを経由してファイル転送のための JavaScript を呼び出したりしなくても、 Flash Player 自身の機能で行うことができます。これによって、ユーザーエクスペリエンスをより自由にコントロールできるなど多くの利点が得られます。幸運なことに、ファイルのアップロード/ダウンロードを Flex アプリケーションで使用するのはとても簡単です。この記事で提供されているファイル転送用のクラスを再利用すれば、Flash Player 8 用のコードを何か書く必要さえありません。

以下のサンプルでは、Flex アプリケーションに読み込んだ Flash Player 8 の SWF ファイルの使い方を学びます。SWF ファイルは Flash 8 オーサリングツールを使い作成されたものです。ユーザーインターフェースは含まず、ファイル転送に使用するクラスのライブラリのみを提供します。残りのアプリケーションロジックやインターフェースは Flex で開発します。

実際には2種類の例を紹介します。最初の例は、もっとも単純な方法でファイルアップロード機能を Flex アプリケーションに組み込む方法を示しています。2つ目の例は、それを発展させたもので、典型的なエンタープライズアプリケーションのアーキテクチャに機能を組み込んでいて、。また、イベントのログ機能や処理のモニタリングなどの役に立つ機能も実装されています。きちんとアーキテクチャーデザインのされたアプリケーションには2つ目の例を使いましょう。

この記事は以下のファイルを提供します。

• SWF ファイル転送ライブラリ：Flash 8 で作成されたシンプルなファイル転送ライブラリです。ZIP ファイル内の /flash ディレクトリの下の fileIO.fla がコードの記述されているファイルです。 この FLA ファイルをコンパイルした fileIO.swf は /flex ディレクトリにあります。ファイル内には、アップロードやダウンロードを始めとするファイルに対する操作を行う関数が記述されています。この SWF ファイルを Loader コンポーネントを使って Flex アプリケーションに読み込むと、SWF ファイル内の関数が呼び出せます。SWF ファイルの大きさはたったの 1KB ですので、Flex アプリケーションの大きさにはほとんど影響しません。また、ロードするタイミングは Flex アプリケーションの初期化後であればいつでもかまいません。このサンプルファイルは、どのアプリケーションでもそのままでも使えることでしょう。
• サーバー側の処理：/cfusion ディレクトリ内に、とても単純な１つのタグだけの upload.cmf というファイルが提供されています。この CF ファイルはアップロードされたファイルを受信して /upload ディレクトリに保存します。CF ファイルは CF サーバー下の任意の場所に置くことができますが、その際に config.xml ファイルでその場所が参照されるようにしておきます。サーバー側にはもちろん他のテクノロジー（Java, ASP, PHP 等）を使用することができます。その際、サーバー側では Flash Player から送られる HTTP POST データを処理します。

シンプルなファイルアップロード例

上記2つのファイルをそのまま使い、簡単にファイルを選択してアップロードする機能を実現することができます。以下は simpleFileTransfer.mxml ファイルに記述されているコードです。

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
  <mx:Button label="Browse" click="myLoader.content.browse('myFile')" id="browseButton" />

  <mx:Button label="Upload" click="myLoader.content.upload('http://localhost:8300/upload.cfm')" id="uploadButton" />
  <mx:Loader source="fileIO.swf" height="10" width="10" id="myLoader" />
</mx:Application>

このサンプルは、単純に fileIO.swf を読み込む Loader コンポーネントの使い方を示しています。アプリケーション内の2つのボタンでは Loader コンポーネントの content プロパティを使い、読み込まれた SWF ファイル内の関数を実行しています。

loader.content.function(parameters)

このようにして、提供されている SWF を使い Flex 1.5 アプリケーションでもファイルアップロード機能を使用することができます。

より複雑なファイル転送の例

2つ目のファイル転送の例ではより多くの機能を提供しています。また、アーキテクチャーも Flex アプリケーションのベストプラクティスに沿っています。このサンプルでは、先の2つのファイルに加え、下記の3つの MXML ファイルも使います。以下、各 MXML ファイルの説明です。

LibLoader.mxml: これは Loader コンポーネントに”読み込み完了”のイベント機能を追加したコンポーネントです。このコンポーネントは他のプロジェクトでもベースコンポーネントとして使うことができるでしょう。

FileIO.mxml: このコンポーネントは上記の LibLoaderコンポーネントを拡張し、ブラウズ/アップロード/ダウンロード/キャンセル用のメソッドを追加したものです。これらのメソッドは単に fileIO.swf 内の同じ関数を呼び出すだけです。ファイル内では、状況やエラーを示すイベントを受け取るリスナー関数も定義しています。

main.mxml: ユーザーインターフェースと上記の FileIO コンポーネントを定義している Flex アプリケーションです。ユーザーはファイルの選択とアップロード/ダウンロードやそのキャンセルをしたり、ファイル転送の進行状況を見ることができます。FileIO コンポーネントには Loader コンポーネントにいろいろな機能が追加されているため、Loader コンポーネントの content プロパティ経由で読み込んだ SWF ファイルの関数を呼び出さなくても、FileIO コンポーネントのメソッドを単純に呼ぶことができます。

以上の例は、Flash Player 8 の機能を持つ一つの SWF ファイルを必要に応じていろいろな使い方ができることを示しています。ファイル転送に添付の SWF を使用する際は、アプリケーションのアーキテクチャに合った実装を選んで使用して下さい。

一度このやり方に慣れれば、自身で SWF ファイルを Flash 8 で作成して、他の Flash Player 8 の新しい機能を使うことができるでしょう。 JavaScript API の呼び出しや表現力の向上による Flex アプリケーションの拡張ができるようになります。

Flex チームの品質保証エンジニアの Joan Tan に感謝します。彼は、技術情報の提供と記事のレビューに貢献してくれました。Joan は Macromedia Central と Macromedia Flash の品質保証も担当しています。

著者について