テンプレートの利用による Shell App SDK for Android の組み込み (Eclipse)

Shell App SDK 1.3.4 からはテンプレートプロジェクトの Eclipse サポートは終了しました。1.3.4 以降では Android Studio をご利用ください。

Android SDK のセットアップ

まずは、ひと通りの Android SDK と Eclipse の設定から始めていきましょう。既にセットアップ済みの方も注意すべき項目は赤の太文字にしていますので、赤の太文字部分は必ずご確認ください。

eclipse/eclipse.app を実行します。（ADT + Eclipse のパッケージを使用することを前提にしています）
実行すると Eclipse が起動し、workspace の指定を求められますので、適当な workspace を作成します。
Android SDK Manager を起動します。左上の Droid アイコンをクリックしてください。（以下の赤枠です）
Android SDK Manager の Android SDK Tools と Android SDK Platform-tools が最新版がインストールされていること、Android SDK Build-tools の 20 以上がインストールされていることを確認して下さい。
Shell App SDK は Android SDK 対応バージョンが 2.3.3 以降なので、「Android 2.3.3 (API 10)」をインストールします。また本チュートリアルでは targetSdkVersion を 17 にしますので、「Android 4.2.2 (API 17)」にもチェックを入れます。Shell App SDK では、「Google Play services」が必要になりますので、こちらもインストールしておきます。
上記キャプチャの「Install packages...」ボタンをクリックしてインストールを実行します。Choose Packages to Install 画面が表示されますので、「Android SDK License」を選択して、「Accept License」を選択してください。同様に、「Intel Android Sysimage License」、「MIPS Android Sysimage License」も Accept していきます。
「Install」ボタンをクリックしてインストールを開始します。インストールにはしばらく時間がかかります。
インストールが完了したら、 Android SDK + Eclipse のセットアップは終了です。

Google Play services プロジェクトのインポート

Shell App SDK では Google Play services ライブラリのインポートが必要になりますので、この章でインポート方法を解説していきます。

導入には Android SDK Manager での「Google Play services」と「Android SDK Tools」と「Android SDK Platform-tools」が最新版がインストールされていること、「Android SDK Build-tool」の 20 以上がインストールされていることが必要になりますので、必ず前章を確認してインストールしてください。

まず、Google Play services を Workspace に取り込むために Eclipse の Package Explorer 上で右クリックし、メニューから「Import...」をクリックします。
Import ダイアログが表示されますので、「Android」-> 「Existing Android Code Into Workspace」を選択して、「Next」ボタンをクリックします。
以下の画面で {$ANDROID_SDK}/extras/google/google_play_services/lib_project/google-play-services_lib を必ず「Copy projects into workspace」にチェックを入れてインポートします。前章で adt-bundle-mac-x86_64-20140702.zip を解凍した方は、~/adt-bundle-mac-x86_64-20140702/sdk/extras/google/google_play_services/lib_project/google-play-services_lib になります。
「Finish」ボタンをクリックして google-play-services_lib プロジェクトのインポートを完了させてください。
最後に google-play-services_lib プロジェクトの minSdkVersion を変更します。前章では Android SDK は Android SDK 2.3.3 (API 10) をインストールしている状況ですので、API 9 はインストールされていません。以下の画面のように、google-play-services_lib/AndroidManifest.xml には minSdkVersion="9" と記載されていますので、こちらを 10 に変更して保存します。

以上で Google Play services ライブラリのインポートが完了しました。

Shell App SDK をインポートする

Shell App SDK のプロジェクトをインポートして、Shell App SDK を使用できるようにします。

mobage-shellapp-sdk-android-{version-string}.zip を適当なディレクトリに解凍します。
なお、{version-string}はバージョン番号を表します。
Google Play services と同様に、 Eclipse の Package Explorer 上で右クリックし、メニューから「Import...」をクリックします。
Import ダイアログが表示されますので、「Android」-> 「Existing Android Code Into Workspace」を選択して、「Next」ボタンをクリックします。
mobage-shellapp-sdk-android-{version-string}.zip を解凍したディレクトリの直下にある MobageShellAppSDKAndroid ディレクトリを指定します。「Copy projects into workspace」に必ずチェックを入れてから「Finish」ボタンをクリックします。

以上で Shell App SDK プロジェクトのインポートは完了です。

テンプレートをインポートする

Shell App SDK を利用するためのテンプレートサンプルが Shell App SDK に含まれています。このテンプレートを利用することで、簡単に Shell App SDK アプリを作成することができます。

mobage-shellapp-sdk-android-{version-string}.zip を適当なディレクトリに解凍します。
Google Play services と同様に、 Eclipse の Package Explorer 上で右クリックし、メニューから「Import...」をクリックします。
Import ダイアログが表示されますので、「Android」-> 「Existing Android Code Into Workspace」を選択して、「Next」ボタンをクリックします。
mobage-shellapp-sdk-android-{version-string}.zip を解凍したディレクトリの samples の下にある ShellAppSDKSample ディレクトリを指定します。「Copy projects into workspace」に必ずチェックを入れてから「Finish」ボタンをクリックします。

テンプレートプロジェクトをインポートしたらエラーダイアログが表示される場合はありますが、以下のステップで解消しますので一旦無視して進めてください。

以上でテンプレートプロジェクトのインポートは完了です。

テンプレートプロジェクトの編集

各種ライブラリの追加

以下の手順でライブラリを追加していきます。

ShellAppSDKSample プロジェクトの上で右クリックし、メニューから「Properties」を選択します。
Properties for ShellAppSDKSample ダイアログが立ち上がりますので、左側のペインから「Android」を選択します。
上記、右下のペインに表示されている google-play-services と MobageShellAppSDKAndroid はリンクが切れているので、Remove ボタンをクリックして削除しておきます。
右下の「Add...」ボタンをクリックしてライブラリプロジェクトを追加します。以下の画面が表示されるので「google-play-services_lib」を選択して OK ボタンをクリックします。
もう一度「Add...」ボタンをクリックしてライブラリプロジェクトを追加します。「MobageShellAppSDKAndroid」を選択して OK ボタンをクリックします。
ライブラリのプロジェクトが完了すると以下の画面の右下のボックスのように追加されたことがわかります。

以上でライブラリプロジェクトの追加が完了しました。

各種設定項目

AndroidManifest.xml の編集

まずは、パッケージ名を変更します。テンプレート内の AndroidManifest.xml では、以下のように、jp.mobage.am.g${YourApplicationId}.lite と記載されています。※ 3 行目

これを、デベロッパーサイトの｢アプリケーション｣→対象のアプリケーション ID → Android → Mobage Connect情報に記載されている Package Name に書き換えます。※ Sandbox と Production で値が異なることがあるので注意してください。

例として以下のように書き換えます。

Shell App SDK for Android では、セマンティックなバージョン番号をつけなければなりません。

セマンティックバージョニングとは、バージョン番号を 1.3.2 のようなX.Y.Z (Major.Minor.Patch) で表現する方法のことです。

それぞれの番号は 65536 未満の値にしてください。なお、セマンティックバージョニングについて詳しくはこちらを参照してください。

テンプレートを利用する場合は既に 1.0.0 に設定されてセマンティックになっていますが、バージョンを変更する際は、android:versionName の値をセマンティックなバージョン番号であることを確認してください。

次に以下のパーミッションを書き換えます。19-21 行目では、以下のように記載されています。

上記を以下のように書き換えてください。

一つ目の Intent filter を書き換えます。50-53 行目では、以下のように記載されています。

上記を以下のように書き換えてください。

二つ目の Intent filter を書き換えます。50-53 行目では、以下のように記載されています。

上記を以下のように書き換えてください。

以上で、AndroidManifest.xml の編集は完了しました。

Activity の編集

続いて、GameActivity.java 内の _EMBEDDED_KEY_, _EMVEDDED_SECRET_ という文字列の部分をデベロッパーサイトに記載されている Embedded Key/Embedded Secret に置き換えます。

60 行目に記載されている setClientCredentials メソッドの中身を書き換えてください。

以下のように書き換えます。

strings.xml の編集

res/values/strings.xml 内の 4 行目の _INITIAL_URL_ を、サーバー側サンプルコードを設置したURLに置き換えてください。

以下のように書き換えます。

以上で各種設定は完了しました。

実行

あとは Android 端末を接続して Run（実行）すると、以下の様な画面が表示され、該当の Mobage JavaScript SDK で作成されたコンテンツが表示されます。

必ず Android 端末の開発者向けオプションから USB デバッグを有効にしてください。

実機上でサンプルが実行されますので、「login/connect」ボタンをクリックしてログインなどを行ってみてください。

本サンプルは Shell App SDK を使ったテンプレートとして活用いただける形になっていますので、このテンプレートプロジェクトを改造して、Shell App SDK を用いたアプリを作成してみてください。また、バックボタン、リロードボタン、メニューボタンが実装されていますが、メニューボタンは javascript:app.menu.toggle(); をブリッジで呼び出す実装になっています。サーバーサイドのサンプルとあわせて実装方法を確認してみてください。

テンプレートには、サウンド再生 API も含まれています。詳しくは、こちらをご確認ください。

これで、一通りの実装が完了しました。

次項では Remote Notification を Shell App SDK で使用する方法を解説します。

更新履歴

2015/02/17
- セマンティックなバージョン番号が必要であることを追記
2015/02/05
- 新規作成