記事タイトルの内容のことを行ってみるも、問題が解決しなかったためメモします。以下主な流れです。

(1)CreateJS にてスマートフォンブラウザからでも遊べる html5 canvas ゲームを作成
(2)Adobe AIR を用いて iOS, Android アプリ化にする事に
(3)Adobe AIR製の Android アプリにて viewport の問題発生
(4)Java製の Android WebView アプリを作成する事で viewport の問題を解決
(5)Android WebView では CreateJS 製コンテンツが意図通り動作しない箇所が発覚

html5 canvas ゲームをアプリ化

スマートフォンのブラウザで遊べる CreateJS を用いた html5 canvas ゲームという事で、アプリ化する必要性はあまりないのですが、Apple App Store や Google Play にて公開すると多少の宣伝になるため、制作してみる事にしました。

Adobe AIR を利用すれば、簡単に iOS アプリと Android アプリ両方を作ることができます。html を表示するだけの ガワネイティブ等と呼ばれる形態のアプリとなります。しかし Android アプリにて問題が発生しました。

StageWebView を利用した Android アプリでは html metaタグ viewport 指定の解決は不可能？

まずは問題の発生した viewport 指定に関して少々記述します。

html の meta タグ viewport 指定をしておく事で、その html 内コンテンツの幅は何 px であるかを指定する事ができます。例えば、以下の記述を行う事で、この html 幅は 800px であるとブラウザに指示することができます。

<meta name="viewport" content="width=800" />

上記記述があるとスマートフォンのブラウザは、ページ幅が 800ピクセルであるものとして、ブラウザ幅ピッタリに収まるように 幅 800px ページのレンダリングを行います。

iOS の UIWebView でも同じく、viewport 指定があれば、UIWebView の幅ぴったりに html を表示してくれます。Android WebView は viewport 指定を無視してしまいますが、設定を行うことで解決できます。

Adobe AIR StageWebView

Adobe AIR の StageWebView は、iOS アプリでは UIWebView, Android アプリでは WebView として起動されるという、クロスプラットフォーム仕様となっています。しかし UIWebView、あるいは WebView からアクセスするプラットフォーム独自の機能を利用する事はできません。

よって、Android WebView に対し viewport の指定を無視しないような設定を行いたいのですが、StageWebView にはその機能が用意されておらず、Adobe AIR 製の Android WebView アプリでは意図した表示を行うことができない状況です。

プラットフォーム独自の機能にアクセスするためには ANE(Adobe Native Extention) を用いますが、Android WebView 用の ANE は見つかりませんでした。ANE を個人的に作れればよいのですが、ANE に対する知識がほとんどなく、そもそも WebView 用の ANE を作れるものなのかどうかも不明です。

Java 製 Android WebViewアプリを作るも別途問題が見つかる

Android アプリに関しては Adobe AIR からではなく Java を用いて制作してみる事にしました。しかし viewport の問題は解決しましたが、次の CreateJS に関する新たな問題が見つかりました。

・正常に音が鳴らない
・画面タップ処理がおかしい

はじめての Java製 Android アプリという事で、私が何か間違っている可能性は高いですが、メモしておきます。

正常に音が鳴らない

Web Audio API が有効になっていないような動作となりました。ある程度の音は鳴ります。CreateJS 製のコンテンツという事で SoundJS を用いての音再生となりますが、どうやら audio タグによる音再生が行われているようです。

考えられる原因としましては以下となります。

・Android WebView では Web Audio API は使えない
・SoundJS で何か判定が誤っている
・WebView や CreateJS に対して何か設定が足りない

もちろん Android Chrome では正常に音は再生されます。

クリック判定がおかしい

一回画面をタップしただけなのに、常にダブルクリックしているような状態となってしまいます。Android WebView 以外の環境では正常に動作します。WebView に対して何か指定が誤っているのか等、詳しく調べていないのでちょっと原因がわかりません。マウスダウンイベントとタッチイベント２つが実行されてしまっているのかな、という感じはあります。

CreateJS 製コンテンツの Android WebView アプリは ひとまず見送り

問題の原因がどこにあるかがわからず、調査する時間もないため、ひとまず制作は見送りに。時間のある時に調査していこうと思います。今回の問題は、今後の CreateJS や Android のバージョンアップによって解決される可能性もあります。

[ FLASH ] [ tips ] 投稿者 siratama : 2013年10月27日 11:03