cocos2d-htmlとAndroid(Java)の連携

 

前回の記事で、「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」の環境構築方法について、ご紹介します。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*