Adobe AIR プログラミング講座【HTMLLoaderクラスについて】

HTMLLoaderクラスについて

・	HTMLLoader クラスについて
・	HTMLファイルを読み込んで表示する
・	PDFファイルを読み込んで表示する
・	HTMLLoader の読み込み履歴を調べる
・	HTMLLoader のイベントについて
・	HTMLLoader からHTML用 AIR API を呼び出す

前のページに戻る

HTMLLoader クラスについて

サンプルをダウンロード

html_loader_00_fla09_air1.fla Adobe Flash CS3 AIR1.1

html_loader_00_fla09_air1.air Adobe AIR アプリケーション

■HTMLLoader クラスについて

HTMLLoader クラスを使うと、HTMLファイルを読み込んでレンダリングを行いスプライトと同じように表示する事ができます。 Safari等のブラウザで採用されている WebKit エンジンでレンダリングが行われます。

レンダリングされるだけでなくブラウザのように動作します。リンク先をクリックすると新たなページが読み込まれレンダリング表示が更新されます。

JavaScript の実行も可能です。

PDFファイルを表示する事もできます。ただしAIRを動作させているパソコン上に Adobe Reader 8.1 以降がインストールされている必要があります。

HTMLLoader は以下のクラスから派生しています。ここで解説してない分はリンク先に解説がありますので合わせてご覧下さい。

Object

↓派生

EventDispatcher

↓派生

DisplayObject

↓派生

InteractiveObject

↓派生

DisplayObjectContainer

↓派生

Sprite

↓派生

HTMLLoader

■HTMLLoader クラスをインスタンス化する

まずHTMLLoader クラスをインスタンス化します。

new HTMLLoader ( );

第01引数	なし
戻り値	HTMLLoader オブジェクト

HTMLLoader オブジェクトを作成する


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();

■表示リストに登録する

addChild() メソッドを使って表示リストに登録します。

デフォルトでは幅と高さが設定されていないので、このままでは表示されません。 width プロパティと height プロパティを変更して幅と高さを設定します。

ローダーオブジェクトを作成する


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);		// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

上に戻る

HTMLファイルを読み込んで表示する

■読み込みを開始する

load() メソッドを使うとHTMLの読み込みを開始してレンダリング表示することが出来ます。引数にHTMLファイルまでの相対パスかURLを指定します。

すでに読み込み中にもかかわらずこのメソッドを呼び出した場合は、以前の読み込み処理が終了し新しく読み込みを開始します。

HTMLLoader.load ( URLRequest型 );

第01引数	ファイルまでの相対パスかＵＲＬをURLRequest型で指定します。
戻り値	なし

HTMLファイルの読み込みを開始する


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var url : URLRequest = new URLRequest("http://hakuhin.jp/index.html");
html_loader.load(url);

swfファイルからの相対パスを使う事もできる


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var url : URLRequest = new URLRequest("../html/index.html");
html_loader.load(url);

■HTML文字列を使ってレンダリング表示する

HTML文字列を使って直接レンダリング表示するには、loadString() メソッドを使用します。引数にHTML形式で記述された文字列を指定します。

HTML文字列からレンダリング表示する


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定


var str : String = "<HTML><BODY><B>HELLO WORLD!!</B></BODY></HTML>";
html_loader.loadString(str);

■読み込みを中止する

HTMLファイルの読み込みを中止するには、cancelLoad() メソッドを使用します。

HTMLファイルの読み込みを中止する


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定


var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		html_loader.cancelLoad();
		break;
	};
	step ++;
});

上に戻る

PDFファイルを読み込んで表示する

■インストールされている Adobe Reader のバージョンを調べる

PDFファイルを読み込んでレンダリング表示する為には、AIR を動作させているパソコン上に Adobe Reader 8.1 以降がインストールされている必要があります。

という事で、HTMLLoader.pdfCapability プロパティを調べてPDFファイルが表示可能か調べます。下に一覧表があります。

定数	数値	説明
HTMLPDFCapability.STATUS_OK	0	PDFファイルを読み込む事が可能
HTMLPDFCapability. ERROR_INSTALLED_READER_NOT_FOUND	3201	Adobe Readerが検出できない
HTMLPDFCapability. ERROR_INSTALLED_READER_TOO_OLD	3202	Adobe Readerのバージョンが古い
HTMLPDFCapability. ERROR_PREFERED_READER_TOO_OLD	3203	Adobe Readerのバージョンは対応しているがPDFのコンテンツを扱うように設定されている Adobe Reader のバージョンが古い

HTMLPDFCapability.STATUS_OK と等しい場合、「Adobe Reader の読み込みが可能」である事が分かります。

PDFファイルを読み込めるか調べる


import flash.html.HTMLLoader;
import flash.html.HTMLPDFCapability;

if(HTMLLoader.pdfCapability == HTMLPDFCapability.STATUS_OK){
	trace("PDFファイルの読み込みが可能");
}

■読み込みを開始する

load() メソッドを使うとPDFファイルの読み込みを開始してレンダリング表示することが出来ます。引数にPDFファイルまでの相対パスかURLを指定します。

すでに読み込み中にもかかわらずこのメソッドを呼び出した場合は、以前の読み込み処理が終了し新しく読み込みを開始します。

HTMLLoader.load ( URLRequest型 );

第01引数	ファイルまでの相対パスかＵＲＬをURLRequest型で指定します。
戻り値	なし

PDFファイルの読み込みを開始する


var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var url : URLRequest = new URLRequest("http://hakuhin.jp/test.pdf");
html_loader.load(url);

swfファイルからの相対パスを使う事もできる


var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var url : URLRequest = new URLRequest("../html/test.pdf");
html_loader.load(url);

上に戻る

HTMLLoader の読み込み履歴を調べる

■１つ前のページに戻る

１つ前のページに戻りたい場合は、historyBack() メソッドを使用します。

１つ前のページに戻る


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		html_loader.load(new URLRequest("http://yahoo.com"));
		break;
	case 2:
		html_loader.historyBack();
		break;
	};
	step ++;
});

■１つ次のページに進める

１つ次のページに進めたい場合は、historyForward() メソッドを使用します。

１つ次のページに進める


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		html_loader.load(new URLRequest("http://yahoo.com"));
		break;
	case 2:
		html_loader.historyBack();
		break;
	case 3:
		html_loader.historyForward();
		break;
	};
	step ++;
});

■ステップ数を指定して履歴を移動する

ステップ数を指定して履歴を移動するには、historyGo() メソッドを使用します。
引数にステップ数を指定します。
マイナス値で履歴を戻します。
プラス値で履歴を進めます。

履歴を移動する


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		html_loader.load(new URLRequest("http://yahoo.com"));
		break;
	case 2:
		html_loader.historyGo(-1);
		break;
	case 3:
		html_loader.historyGo(1);
		break;
	};
	step ++;
});

■現在の履歴番号と総履歴数を取得する

現在表示している履歴番号を取得するには、historyPosition プロパティを調べます。

総履歴数を取得するには、historyLength プロパティを調べます。

現在の履歴番号と総履歴数を取得する


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		html_loader.load(new URLRequest("http://yahoo.com"));
		break;
	case 2:
		html_loader.historyGo(-1);
		break;
	case 3:
		html_loader.historyGo(1);
		break;
	};
	step ++;
});

// 読み込み完了時に呼び出されるイベント
html_loader.addEventListener(Event.COMPLETE , function(e){
	trace(html_loader.historyPosition + "/" + html_loader.historyLength);
});

■番号を指定して履歴情報を取得する

番号から履歴情報を取得するには、getHistoryAt() メソッドを使用します。

引数に履歴番号を指定します。
戻り値から HTMLHistoryItem オブジェクトを取得する事が出来ます。

履歴番号から HTMLHistoryItem オブジェクトを取得する


import flash.html.HTMLLoader;
import flash.html.HTMLHistoryItem;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		html_loader.load(new URLRequest("http://yahoo.com"));
		break;
	case 2:
		var history_item : HTMLHistoryItem = html_loader.getHistoryAt(0);
		break;
	};
	step ++;
});

■HTMLHistoryItem オブジェクトについて

HTMLHistoryItem オブジェクトは以下のプロパティを保有しています。

プロパティ名	型	説明
isPost	Boolean	POSTデータを含むかどうか（読み取り専用）
originalUrl	String	リダイレクト前のURL（読み取り専用）
url	String	実際に表示されるURL（読み取り専用）
title	String	タイトル名（読み取り専用）

履歴情報を取得する


import flash.html.HTMLLoader;
import flash.html.HTMLHistoryItem;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		var history_item : HTMLHistoryItem = html_loader.getHistoryAt(0);
		trace("POSTデータが含まれるか？ : " + history_item.isPost);
		trace("リダイレクト前 URL : " + history_item.originalUrl);
		trace("URL : " + history_item.url);
		trace("タイトル名 : " + history_item.title);
		break;
	};
	step ++;
});

上に戻る

HTMLLoader のイベントについて

■読み込みが完了したか調べる

読み込みが完了したか調べるには、Event.COMPLETE イベントを使用します。

このイベントは、サイトの構成によっては呼び出されない事があります。

読み込みが完了したか調べる


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		html_loader.load(new URLRequest("http://yahoo.com"));
		break;
	};
	step ++;
});

// 読み込み完了時に呼び出されるイベント
html_loader.addEventListener(Event.COMPLETE , function(e){
	trace("読み込みが完了した");
});

■URL が更新されたか調べる

URL が更新され最新の状態であるか調べるには、Event.LOCATION_CHANGE イベントを使用します。

URL が更新されたか調べる


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		html_loader.load(new URLRequest("http://yahoo.com"));
		break;
	};
	step ++;
});

// URL 更新時に呼び出されるイベント
html_loader.addEventListener(Event.LOCATION_CHANGE , function(e){
	trace("URL が更新された" + html_loader.location);
});

■レンダリングが更新されたか調べる

レンダリングが更新され最新の状態であるか調べるには、Event.HTML_RENDER イベントを使用します。

レンダリング更新されたか調べる


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		html_loader.load(new URLRequest("http://yahoo.com"));
		break;
	};
	step ++;
});

// レンダリング更新時に呼び出されるイベント
html_loader.addEventListener(Event.HTML_RENDER , function(e){
	trace("レンダリングが更新され最新の状態");
});

■スクロールが更新されたか調べる

スクロールが更新されたか調べるには、Event.SCROLL イベントを使用します。

横方向のスクロール位置を変更するには scrollH プロパティ、
縦方向のスクロール位置を変更するには scrollV プロパティを変更します。

スクロールが更新されたか調べる


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		html_loader.load(new URLRequest("http://yahoo.com"));
		break;
	};
	step ++;
});

// スクロール更新時に呼び出されるイベント
html_loader.addEventListener(Event.SCROLL , function(e){
	trace("スクロールが更新された");
	trace("横 : " + html_loader.scrollH);
	trace("縦 : " + html_loader.scrollV);
});

■JavaScript の例外処理が発生したか調べる

JavaScript の例外処理が発生したか調べるには、HTMLUncaughtScriptExceptionEvent.UNCAUGHT_SCRIPT_EXCEPTION イベントを使用します。

JavaScript の例外処理が発生したか調べる


import flash.html.HTMLLoader;
import flash.events.HTMLUncaughtScriptExceptionEvent;

var html_loader : HTMLLoader = new HTMLLoader();	// HTMLLoaderオブジェクトを作成
stage.addChild(html_loader);			// 表示リストに登録
html_loader.width = 400;			// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;			// HTMLLoaderオブジェクトの高さを設定

var step = 0;
html_loader.addEventListener(MouseEvent.CLICK , function(e){
	switch(step){
	case 0:
		html_loader.load(new URLRequest("http://google.com"));
		break;
	case 1:
		html_loader.load(new URLRequest("http://yahoo.com"));
		break;
	};
	step ++;
});

// JavaScript の例外処理が発生した時に呼び出されるイベント
html_loader.addEventListener(HTMLUncaughtScriptExceptionEvent.UNCAUGHT_SCRIPT_EXCEPTION , function(e){
	trace("JavaScript の例外処理が発生した");
});

上に戻る

HTMLLoader からHTML用 AIR API を呼び出す

■「HTML開発者用 AIR API」を呼び出す

HTMLLoader 内の JavaScript を使用して「HTML開発者用 AIR API」を呼び出します。

window.runtime.* からアクセスします。

詳しくは HTML 開発者用 AIR APIの公式リファレンスが参考になります。

http://help.adobe.com/ja_JP/AIR/1.5/jslr/index.html

AIR 1.1 以前の使用例です。

HTML用 AIR API のtrace() 関数を呼び出す(AIR 1.1以前)


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();

stage.addChild(html_loader);		// 表示リストに登録
html_loader.width = 400;		// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;		// HTMLLoaderオブジェクトの高さを設定

var str : String = "" +
"<HTML>" +
"	<HEAD>" +
"	<script>" +
"		function func(){" +
"			window.runtime.trace(\"Hallo World !!\");" +
"		}" +
"	</script>" +
"	</HEAD>" +
"<body>" +
"	<input type=\"button\" value=\"click!!\" onClick=\"func()\"}>" +
"</body>" +
"</html>";
html_loader.loadString(str);

■AIR 1.5 以降で必要な設定

AIR 1.5 以降では、loadString() メソッドで生成したコンテンツにアプリケーションサンドボックス制限があります。

AIR 1.0～1.1 では、「HTML用 AIR API」をそのまま実行可能ですが、AIR 1.5 ではデフォルトでは動作が制限されます。

制限を外すには、placeLoadStringContentInApplicationSandbox プロパティを true に変更します。他人に悪意あるコードが実行される可能性が生じるので注意します。

AIR 1.5 以降の例です。

HTML用 AIR API のtrace() 関数を呼び出す(AIR 1.5以降)


import flash.html.HTMLLoader;

var html_loader : HTMLLoader = new HTMLLoader();

stage.addChild(html_loader);		// 表示リストに登録
html_loader.width = 400;		// HTMLLoaderオブジェクトの幅を設定
html_loader.height = 300;		// HTMLLoaderオブジェクトの高さを設定

// アプリケーションサンドボックスを外す
html_loader.placeLoadStringContentInApplicationSandbox = true;

var str : String = "" +
"<HTML>" +
"	<HEAD>" +
"	<script>" +
"		function func(){" +
"			window.runtime.trace(\"Hallo World !!\");" +
"		}" +
"	</script>" +
"	</HEAD>" +
"<body>" +
"	<input type=\"button\" value=\"click!!\" onClick=\"func()\"}>" +
"</body>" +
"</html>";
html_loader.loadString(str);

上に戻る

前のページに戻る