AIRでデスクトップアプリを作成しよう！
Webブラウザを作成しよう
最後に、AIRアプリケーションらしいコンテンツであるWebブラウザを作成したいと思います。
通常のFlashコンテンツは、Webブラウザ上に動作するものですので、Webブラウザを作成するための機能がありませんでした。しかし、デスクトップアプリケーションであるAIRにはHTMLコンポーネントとしてWebブラウザの機能が用意されていますので、そのHTMLコンポーネントを利用して簡単なブラウザを作成していきます。
AIRでは、Webブラウザ「Safari」にも搭載されているHTMLレンダリングエンジン「Webkit」を採用しているので、簡単にAIRアプリケーション内でHTMLページを表示することができます。
では、Flex BuilderでシンプルなWebブラウザを作成する方法を説明します。
まずは、Flexプロジェクト名「airBrowser」とし、アプリケーションの種類「デスクトップアプリケーション」を選択し、プロジェクトを作成してください。
ウィンドウ左下にある「コンポーネントパネル→Adobe AIR→HTMLコンポーネント」を画面中央の「デザインモード」にドラッグ＆ドロップし、画面右側の「Flexプロパティ→共通→場所」にWebサイトのアドレスを入力し、「レイアウト」から「幅」「高さ」に「100％」、「X」と「Y」に「0」を入力します（図3）。
以上で、設定は完了ですので、「実行ボタン」もしくは「Ctrlキー + F11」で作成したAIRアプリケーションを実行してみてください。「場所」に入力したWebサイトが表示されます。
しかし、このままでは指定したサイトしか閲覧できませんので、「アドレス入力欄」「戻るボタン」「進むボタン」を設定していきます。
Webブラウザに機能を追加しよう
「戻るボタン」「進むボタン」「アドレス入力欄」を横一列にレイアウトするために、「コンポーネントパネル→レイアウト→HBox」を利用して、横幅100％で一番上にレイアウトをします。「HBox」の内部に、「コンポーネントパネル→コントロール→Button」を2つと「TextInput」を配置します。この「Button」が「戻るボタン」「進むボタン」に、「TextInput」がアドレス入力欄となります。
次に、すでに配置してあるHTMLコンポーネントのY座標を「30」に設定し、「Flexプロパティ→共通→ID」に「Browser」と設定します。また、先ほど配置した「TextInput」の「Flexプロパティ→共通→ID」に「uri」と設定します。
これで必要なコンポーネントの配置が完了しましたので、ボタンと入力欄に機能を追加していきます。
最初にボタンですが、ボタンの形状をそのまま利用すると寂しいので、画像をボタンに貼り付けたいと思います。今回はこちらで用意した矢印マークのPNGファイルを利用します。
まず、左側に配置したボタン（戻るボタン）を選択し、「Flexプロパティ→共通→アイコン」に画像ファイルを指定し、「クリック時」に「Browser.historyBack()」と入力します（図3）。
同様に、右側に配置したボタン（進むボタン）を選択し、「Flexプロパティ→共通→アイコン」に画像ファイルを指定し、「クリック時」に「Browser.historyForward()」と入力します。ここで入力した「Browser.」ですが、こちらはHTMLコンポーネントのID名となります。
最後に、アドレス入力欄ですが、アドレス入力後に「Enterキー」を押すことにより、ページ遷移を行うようにしたいので、
上記の設定が完了しましたら、「実行ボタン」もしくは「Ctrlキー + F11」で作成したWebブラウザを実行してみてください。戻るボタンやアドレス入力機能の付いたWebブラウザが起動します。
今回作成した、MXMLファイル・ADFファイル・AIRファイル・ボタン画像は、こちらからダウンロード（http://www.thinkit.co.jp/images/article/102/5/10252.zip）することができますので、参考にしてください（10252.zip/259 KB）。
今回作成したWebブラウザをはじめ、Flexのコンポーネントを利用することにより、簡単にAIRアプリケーションやFlashコンテンツが作成できるのが、Flex Builderの魅力となります。本連載を参考に、いろんなコンテンツを作成してみてください。
5回にわたり、Flex Builderの活用方法を説明してきましたが、今回で本連載は終わりとなります。お読みいただき、誠にありがとうございました。
