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

アプリカンブログ

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

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

前回まででアプリらしくなってきましたので、続けてアプリならではの機能と言えるプッシュ通知に対応してみたいと思います。プッシュ通知を実装するのは意外と大変ですが、今回はアピアリーズという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/apns/{データストアID}/{アプリID}/_target?proc=put";
  applican.device.getPushToken(
    function (res) {
      // デバイストークン取得成功
      var token = res.pushToken;
      var options = {
        post: {
          devicetoken: token
        },
            timeout  : 10000,
        headers: {
          "Content-Type": "application/json",
          "X-APPIARIES-TOKEN": access_token
        }
      };
      applican.http.post(url, options, 
                         function (res){
                           alert(res);
                           // デバイストークンの登録完了
                           alert("トークンの登録が完了しました");
                         }, 
                         function () {
                           // デバイストークン登録失敗
                           alert("トークンの登録が失敗しました")
                         });
    }, 
    function () {
      // デバイストークン取得失敗
    }
  );

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

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

iOSの場合、プッシュ通知を許諾するダイアログが出ますが、これをOKするとgetPushTokenSuccessがコールバックされます。

f:id:moongift:20150819170459p:plain

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

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

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

iOSビルド設定を行う

プッシュ通知はアプリカンシミュレータではなく、アプリとしてビルドを行う必要があります。そのためiOS開発者として登録している必要があります。そしてiOS Dev Centerにてプッシュ通知の証明書を作成しておく必要があります。この辺りの手順については省略します。

f:id:moongift:20150819170511p:plain

Push Notificationsを忘れずにチェックしておきます。

f:id:moongift:20150819170555p:plain

そしてcerファイルをキーチェーンアクセスに取り込み、p12ファイルとしてエクスポートします。そのファイルをアピアリーズのマーケット設定でAPNs設定にアップロードします。

f:id:moongift:20150819170604p:plain

続いてアプリカン側でもプッシュ通知の設定を行います。ビルド設定にて、iOSアプリ設定を行います。先ほどiOS Dev Centerで登録したBundle identifierを設定します。

f:id:moongift:20150819170614p:plain

さらにプッシュ通知機能を使用するに設定します。

f:id:moongift:20150819170626p:plain

また、iOSビルド設定にしてiOS開発者証明書、プロビジョニングプロファイルをアップロードしてください。

f:id:moongift:20150819170636p:plain

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

f:id:moongift:20150819170646p:plain

このアプリをiOSにインストールして起動すると、プッシュ通知を許諾するダイアログが出るようになります。

f:id:moongift:20150819170657p:plain

そして許諾すると、トークンの登録完了が出ます。

f:id:moongift:20150819170708p:plain

プッシュ通知を登録する

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

f:id:moongift:20150819170719p:plain

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

f:id:moongift:20150819170728p:plain

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

f:id:moongift:20150819170737p:plain

登録しました。

f:id:moongift:20150819170747p:plain

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

f:id:moongift:20150819170757p:plain


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