年末最後のエントリーですが、今回は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の処理
- Androidの戻るボタンの挙動周り
パブリッシュで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を!