前回は「cocos2d-html」のサンプルプログラムについて、どのように
動作しているのかをご説明しました。
今回は、「cocos2d-html」をAndroidアプリに組み込む際に、WebViewを
どのように設定すれば良いのかについて解説します。
＜cocos2d-htmlをAndroidで動作させる＞
cocos2d-htmlは、HTML + JavaScript で記述されているため、基本的にはAndroidの
標準ブラウザで動かすことが出来ます。
ただし、Androidプロジェクトを作成して、WebViewを自分で設定／配置した上で「cocos2d-html」を
動かす構成にすると、標準ブラウザで動かしていた場合に比べて次のようなメリットがあります。
・全画面表示で固定できる
・縦画面又は、横画面で固定できる
・端末に備え付けの機能（カメラ等）を使える
・データベース（sqlite）を使える
これらのメリットは非常に大きく、開発出来るアプリの幅が広がるため、「cocos2d-html」を
使用する際には専用のAndroidアプリを用意した方が良いです。
＜WebViewの設定方法＞
今回ご紹介する方法では、以下のようなWebViewを実現しています。
・Android端末の縦又は、横一杯に画面が表示されるようにしています
・拡大／縮小を無効にしています
・どの端末でも、「cocos2d-html」が動くように配慮しています
＜解説 WebViewのサイズ設定＞
端末の縦横を、コンテンツの比率を維持した上で画面一杯に表示するために、端末のサイズを取得します。
今回ご紹介した例では、HTMLコンテンツの幅×高さを「960×640」としています。
端末サイズと、HTMLコンテンツの幅×高さから、どちらを端末サイズに合わせるのか決めます。
WebViewを計算したサイズで、画面中央に配置します。
その際に、サイズに数値を直接指定すると、レイアウトが崩れてしまう等、
動作が不安定となるため、サイズ自体は画面サイズ一杯とする「FILL_PARENT」を指定します。
その代わりに、上下左右にmarginを設けることで、WebViewのサイズを
コンテンツのサイズに合わせます。
WebView自体のサイズを適切に設定した後、今度はHTMLが全画面で表示されるように設定します。
先ほどコンテンツの拡大率を計算しているので、それをWebViewに設定します。
＜解説 WebViewの拡縮無効設定＞
AndroidのWebViewには、拡縮の方法が4パターンあります。
・ピンチイン、ピンチアウトで拡縮する
・拡大、縮小ボタンを表示して拡縮する
・ダブルタップで拡縮する
・縦横回転を契機に、AndroidOS側で勝手に拡縮する
これらを全て止めるために、以下の通り設定します。
＜解説 WebViewでJavaScriptを動作させる＞
cocos2d-htmlは、JavaScriptで作られているため、JavaScriptを有効にします。
＜【重要】解説 端末依存でcocos2d-htmlが動作しない件の対処＞
Android端末によって、2DハードウェアアクセラレーションがONになっていると、
HTML5のcanvasが動作しない不具合があります。
cocos2d-htmlもHTML5のcanvas上で動作するため、端末によっては標準ブラウザで
cocos2d-htmlを動作させることが出来ません。
これを解決するために、アプリ側で、ハードウェアアクセラレーションをOFFにします。
※あくまでもアプリ内のみ有効となる手段で、端末自体の設定値を操作するわけではないです。
＜AndroidManifest.xmlの設定＞
AndroidManifest.xmlでは、以下の設定を盛り込みます。
・縦横回転を止めます（今回は横固定とします）
・Android標準で表示されるタイトルバー領域を非表示にします
＜HTMLコンテンツ側の設定変更＞
HTMLコンテンツ側で、作成したWebViewでコンテンツを綺麗に表示するために、
metaタグを以下のように修正します。
また、canvasのサイズも「960×680」に修正します。
