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

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

StageWebViewとは

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

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

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

早速制作してみる

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

Flash CS6のステージ部分

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

image_20121231_172732_6

真ん中の灰色のエリアに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();
				}
			}
		}
		
	}

}

パブリッシュしてみる

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

image_20121231_174032_7

TIPS

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

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

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

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

AndroidとiOSで表示してみる

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

EMOBILE GS03 (Android4.0)

air_stagewebview_android

iPod Touch 第4世代 (iOS5.1)

air_stagewebview_iphone

いいかんじ!

おわりに

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

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

AIRダウンロード:air_stagewebview.zip

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