新規プロジェクトの作成による Shell App SDK for Android の組み込み (Eclipse)

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 を使ったゲームのプロジェクトを作成していきます。

ゲームプロジェクトの新規作成

まずは新規プロジェクトを作成するために、Eclipse の Package Explorer 上で右クリックし、メニューから「New」-> 「Android Application Project」をクリックします。
New Android Application ダイアログが開きますので、例として以下の内容を入力していきます。入力完了後「Next >」ボタンをクリックします。
1. Application Name : ShellAppSDKSample
2. Project Name : ShellAppSDKSample
3. Package Name : com.exsample.shellappsdksample
4. Minimum Required SDK : API 10: Android 2.3.3 (GingerBread)
  1. ※ Shell App SDK は API Level 10 からの対応です。
5. Target SDK : API 17: Android 4.2 (Jelly Bean)
  1. ※ セットアップした SDK は API 17 なので
6. Compile With : API 17: Android 4.2 (Jelly Bean)
7. Theme : None
  1. ※ 今回テーマは必要ありません
次の画面では以下の様な画面が開きますが、ここではデフォルトのままにしておきます。
次の画面ではランチャーアイコンが作成されます。これもデフォルトのままで問題ありません。アイコンを変更したい場合は後で変更可能です。
以下のような画面が表示されますが、今回は Mobage JavaScript SDK を使ったアプリを表示させるだけなので、Empty Activity を選んで「Next >」ボタンをクリックします。
Activity Name も MainActivity のままでいいので、そのまま「Finish」ボタンをクリックします。

これで、ゲームプロジェクトの新規作成が完了しました。このプロジェクトをベースにゲームを作成していきます。

タイトルバーの削除

ShellAppSDKSample/res/layout/activity_main.xml を参照すると、「ShellAppSDKSample」というタイトルのタイトルバーが表示されていますが、邪魔になるので非表示となるように設定を変更します。

ShellAppSDKSample/AndroidManifest.xml の android:theme="@style/AppTheme" を android:theme="@android:style/Theme.NoTitleBar" へ変更します。

変更前

変更後

上記で、タイトルバーが削除できます。

AndroidManifest.xml の編集

続いて ShellAppSDKSample/AndroidManifest.xml の編集を行います。設定中、色々プロジェクトのコンパイルエラーが出るかと思いますが、無視してください。

パッケージ名の編集

以下のように記載します。${YourApplicationId} を 120XXXXX のような AppId に置き換えてください。

AndroidManifest.xml を保存すると以下の様なダイアログが表示されますが、OK ボタンをクリックしてください。

Version Name の設定

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

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

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

以下のように android:versionName をセマンティックなバージョン番号に変更します。ここでは 1.0.0 にします。

パーミッションの設定

以下のパーミッションを application タグの外側に設定します。

アクティビティの設定

Shell App SDK で重要な MobageWebView を使用する Activity に必要な設定です。今回は作成した MainActivity に以下のように設定します。

launchMode を singleTask に設定します。
Activity 名を FQCN （絶対パス）で記載します。※ パッケージ名変更に伴い、相対パスだとパッケージ名変更後のクラスに MainActivity が紐付いてしまうためです。
screenOrientation を設定します。※ WebView を表示する Activity では、画面の自動回転により WebView が破棄されるのを防ぐため、screenOrientation を "portrait" や "landscape" など、自動回転に影響されない値に設定し、さらに、configChanges 属性を設定する必要があります。
IntentFilter を設定します。外部ブラウザからログインを行い、アプリに戻ってくるために必要な設定です。${クライアントID} には、120XXXXX-16 のように設定します。120XXXXX は AppId、16 は Shell App Android を指します。

Google Play services に関連する設定

以下の meta-data 要素を application タグ内に記述します。

AndroidManifest.xml 例

すべての設定が完了した AndroidManifest.xml の例は以下になります。AppId はあくまでも例になります。

プロジェクトの編集

各種ライブラリの追加

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

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

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

パッケージ名変更に伴う修正

パッケージ名を変更しましたので以下の変更が必要になります。

MainActivity.java に以下の import 文を追加してください。

上記が完了したら、一度メニューバーから「Project」-> 「Clean」を選択して正常にビルドが通ることを確認して下さい。

ソースコードの編集

MobageContext の初期化

Dev Site から client credentials (Android タブの embedded key, embedded secret) を取得します。
MainActivity.java に以下の import 文を追加します。
MainActivity.java の MainActivity クラスの変数として、以下を追加します。
MainActivity.java の onCreate() で MobageContext のコンストラクタに Activity のインスタンスを渡して初期化し、setClientCredentials メソッドの引数に client credentials (embedded key, embedded secret) を設定します。

MobageWebView の組み込み

Mobage JavaScript SDK を利用するコンテンツは MobageWebView を利用して表示する必要があります。以下のように MainActivity クラスに変数を追加してください。

MobageWebView を忘れずに import します。

ShellAppSDKSample/res/layout/activity_main.xml に設定されている TextView の代わりに、MobageWebView を設定します。以下のように TextView をコメントアウトし、MobageWebView を設定してください。

以下は、今回のチュートリアルでは行わなくて結構です

もし、android.webkit.WebView クラスを継承して利用する必要がある場合は、必ず継承元を MobageWebView にしてください。

同様に、WebViewClient, WebChromeClient を利用する場合は継承元をそれぞれ MobageWebViewClient, MobageWebChromeClient にしてください。

MobageWebView のインスタンスを生成します。以下のように onCreate 内で記述してください。

MobageWebView のインスタンスに MobageContext を設定します。

※ 通常は使用する必要はありません。

User-Agent を独自に設定する場合、Mobage JavaScript SDK のために特殊な部分文字列を追加する必要があるため、WebSettings#setUserAgentString() 等は使わず、MobageWebView#setUserAgentString() を利用してください。

Dev Site に設定している Client URI を以下のように設定して、ホームのページを読み込みます。

Intent の受信

Intent の受信外部ブラウザ経由でログインする際にブラウザからパラメータを受け取るため、Activity に送信された intent を受け取る必要があります。以下のように MainActivity.java の MainActivity クラスに記述してください。

onCreate メソッドに関しては、handleIntent(getIntent()); を一番最後に記述して下さい。

Intent を import するのを忘れないようにしてください。

MainActivity.java の内容

実行

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

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

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

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

更新履歴

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