Adobe AIRで作るデスクトップアプリケーション

第12回 HTMLコンテンツの利用

この記事を読むのに必要な時間:およそ 3 分

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);

HTMLの表示を簡単に行える

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クラスの下記のプロパティを使います。

プロパティ
width:NumberHTMLControlオブジェクトの幅
height:NumberHTMLControlオブジェクトの高さ
htmlWidth:NumberHTMLコンテンツの幅
htmlHeight:NumberHTMLコンテンツの高さ
scrollH:Number水平方向のスクロール位置
scrollV:Number垂直方向のスクロール位置

スクロールの最大値は,コンテンツとオブジェクトのサイズの差で求められます。次のコードは水平/垂直共に最大までスクロールする例です(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オブジェクトに相当する機能が用意されています。履歴に関するメソッド/プロパティには次のものがあります。

メソッド/プロパティ命令/
historyBack()戻る
historyForward()進む
historyGo()指定したステップ数移動する(正の値は進む/負の値は戻る)
getHistoryAt()指定した位置のエントリを取得する
historyLength:uint履歴リストの長さ
historyPosition:uint履歴リスト内の現在の位置

次のコードは戻る/進むボタンの実装例です(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パッケージ)です。

著者プロフィール

タナカヤスヒロ

早稲田大学卒業後,DTP業務を経てマルチメディア系制作会社へ。Macromedia Directorにのめり込む。フリーランスとなりFlashにシフトしてからもデスクトップ絡みの仕事が絶えず,Apolloにも勝手に縁を感じている。現在株式会社antsに所属。ants Lab.にも記事を上げている。

URLhttp://labs.anthill.jp/

著書

コメント

  • 不愉快ですね

    コピーできない記事を載せるのは、人格が悪い証拠!
    ソースを修正すれば出来るけどネ!

    Commented : #1  名無し (2008/03/28, 23:19)

コメントの記入