前回の記事で、「cocos2d-html」を、Androidブラウザで表示する方法について解説し、
その際、Androidプロジェクトを作成して、WebViewを独自に設定/配置した上で
「cocos2d-html」を動かす構成にすると、標準ブラウザで動かしていた場合に比べて
次のようなメリットがあることをご説明しました。
・全画面表示で固定できる
・縦画面又は、横画面で固定できる
・端末に備え付けの機能(カメラ等)を使える
・データベース(sqlite)を使える
今回は、これらメリットとなる機能のうち、以下の機能を実装する方法について解説します。
・端末に備え付けの機能(カメラ等)を使用する
・データベース(sqlite)を使用する
<cocos2d-html(JavaScript)では出来ないことを実現したい>
端末に備え付けの機能や、データベースを使いたいなど、
「cocos2d-html(JavaScript)」で実現出来ないことは、「Android(Java)」で実現します。
JavaScriptとAndroid(Java)の連携方法については、いくつか方法がありますが、
今回ご紹介するのは次の方法です。
・JavaScriptからAndroid(Java)への要求
⇒JavaScriptの「alert」コマンドを使う
・Android(Java)からJavaScriptへの要求
⇒Android(Java)の「loadUrl」メソッドを使う
特に、JavaScriptの「alert」コマンドを使う方法については、
これ以外にも連携の方法はありますが、この方法が一押しです。
まだ本ホームページでは触れていませんが、折角クロスプラットフォームで動く
「cocos2d-html」を使っていますので、AndroidだけではなくiOSでも動かしたい! です。
この時、Android(Java)と、iOS(Objective-C)のプログラムが別々になることは仕方ありませんが、
「cocos2d-html」の方は、全く同じプログラムで動くと効率的です。
このため、JavaScriptからAndroid(Java)への要求には、iOSの方でもそのまま利用できる
「alert」コマンドを使うのがオススメです。
※「JavaScriptInterface」という方法を用いて連携することも出来ますが、
こちらにはセキュリティ面で脆弱性があるため、お勧めしません
<cocos2d-html(JavaScript)から、Android(Java)に連携しよう!>
■cocos2d-html(JavaScript)側の実装
cocos2d-html(JavaScript)から、Android(Java)に連携するのは、
単純に「alert」コマンドを発行するだけで良いです。
ここで、JavaScript の「alert」コマンドについて、簡単にご説明します。
・通常のブラウザでは、エラーのダイアログを表示するために使用します
・引数は文字列1つだけです
・ボタンをクリックするまでは、後続の処理が実行されません
引数が文字列1つしか渡せないため、渡す文字列は少し工夫が必要です。
たとえば、Android(Java)でやって欲しいことがたくさんある時に、
渡す文字列が一定のルールに従って作られていると、プログラムを作る際に楽になります。
あくまでも一例ですが、文字列をCSV形式として、次のようなルールで作るとわかりやすいかもしれません。
この例の場合は、実際に以下のように「alert」コマンドを発行します。
■<補足>「関数名」について
「alert」コマンドを使用することで、cocos2d-html(JavaScript)から、
Android(Java)に連携することは出来ます。
しかし、連携しっ放しであることはあまり無く、大抵はその結果を返す必要があります。
そのため、何という関数に返して欲しいのかを、予め例のように渡しておくと便利です。
■Android(Java)側の実装
Android(Java)側では、次のような実装を行います。
・JavaScript の「alert」コマンドを検知します
・渡されてきた文字列を解析して、端末固有機能等を実行します
「alert」コマンドを検知するために、以下のようなクラスを作ります。
このクラスでは、WebViewで実行された「alert」コマンドを受け取った後、
JavaScript側から渡された文字列を解析して、後続の処理を行うように作っています。
上記クラスを、WebViewに以下のように設定することで、
cocos2d-html(JavaScript)から、Android(Java)に連携できるようになります。
<Android(Java)から、cocos2d-html(JavaScript)に連携しよう!>
■Android(Java)側の実装
Android(Java)側では、次のような実装を行います。
上記のように、WebViewのインスタンスに対して「javascript:<関数名>(<引数>)」を
実行することで、JavaScriptの関数を実行することが出来ます。
また、今回の記事では詳しく触れませんが、Android(Java)から返却するデータを
構造的な形にしたい場合には、<引数>の所をJSONの形にすると、JavaScriptで解釈することが
容易になるため便利です。
■【重要】cocos2d-html(JavaScript)側の実装
Android(Java)からJavaScriptの関数を直接呼び出したため、
JavaScript側では特別な処理は必要無いです。
ただ、cocos2d-html を使用している場合には、Android(Java)の処理を呼び出す場所、
Android(Java)からの戻り値を元に処理をする場所は cocos2d-html となり、
この時、cocos2d-html 側の受け口は「レイヤー」となることが多くなります。
このため、以下のような形で「ただの関数」から「レイヤーのインスタンスのメンバ関数」に連携します。
<次回以降の更新について>
次回は、「cocos2d-x」の環境構築方法について、ご紹介します。