Mobile Backend Starter入門

【RainbowAppsセミナー】Mobile Backend Starter入門


はじめに

このページではRainbowappsによるMobile Backend Starterを使ったGAE(Google App Engine)をAndroid、iOSアプリのバックエンドとして利用する方法を紹介します。

Mobile Backend Starterを利用する事によりサーバサイトの開発をする事なく、下記の機能をアプリに実装する事ができます。

・Googleアカウントによる認証機能
・push通知機能
・メッセンジャー機能

本ページは既に下記の環境が構築されている事を前提に話をすすめていきます。

・Googleアカウント登録(GmailもしくはGoogle Appsアカウント)
<Androidアプリ作成に必要な環境>
・eclipse+ADTインストール
<iOSアプリ作成に必要な環境>
・Xcodeのインストール
・iOS Developer Programの登録

環境構築がお済みでない場合はこちらのページを参考に環境構築をお願いします。

Google Cloud Platformプロジェクトの作成

Google Cloud Platformアプリケーションの作成

まずはじめに、Google App Engineのアプリケーションを新規で作成します。
Google Cloud Platformのトップページにアクセスし「今すぐ試す」をクリックしてください。



下記のように新規Google Cloud Platformのアプリケーションを新規作成する画面がポップアップで表示されます。
※Project name、Project IDは任意に入力して作成してください。
※Project IDは全ユーザで一意になる必要があります。
※Project IDは半角英数(小文字のみ)で入力してください。
※チェックボックスは両方ともチェックしてください。

<初回利用時の方>
ユーザーの皆様を不正使用を防止する観点で電話もしくは携帯メールアドレスによる確認をする必要があります。(初回のみ)


テキストメッセージ(携帯メール)または音声通話を選んで確認コードを送信してください。


確認コードを送信したら再度アプリケーションの作成画面が表示されますので「Get started」をクリックして作成してください。


作成が完了したら下記のような画面になります。

Mobile Backend Starterのセットアップ

Mobile Backend Starterのセットアップ

次に、作成したGoogle Cloud Platformアプリケーションに対してMobile Backend Starter設定を致します。
下記のとおり「Mobile Backend Starter」のテキストリンクをクリックしてください。

URLはこちらです。
https://cloud.google.com/console/project/apps~【アプリケーションID】/mobilesample

下記の通りセットアップ画面が表示されますので「Deploy」ボタンをクリックします。


しらばくすると、デプロイが完了します。



完了したら「Setting」のリンクをクリックします。


Mobile Backend settingsの画面が開きます。
この画面の各設定欄に必要な情報を入力して設定すると、push通知やメッセンジャー機能、Google認証機能の諸設定を行う事ができます。
※これからサンプルアプリを作成する上で各項目を設定していきますので、ブラウザのお気に入り登録するなどしてすぐアクセスできるようにしてください。


これでMobile Backend Starterのセットアップは完了です。
簡単にセットアップできたのがお分かり頂けると思います。

次の項から各プラットフォーム別(iOS、Android)のサンプルアプリの作成方法を紹介します。

Mobile Backend Starterを使ったAndroidアプリの作成

Mobile Backend Starterを利用したAndroidアプリサンプルを構築していきます。

環境構築

これから作成するサンプルアプリを動かすために必要な環境構築をしていきます。

必要なeclipseプラグインのインストール

開発に必要な下記のeclipseプラグインをインストールしていきます。
  • Google Plugin for Eclipse
  • Google App Engine Java SDK
  • Developer Tools
  • GWT Designer for the Google Plugin for Eclipse
  • Google Web Toolkit SDK
下記ページを参照頂き、必要なeclipseプラグインをインストールしてください。

Android SDK ManagerによるSDKの更新

さらに、Android SDK Managerを開き、下記SDKがインストールされているか確認してください。
インストールされていない場合はインストールしてください。

  • ・Android Toolsパッケージ
  • ・Android SDK 4.0.3以上のパッケージ(※ここでは最新のAndroid SDK 4.4をインストールします。)
  • ・ExtrasのGoogle play service

eclipseを起動して下記のアイコンをクリックし、Android SDK managerを開きます。


下図のようにAndroid SDK Toolsの最新バージョン(Android 4.4(API 19))の一式をインストールしてください。


「Google Play services」もインストールする必要があります。



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

サンプルアプリはGoole Play servicesのライブラリを利用しますのでライブラリプロジェクトとしてeclipseワークスペースにインポートする必要があります。
eclipse(ADT)の「File」→「Import」をクリックしてください。


「Android」→「Existing Projects into Workspace」を選択して「Next」をクリックしてください。


「Brawse」ボタンをクリックし、下記場所をしていしてください。

 <Android SDKのパス>/extras/google/google_play_services/libproject/google-play-service_lib




「Copy projects into workspace」にチェックをいれて「Finish」ボタンをクリックしてください。


このようにPackage Explorerに「google-play-services_lib」が表示されればOKです。



Google Cloud Messagingサーバ側設定

Google Cloud Consoleで設定をします。下記URLをブラウザで開いてください。

最初に作成したGoogle Cloud Platformのアプリケーションがありますのでそのリンクをクリックします。


次の画面で「API & auth」をクリックすると、利用可能なAPI一覧が表示されますので、「Google Cloud Messageng for Android」をのSTATUSをOFFからONに変更します。


同意を確認する画面が表示される場合は、下記のとおりチェックボックをチェックし「Accept」ボタンをクリックします。



次に左メニューで「Registered apps」を選択し、「REGISTER APP」ボタンをクリックします。


Nameの欄を任意に入力して、Platformはそのまま「Web Application」にして「Register」ボタンをクリックします。


Google Cloud Messagingを利用するために必要なAPI keyが発行されました。
「Server Key」をクリックし、「API KEY」に記載している文字列をコピーします。


コピーしたら「Mobile Backend Starter」の設定ページに戻り、コピーしたAPI KEYを「Google Cloud Messaging and iOS Push Notification」のテキストボックスにペーストして「Save」ボタンをクリックしてください。


これでGoogle Cloud Messagingのサーバ側の設定ができました。

Google認証サーバ側設定

次にGoogle認証を可能にするサーバ側の設定をします。
「OAuth 2.0 Cliant ID」をクリックし、コピーしたProject IDを使って
WEB ORIGIN、REDIRECT URIの箇所を次のように入力して「Generate」ボタンをクリックしてください。

 ■WEB ORIGIN
http://www.[プロジェクトID].appspot.com

REDIRECT URI
http://www.[プロジェクトID].appspot.com/oauth2callback
[プロジェクトID]の箇所は先程コピーしたProject IDをペーストしてください。


登録して生成されたClient IDをMobile BackendStarter設定画面に設定します。
下図のように「OAth 2.0 クライアントID」の「クライアントID」の情報をコピーし、
Mobile BackendStarter設定画面のAuthentication / Authorization」項目を「Secured by IDs(Recommended)」に切り替え、「Web Client ID」の入力欄にペーストしてください。



次にサンプルAndroidアプリがGoogle Cloud Platform利用できるようにするための登録を行います。
再度「API & auth」→「Registered App」を選択して「REGISTER APP」のボタンをクリックします。


次にNameを任意に入力し、Platformを「Android」にして「Accessing APIs directly from Android」を選択します。


次に、ターミナルまたはコマンドプロンプトを起動し、下記コマンドを実行してフィンガープリントを確認します。

<Macの場合>
 keytool -list -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android -v

<Windowsの場合>
コマンドプロンプトでCDコマンドで下記に移動してください
Windows XP : C:\Documents and Settings\<user>\.android\
Windows 7 : C:\Users\<user>\.android\

 keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA -validity 10000 -dname "CN=Android Debug,O=Android,C=US"

下の図のようにSHA1形式のフィンガープリントが表示されますのでコピーしてください。


コピーしたフィンガープリントをGoogle Cloud Consoleの先程の画面に貼付けてください。
また、package nameは今回は「com.google.cloud.backend」※と入力してください。
※ご自身のアプリにてMobile Backend Starterを組み込む場合は、組み込むAndroidアプリのpackage nameにする必要があります。


「Register」ボタンをクリックします。
今の登録で作成されたCLIANT IDをMobile Backend Starter設定画面に入力します。
下図のように「OAuth 2.0」クライアントIDをコピーして、Mobile Backend Starter設定画面の「Authentication / Authorization」項目を「Secured by IDs(Recommended)」に切り替え、「Android Client ID」の入力欄にペーストしてください。






サンプルAndroidアプリをダウンロード


Mobile Backend Starterの設定画面にもどり「Android cliant」ボタンをクリックしてサンプルアプリをダウンロードしてください。


ダウンロードが完了したら解凍して、下記手順でeclipseにインポートしてください。
eclipseを起動して「File」→「Import」をクリックしてください。


「Android」→「Existing Android Code into Workspace」を選択し「Next」をクリックします。



「browse」ボタンをクリックしてダウンロードしたフォルダ「solutions-mobile-backend-starter-android-client-master」を選択します。



「Copy projects into workspace」をクリックして「Finish」ボタンをクリックしてください。



インポート直後はプロジェクトにエラー表示されていると思います。プロジェクトを右クリックして「Propaties」をクリックしてください。


「Android」を選択してProject Build Targetを「Google APIs API Level 19」を選択してください。


※上記操作でもエラーが消えない場合には一度eclipseを再起動してください。

次に、CloudBackendAndroidCliantプロジェクトの「src」フォルダの「com.google.cloud.backend.core」の中の「Consts.java」を開いてください。


下記のように今までGoogle Cloud Consoleで登録したResisterd appの情報をConst.javaに入力してください。

 public static final String PROJECT_ID  Google Cloud Platformアプリケーション ID
 public static final String PROJECT_NUMBER  Google Cloud Platformアプリケーション 番号
 public static final String WEB_CLIENT_ID  Google Cloud Platformにて「Registerd app」で登録した
Web serverのOAth 2.0 Client IDの「CLIENT ID」。








動作確認してみよう

これで準備は完了です。Android実機端末をPCに接続して、
Androidアプリのプロジェクトフォルダを右クリックして「Run as」→「Android Application」をクリックして実行してみてください。


初回起動時にはINTRODACTION画面が表示されますので、フリックしていってください。



Googleアカウント認証機能の確認


初回起動時には下記のようにGoogleアカウント認証の画面が表示されます。
このようにMobile Backend Starterを利用する事により簡単にGoogleアカウント認証機能が実装できます。


※もしこのタイミングでエラーでアプリがクラッシュしてしまった場合は
サンプルプロジェクト内にあるAndroidManifest.xmlファイルの「com.google.android.gms.version」のvalue値を"4030500"に変更して再実行してみてください。

 <meta-data android:name="com.google.android.gms.version" android:value="4030500" />





メッセージ送信機能確認


下記のようにメッセージをおくって、画面上に更新されれば完成です。


もう一台、Android端末をお持ちの方はもう一台にもアプリをインストールしてメッセージを送ってみてください。
画面のリロードせず、メッセージが更新されているのか確認できると思います。


このアプリはpush通知でメッセージ内容を同期していますので、メッセージを送るとする他のAndroid端末もメッセージが更新されるようになります。

push通知でメッセージを送ってみる

また、メッセンジャー機能の他に管理画面からpush通知でアプリをインストールしている端末に対してメッセージを送る事ができます。

Mobile Backend Starterの設定画面を表示させ、「Broadcast Message」の箇所の「Send」ボタンをクリックしてください。


アプリをインストールしている端末にpush通知されます。


Androidアプリの解説は以上です。次にiPhoneアプリのサンプルを動かしていきます。

Mobile Backend Starterを使ったiPhoneアプリの作成

次にiPhoneアプリをMobile Backend Starterを使ってGoogle認証、push通知、メッセンジャー機能を実装してみます。

push通知用の証明書・App ID・プロビジョニングファイルの作成

証明書の作成

まずお使いのMacにてpush通知用の証明書を作成します。
MacのSpotlightで「キーチェーン」を入力し「キーチェーンアクセス」を起動させます。



「キーチェーンアクセス」のメニューをクリックし「証明書アシスタント」→「認証局に証明書を要求」を選択します。


証明書アシスタントの画面が表示しますのでメールアドレスはiOS Developer登録してあるメールアドレスを入力し、要求の処理を「ディスクに保存」に選択をして「続ける」ボタンをクリックします。


保存する場所を選ぶ画面が表示しますので任意の場所を指定して証明書を作成してください。



iOSでpush通知を可能にするためのProvisioningをしていきますのでiOS Dev Centerへ遷移します。 https://developer.apple.com/devcenter/ios/index.action

AppIDの作成

まずpush通知のCertificate付きのApp IDを作成します。

画面右側にある「Certificates, Identifiers & Profiles」をクリックし、次の画面にて「Identifiers」をクリックします。


画面右上にある「+」ボタンをクリックします。


下記のようにApplication IDには任意の名前を入力し、App ID Suffixには「Explict App ID」のラジオボタンをクリックして、Bundle Identifierにはユニークな値を入力してください。


同じ画面の下部に「App Services」では、Push Notificationsのチェックボックスをチェックして「Continue」ボタンをクリックしてください。


次の画面ではそのまま「Submit」ボタンをクリックしてください。


次の画面もそのまま「Done」ボタンをクリックしてください。
作成完了するとApp ID一覧画面が表示されますので、作成したApp IDをクリックして「Edit」ボタンをクリックします。


次の画面のPush Notificationの箇所の「Development SSL Certificate」の欄にある「Create Certificate」をクリックします。


次の画面はそのまま「Continue」ボタンをクリックします。


次の画面にて先程作成した証明書をアップロードできますのでアップロードします。




しばらくすると「Your certivicate is ready」の画面が表示されますので、「Download」ボタンをクリックしてダウンロードし、ダウンロードしたファイルをダブルクリックしてキーチェーンアクセスに登録してください。



プロビジョニングプロファイルの作成










証明書をMobile Backend Stertarにアップロード

今ダウンロードしたCertificateファイルをGoogle Cloud Platformに設定してpush通知できるようにします。
キーチェーンアクセスを開き、先程作成した証明書を開いて、下記のように証明書と秘密鍵を選択してください。
選択した状態で右クリックして「2個を書き出す」を選択してください。



名前は任意に入力し、フォーマットを「個人情報交換(.p12)」を選択して書き出しします。


次にパスワードを設定する画面が表示されますので任意のパスワードを入力してください。
※後でこのパスワードを入力しますのでパスワードは忘れずにメモするようにしましょう。


再度、パスワードを聞いてきますので、先程入力したパスワードを入力してください。


今作成したp12ファイルをMobile Backend Starter側に設定します。
下記のようにGoogle Cloud Consoleにアクセスしpush通知を提供させたいアプリケーションのリンクをクリックします。


次の画面で画面下部に「Mobile Backend Starter」をクリックし、次の画面で「Setting」リンクをクリックします。


次の箇所に「Choose File」をクリックして先程書き出ししたp12ファイルを選択してアップロードしてください。
※アップロード時にパスワードを入力する画面が表示されますので入力してください。
※アップロードが完了しても画面上には何も変化はありません。




iOS用のクライアントIDの作成

Google Cloud Consoleにアクセスしてpush通知させたいアプリケーションをクリックしてください。

「APIs」→「Register Apps」を選択して「REGISTER APP」ボタンをクリックします。



次の画面でNameは任意の名前を、Platformは「iOS」を選択して「Accessing APIs directly from iOS」を選択します。
Bundle IDには先程iOS Dev Centerで作成したApp IDを入力して「Register」ボタンをクリックしてください。


次の画面で表示されているCLIENT IDをコピーして、Mobile Backend Starter設定画面の「iOS Client ID」のテキストボックスに貼付て「Save」ボタンをクリックしてください。



Billing設定

iOSのプッシュ通知をする場合には、利用量に応じて料金が発生します。
アウトバウンド帯域において一日1GB以上利用した場合に$0.12/GBかかります。
その支払いをするためのBilling設定をする必要があります。

ますApp Engine Consoleの設定画面にいき、push通知を利用するアプリケーションを選択します。


「Billing Status」をクリックします。


「Enable Billing」をクリックします。


下記の画面が表示されたら、「Save」をクリックします。


次の画面も特に変更せず次へを入力してください。
※すこし利用するだけでしたらGoogle App Engineは料金はかかりませんのでご安心ください。


プロフィール入力画面になりますので担当者の名前や住所を記載して「続行」ボタンをクリックしてください。


支払い方法の画面になりますので、クレジットカード情報を入力してください。
「送信してアカウントを開始する」ボタンをクリックしてください。


下記の状態になればアカウント請求は完了です。


サンプルアプリを動かしてみよう

それではBackend Starterのアプリを動かせる準備は整いました。
下記リンクよりサンプルアプリをダウンロードしてください。

ダウンロードしたzipファイルをダブルクリックして解凍してください。


解凍したフォルダ(solutions-mobile-backend-starter-ios-client-master)内にある
CloudBackendIOSClient.xcodeproj」をクリックして実行してください。


CloudBackendIOSClient」→「sample」→「support」にある「CloudBackendIOSClient-Info.plist」ファイルを開き
「Bundle Identifier」のValueをiOS dev Centerで登録したApp IDに変更してください。


次にCloudBackendIOSClient」→「sample」の中にある「Constants.m」ファイルを開き、下記の内容を変更します。

 kCloudBackendClientID  Google Cloud Console の「Registered apps」で登録したiOS用の「CLIENT ID」
 kCloudBackendClientSecret  Google Cloud Console の「Registered apps」で登録したiOS用の「CLIENT SECRET」
 kCloudBackendServiceURL  作成したGoogle Cloud PlatformのアプリケーションIDを下記のルールで入力

 https://[アプリケーションID].appspot.com/_ah/api/rpc?prettyPrint=false







次に、プロビジョニングプロファイルの設定をします。
下記のとおりナビゲーションエリアからプロジェクトを選択し、「Build Setting」を選択して
Code Signingの箇所を、先程作成した(push通知に対応した)プロビジョニングファイルを選択します。


これで準備完了です。
Macに実機(iOS実機端末)をUSBにて接続して、Xcodeより「Run」ボタンをクリックして動作確認してみてください。


GAEと連携したiOSアプリを作れるようになりたい方は

上記のコードをカスタマイズすればご自身のオリジナルアプリにも組み込む事ができます。
GAEと連携するためのアプリ開発講座は来年早々に開講予定ですのでお楽しみください。
 



解説は以上です。
最後までお読み頂きありがとうございました。


ご不明な点やお問い合わせはこちらまでご連絡頂ますようお願い致します。
RainbowApps横浜校
Comments