読者です 読者をやめる 読者になる 読者になる

アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

ブログをアプリ化してみよう(その5 Androidのプッシュ通知に対応する)

前回まででアプリらしくなってきましたので、続けてアプリならではの機能と言えるプッシュ通知に対応してみたいと思います。前回はiOS向けに実装してみましたので、今回はAndroid向けにプッシュ通知を実装します。プッシュ通知を実装するのは意外と大変ですが、今回はアピアリーズというmBaaSを使って実装してみたいと思います。

アピアリーズでアプリを登録

まずアピアリーズにユーザ登録して、アプリを作成します。

f:id:moongift:20150819170356p:plain

ユーザ登録したら、アプリを新規作成します。

f:id:moongift:20150819170407p:plain

今回は体験版プラン(無料)で進めています。

f:id:moongift:20150819170416p:plain

アプリIDは任意のものを指定します。

f:id:moongift:20150819170426p:plain

登録しました。

f:id:moongift:20150819170435p:plain

こちらがアプリの詳細になります。ここで、

  • アプリID
  • アプリトークン
  • データストアID

はこの後、使いますのでメモしておきます。

f:id:moongift:20150819170445p:plain

js/app.jsの修正

では次にJavaScriptファイルを編集します。onDeviceReadyの中で次のように処理を実行します。{アプリトークン}、{データストアID}、{アプリID}をそれぞれ読み替えてください。

  var access_token = "{アプリトークン}";
  var url = "https://api-datastore.appiaries.com/v1/push/gcm/{データストアID}/{アプリID}/_target?proc=put";
  applican.device.getPushToken(
    function (res) {
      // レジストレーションID取得成功
      var token = res.pushToken;
      var options = {
        post: {
          regid: token
        },
        timeout  : 10000,
        headers: {
          "Content-Type": "application/json",
          "X-APPIARIES-TOKEN": access_token
        }
      };
      applican.http.post(url, options, 
                         function (res){
                           alert(res);
                           // レジストレーションIDの登録完了
                           alert("レジストレーションIDの登録が完了しました");
                         }, 
                         function () {
                           // レジストレーションID登録失敗
                           alert("レジストレーションIDの登録が失敗しました")
                         });
    }, 
    function () {
      // レジストレーションID取得失敗
    }
  );

まず、プッシュ通知を送信するためのレジストレーションIDを取得します。これはアプリカンの提供する applican.device.getPushToken を実行します。

applican.device.getPushToken(Function getPushTokenSuccess, Function getPushTokenError)

Androidの場合、インストール時に許諾が行われ、起動するとgetPushTokenSuccessがコールバックされます。

f:id:moongift:20150820154814p:plain

そしてプッシュ通知が許可された時の処理では、次のようにレジストレーションIDをアピアリーズのサーバにPOSTしています。

var token = res.pushToken;
var options = {
  post: {
    regid: token
  },
  timeout  : 10000,
  headers: {
    "Content-Type": "application/json",
    "X-APPIARIES-TOKEN": access_token
  }
};
applican.http.post(url, options, 
  function (res){
    // レジストレーションIDの登録完了
    alert("レジストレーションIDの登録が完了しました");
  }, 
  function () {
    // レジストレーションID登録失敗
    alert("レジストレーションIDの登録が失敗しました")
  }
);

データをPOSTする処理はapplican.http.postを使っています。HTTPヘッダーにアピアリーズのX-APPIARIES-TOKENを追加しています。データの内容についてはレジストレーションIDを登録する | アピアリーズドキュメントを参考にしてください。

Androidビルド設定を行う

プッシュ通知はアプリカンシミュレータではなく、アプリとしてビルドを行う必要があります。そのため、Google Developers Consoleにてプッシュ通知のAPIキー作成をしておく必要があります。この辺りの手順については省略します。

f:id:moongift:20150820154828p:plain

作成したAPIキーをアピアリーズのGoogle Cloud Messaging (GCM) 設定にて登録します。カスタムキーは1つは必須になりますので適当な文字を設定してください。

f:id:moongift:20150820154843p:plain

続いてアプリカン側でもプッシュ通知の設定を行います。ビルド設定にて、Androidアプリ設定を行います。パッケージ名を設定した後、パーミッション設定にてGCMとPUSHを有効にしてください。

f:id:moongift:20150820154907p:plain

さらに追加オプション設定にてPUSH通知機能にてGCM Sender IDを指定します。これはGoogle Developers Consoleにて作成したプロジェクトのProject Numberになります。

f:id:moongift:20150820154921p:plain

後はAndroidキーストア設定にて必要な情報を入力して保存してください。

f:id:moongift:20150820154940p:plain

準備が終わったらビルドメニューにてAndroidビルドが有効になっているはずなので、ビルドを行います。ビルドが行われると、ダウンロードできるようになっているはずです。

f:id:moongift:20150820155008p:plain

このアプリをAndroidにインストールして起動すると、デバイストークンがアピアリーズ上に保存されます。

プッシュ通知を登録する

無事にレジストレーションIDの登録が完了すると、アピアリーズの管理画面でプッシュ通知配信対象が選べるようになります。

f:id:moongift:20150820155025p:plain

そしてメッセージを入力し、配信時間を指定します。即時配信はAPIからのみ可能で、Webブラウザからは30分単位での指定ができます。

f:id:moongift:20150820155039p:plain

確認画面が出て、プッシュ通知が登録できます。

f:id:moongift:20150820155053p:plain

そして時間になるとデバイスにプッシュ通知が届きます。

f:id:moongift:20150820160226p:plain


アプリカンとアピアリーズを組み合わせることでサーバを用意することなくプッシュ通知が飛ばせるようになります。ぜひ試してください!