HTMLの表示

Adobe AIRにはSafari等のブラウザで採用されているWebKitエンジンが実装されており，HTMLのレンダリングやJavaScriptの実行が可能です。これはAIRの大きな特長の一つと言えるでしょう。今回はAIRアプリケーションにHTMLコンテンツを追加する方法について解説します。

HTMLの表示方法はとても簡単です。まずはFlashでの実装方法から見てみましょう。次のサンプルはステージにgihyo.jpのトップページを表示します。

import flash.html.HTMLControl;
var html:HTMLControl = new HTMLControl();
html.width = stage.stageWidth;
html.height = stage.stageHeight;
html.load(new URLRequest("http://gihyo.jp/"));
addChild(html);

AIR APIでHTMLコンテンツの処理を担当するのはHTMLControlクラス（flash.htmlパッケージ）です。このクラスはDisplayObjectの一つで，Spriteクラスのサブクラスです。したがって，インスタンスを作成して任意の表示リストに加えればステージ上に表示されます。回転したりフィルタを掛けることも可能です。もちろん，具体的なコンテンツを読み込まなければ何も表示されません。コンテンツを読み込むには，URLを指定したURLRequestオブジェクトを作成してload()メソッドに渡します。また，HTMLControlオブジェクトの幅（widthプロパティ）と高さ（heightプロパティ）のデフォルト値は0なので，ここではステージと同じサイズに変更しています。

なお，デフォルトの状態でウィンドウをリサイズすると，それに合わせてコンテンツも拡大／縮小されてしまいます。コンテンツのスケールを変えずに表示領域の広さが変わるようにするには，次のようなコードを追加すればよいでしょう。

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, stageResizeHandler);
function stageResizeHandler(e:Event):void {
  html.width = stage.stageWidth;
  html.height = stage.stageHeight;
}

続いてFlex Builderでの実装方法です。Flex BuilderにはHTMLコンテンツを表示するためのHTMLコンポーネントがあるので，それを使います。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:HTML x="0" y="0" width="100%" height="100%" location="http://gihyo.jp/"/>
</mx:WindowedApplication>

このようにHTMLコンポーネントを配置して，locationプロパティにURLを指定するだけです。width／heightプロパティを100%にしておけばウィンドウサイズに合わせて表示領域も変わりますし，スクロールバーまで付いています。

Flashでのスクロールバー

Flex BuilderのHTMLコンポーネントにはもともとスクロールバーが付いていますが，Flashでは独自にスクロール処理を組み込む必要があります。スクロールの実装にはHTMLControlクラスの下記のプロパティを使います。

スクロールの最大値は，コンテンツとオブジェクトのサイズの差で求められます。次のコードは水平／垂直共に最大までスクロールする例です（htmlはHTMLControlオブジェクト⁠）⁠。

var maxScrollH:Number = html.htmlWidth - html.width;
var maxScrollV:Number = html.htmlHeight - html.height;
html.scrollH = maxScrollH;
html.scrollV = maxScrollV;

履歴の移動

ウェブブラウザのようなアプリーケーションを作成する際は，ページの履歴を行き来する機能が必要になるかも知れません。HTMLControlクラスおよびHTMLコンポーネントには，ちょうどJavaScriptのhistoryオブジェクトに相当する機能が用意されています。履歴に関するメソッド／プロパティには次のものがあります。

次のコードは戻る／進むボタンの実装例です（htmlはHTMLControlオブジェクト⁠）⁠。

prev_btn.addEventListener(MouseEvent.CLICK, prevClickHandler);
next_btn.addEventListener(MouseEvent.CLICK, nextClickHandler);
function prevClickHandler(e:MouseEvent):void {
  html.historyBack();
}
function nextClickHandler(e:MouseEvent):void {
  html.historyForward();
}

なお，履歴リスト内の各エントリはページのURLやタイトルを保持したHTMLHistoryItemオブジェクト（flash.htmlパッケージ）です。