ブラウザを作る

ブラウザを作る

　実際にFlexを使ってAIRアプリケーションを作成していきましょう。今回は、本連載の第1回で紹介したFlex Builder 3を使って説明していきます。まだインストールをしていない場合は、ぜひ体験版（https://www.adobe.com/cfusion/tdrc/index.cfm?loc=ja&product=flex）をインストールして体験してください。

　Flex BuilderでAIRアプリケーションを作成する流れは3ステップで紹介します。

　ステップ1では、プロジェクトを作成します。「ファイル→新規→Flexプロジェクト」と選択し、プロジェクト名を入力し、「アプリケーションの種類」を「デスクトップアプリケーション」を選択します。

　ステップ2では、コンポーネントのレイアウト、アクションの編集をします。

　ステップ3では、AIRアプリケーションのパブリッシュをします。「ファイル→書き出し→リリースビルド」と選択し、対象となるプロジェクトを選択して「次へ」、AIRアプリケーションに付与する証明書を選択して「終了」を選択します。証明書はその場で自己証明書として作成することも可能です。

　Flexアプリケーションはブラウザ上で実行されますが、AIRアプリケーションは単体のアプリケーションとして動作します。今回はFlexでWebブラウザを作成してみましょう。

　まずは、単純に固定のURLを表示するだけのブラウザを作成します。

　プロジェクト名を「MyBrowser」として新規Flexプロジェクトを作成します。デフォルトではリスト1のような構成になっています。

　MyBrowser.mxmlを開くと、AIRアプリケーションとしてのひな形が用意されています。このままでは単純にウィンドウが表示されるだけなので、HTMLコンポーネントを追加します。HTMLコンポーネントはlocation属性に指定したURLのページを表示するコンポーネントです。HTMLコンポーネントはAIRランタイムに含まれるコンポーネントです。

　簡単にコンポーネントを配置するには、編集モードをデザインモードに切り替えます。デザインモードでは、実際のアプリケーションのGUIが表示されます。デザインモードに切り替えるには、中央コンソールの「デザイン」ボタンをクリックします。

　「コンポーネントパネル」の中にある「Adobe AIR→HTML」をドラッグして、適当な位置に配置します。続いて、「Flexプロパティ」パネルで配置したHTMLコンポーネントの属性を調整します（リスト2）。

　これだけで単純に表示するだけのブラウザが完成しました。動作確認をするには、「実行→MyBrowserを実行」と選択するとアプリケーションが起動します。ここまでのソースはこちらからダウンロード（http://www.thinkit.co.jp/images/article/88/3/8831.zip）できます（8831.zip/0.303 KB）。

アクションの割り当て

　一般的なブラウザには、戻る、進む、更新ボタンやアドレスバーなどが用意されています。これをHTMLコンポーネントと同様の手順で、ButtonコンポーネントやTextInputコンポーネントを配置していきます。

　続いて、ボタンをクリックしたときのアクションを定義していきます。コンポーネントを識別するためのIDとイベントを「Flexプロパティ」に記述します。続いて、イベントに定義したイベントハンドラをActionScriptで記述していきます。

　MXMLファイルにActionScriptを記述するには、タグを利用します。試しに入力してみるとリスト3のようにコードが保管されると思います。

　この「」の間にActionScriptを記述していきます。これは簡単に説明するとXML形式のファイルにタグ以外の文字列を書くための目印のようなものです。

　イベントハンドラ自体はFlashのそれと同様に書くことができます。コンポーネントを識別するためのIDが、Flashで言うインスタンス名と似たようなイメージを持っていただけると分かりやすいかと思います。

　今回はブラウザの「戻る」「進む」「移動」ボタンのアクションと、リンクの遷移が完了したら、アドレスバーの内容をリンク先のURLに更新するためのイベントハンドラを用意しました。

　まだブラウザの機能としては足りない部分もあるとは思いますが、CSSを利用してボタンに好きな画像を利用したり、AIRアプリケーションの設定ファイルを編集することで、ウィンドウのフレームを消してしまったりといったことも可能です。ぜひ挑戦してみてください。完成したサンプルのソースはこちらからダウンロード（http://www.thinkit.co.jp/images/article/88/3/8832.zip）できます（8832.zip/0.59 KB）。