Adobe AIRのStageWebViewをiOSとAndroidで試してみる。

Posted on 2012-12-31

年末最後のエントリーですが、今回はAIRのStageWebViewをiOSとAndroidで試してみようと思います。

StageWebViewとは

まず、StageWebViewとはなんぞや、という話ですが、モバイルアプリケーション内でブラウジング機能を利用するためのクラスです。早い話がネイティブアプリ内でブラウザが貼り付けられる機能です。これを使うメリットとしては表示の更新頻度の高い場所をHTMLに任せることで、アプリの作りを変えずに表示を変更できたりします。

StageWebViewの詳しい使い方としては以下のリンクが詳しいです。

Adobe AIR 2.6 マスターシリーズ第4回　モバイルAPI　その2 | デベロッパーセンター

早速制作してみる

今回はFlash CS6を使って作成してみます。

Flash CS6のステージ部分

Flash CS6で以下のような表示を作ります。

真ん中の灰色のエリアにStageWebViewを配置して、下部のURLというテキストエリアにURLが変更された場合にURLを反映させます。また、HOMEボタンを押すとGoogleに戻るようにする作りです。

ASのコード

コードとしては以下のとおりです。

ざっくり説明すると、

StageWebViewの配置
「HOME」ホームボタンのクリックの挙動
webviewのURL変更を捉えてテキストフォールドに反映
戻るボタンの処理

といった処理を行なっています。

package  
{
	import flash.desktop.NativeApplication;
	import flash.display.MovieClip;
	import flash.events.KeyboardEvent;
	import flash.events.LocationChangeEvent;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import flash.media.StageWebView;
	import flash.text.TextField;
	import flash.ui.Keyboard;
	/**
	 * ...
	 * @author seigo
	 */
	public class Main extends MovieClip
	{
		
		private var webview:StageWebView;
		
		public var txtURL:TextField;
		
		public var BtnHome:MovieClip;
		
		// ホームURL
		public var HOME_URL:String = "http://www.google.com";
		
		public function Main() 
		{
			webview = new StageWebView();
			webview.stage = stage;
			// webviewの表示位置をRectangleで指定
			webview.viewPort = new Rectangle( 5 , 45, stage.stageWidth - 10 , stage.stageHeight - 150 );
			// 初回起動時にホームを表示
			webview.loadURL( HOME_URL );
			// 戻るボタン対策
			stage.addEventListener( KeyboardEvent.KEY_DOWN, handlerBackKey );
			// 「HOME」 ホームボタンのクリック
			BtnHome.addEventListener( MouseEvent.CLICK , handlerHomeBtnClick );
			// webview URL変更を捉える
			webview.addEventListener( LocationChangeEvent.LOCATION_CHANGING, handlerLocationChanging ); 
		}
		
		private function handlerLocationChanging(e:LocationChangeEvent):void 
		{
			// webview URL変更を捉える
			// 下部テキストフィールドに反映
			txtURL.text = e.location;
		}
		
		private function handlerHomeBtnClick(e:MouseEvent):void 
		{
			// 「HOME」 ホームボタンのクリックしたらホームに戻る
			webview.loadURL( HOME_URL );
		}
		
		private function handlerBackKey(e:KeyboardEvent):void {
			if (e.keyCode == Keyboard.BACK){
				if (webview.isHistoryBackEnabled) {
					// 戻る履歴があるときは履歴を戻る
					webview.historyBack();
					// preventDefault
					e.preventDefault();
				} else {
					// 戻る履歴がないときはクローズ
					NativeApplication.nativeApplication.exit();
					// preventDefault
					e.preventDefault();
				}
			}
		}
		
	}

}

パブリッシュしてみる

パブリッシュすると以下のように表示されます。ある程度、デスクトップでのプレビューでも操作は確認できます。

TIPS

今回の制作をするにあたって以下のページが参考になりました。ありがとうございます。

StageWebViewの処理
- stageWebViewについて | android application
Androidの戻るボタンの挙動周り
- airforandroidにおける起動/終了時、sleep状態からIn,Outするときのイベント | android application

パブリッシュでAndroid/iOSに自動インストール

パブリッシュで問題ないことが確認できたら、Android/iOSに自動インストールしてプレビューしました。

以前よりAndroidはパブリッシュ後にUSBから自動インストールすることが出来ましたが、iOSも AIR 3.3 からは「iPhone構成ユーティリティ」といったツールに頼らず、インストールできました。

AndroidとiOSで表示してみる

上記でインストールされたものを表示すると以下のようになります。

EMOBILE GS03 (Android4.0)

iPod Touch 第4世代 (iOS5.1)

いいかんじ！

おわりに

いかがでしたでしょうか。AIRも随分進化していますね。Android/iOSに自動インストールもしてくれるので、とても開発がしやすかったです。

今回の制作ファイルも置いておきます。

AIRダウンロード：air_stagewebview.zip

それでは、よきAdobe AIR Lifeを！