PR

AIRでデスクトップアプリを作成しよう!

2008年7月30日(水)
高橋 義博

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キー」を押すことにより、ページ遷移を行うようにしたいので、タグの中に、「enter="Browser.location=uri.text"」と記述します。ここで記述している「Browser」と「uri」は、HTMLコンポーネントとTextInputコンポーネントのID名です。

 上記の設定が完了しましたら、「実行ボタン」もしくは「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の活用方法を説明してきましたが、今回で本連載は終わりとなります。お読みいただき、誠にありがとうございました。

制御機器メーカーでソフト開発やWebマスターの業務を経て、2007年からフリーランスとして、Webサイト制作、Flashコンテンツ制作を行っている。また、WebスクールでWebデザイン、Flash制作の講師などを担当し、経験を生かして幅広い指導を行っている。

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています