Flex Tips(3) - Flexの仕組みを理解する

前回はシンプルなアプリケーションを用いてFlexの開発手順を簡単に紹介しました。今回は、Flexのアプリケーションが動作する仕組みを解説します。

Flexの動作の仕組み

---

FlexはJavaと同じく仮想マシンを採用しています。「Flex Builder」で開発を行った場合、各プロジェクトの「bin」ディレクトリの下に「プロジェクト名.swf」というファイルが存在しています。これが仮想マシンが実行するファイルになります。以下の図はFlexアプリケーションが動作する仕組みを表しています。

swfファイルにはコンパイル時に以下の4種類のファイルが組み込まれます。

swc	ライブラリのファイル。コンパイル時にメインのMXMLやasファイルから参照されているモジュールのみが静的にリンクされ、swfファイルに組み込まれる。
MXML	アプリケーションの見栄えを定義するXMLファイル。
as	アプリケーションの動作を記述するActionScriptのファイル。ActionScriptはMXML内に直接記述する以外にasファイルに記述し、それをMXMLファイルから参照する方法がある。
gif,jpg etc	アプリケーションで利用している画像や音声ファイルなど。

「swc」、「MXML」、「as」ファイルについては、コンパイル時にバイトコードに変換されます。そして、実行時に仮想マシンがバイトコードをネイティブコードに変換します。AVMはJVMと同じくJITコンパイラやガーベッジコレクタを備えています。

FlexはJavaと異なり、ライブラリを静的にリンクします。そのため、SWFファイルのサイズが大きくなり、アプリケーション起動時に時間がかかる場合があります。反面、起動後にはライブラリのロードによるオーバーヘッドは発生しません。

Flexにはライブラリを動的にリンクさせる仕組みも用意されています。動的にリンクされるライブラリは複数のアプリケーションで共有可能ですので、こちらの方が効率が良いケースがあります。詳細は次回以降でリポートしたいと思います。

Flexをページに埋める方法

---

FlexのアプリケーションをWebページに含めるためには、<object>タグと<embed>タグを使用します。通常、IEとNetscapeベースのブラウザに対応するため、ページにこれらのタグを直接記述する場合は、この2つのタグを同じ内容で両方記述します。

<object>タグをページに直接記述するとIE7以降では、ユーザがFlexのアプリ上をクリックするか、フォーカスを当てるかしないとアプリケーションが有効になりません。そのため、Flexをページに埋める場合は、JavaScriptから<object>タグか<embed>タグを出力する方法が望ましいです。

「Flex Builder」の「bin」ディレクトリの下に「AC_OETags.js」というJavaScriptファイルが置かれています。このファイルにはブラウザにインストールされている「Flash Player」のバージョンをチェックしたり、<object>タグや<embed>タグを出力する関数が定義されています。

「bin」ディレクトリ配下の「プロジェクト名.html」を参照すると「AC_OETags.js」の関数を使用して、Flexアプリをページに埋め込んでいることが分かります。「プロジェクト名.html」では、「Flash Player」のインストール状況によって、Flash Playerのインストールをさせるための画面を表示するなどの制御がされています。(※「bin」ディレクトリ以下の「playerProductInstall.swf」ファイルは、旧バージョンのPlayerを利用しているユーザにFlash Player9のインストールを促すためのアプリです。)

特に変更する必要が無い場合は「プロジェクト名.html」の内容をFlexアプリを埋め込みたいページにコピーすれば問題ありません。(※パラメータ[src]に設定する値はswfファイルへの相対パスになるので、適宜変更する必要があります。)

同じく「bin」ディレクトリの下に「history.js」、「history.htm」、「history.swf」というファイルが存在します。これらは、「Accrodion」コンテナや「TabNavigator」コンテナなどを使用した場合に、ブラウザの「進む」、「戻る」ボタンでFlexアプリ内を移動する履歴管理の機能に使用されるファイルです。デフォルトの設定では、「プロジェクト名.html」ファイルからこれらのファイルが参照されているので、特に履歴管理の必要が無ければ「ナビゲータペインのプロジェクト名を右クリック → プロパティ → Flex コンパイラ」で履歴管理の機能を無効にすることができます。

画面に表示される文字列を並び替えるとJavaに関連するキーワードになります。ヒントをたよりに並び替えを行ってエンターを押してください。 ユーザ登録をしてログインするとランキングに参加できます。