LoginSignup
14
4

More than 5 years have passed since last update.

@kishisuke(きし すけ)inピープルソフトウェア株式会社

Monaca×BaaS@rakuzaでプッシュ通知してみた

Last updated at Posted at 2017-03-22

前の記事で作成したお知らせをPush通知するアプリを作ってみます。

Push通知のイメージ図

Push通知は以下のイメージで構成されています。デバイストークンを、iOSはAPNs（AppleのPush通知サーバ）、AndroidはGCM/FCM（GoogleのPush通知サーバー）より取得して、BaaS@rakuzaに保存します。BaaS@rakuzaは宛先となるデバイストークンとメッセージをAPNs/GCM/FCMに送り、デバイスにPush通知が届きます。

スクリーンショット 2017-03-21 23.08.36.png

必要なもの

  • Mac（できれば）
    • 必須ではないですが、iOSの証明書の作成はMacの方が楽です。
  • iPhone実機
  • Android実機（エミュレータでもたぶんOK）
  • Apple Developer Program
    • 証明書などの作成で必要です。有料
  • Googleアカウント
    • Google Developer Console用。APIキーの作成に必要です。
  • Monacaアカウント（Goldプラン以上）
  • BaaS@rakuzaのアカウント（無料体験版でもOK！）

1. iOSの設定

証明書などの作成

イメージ図の「①デバイストークン取得」、「④プッシュ通知」に必要な、証明書などを作成/登録します。以下、作成/登録が必要な項目です。

  1. CSRの作成
  2. ビルド用証明書の作成
  3. AppIDの作成
  4. 端末の登録
  5. プロビジョニングプロファイルの作成

１〜５については、Monacaさんの公式ページが詳しいので、こちらを参照します。ステップ１〜２まで行えばOKです。ただし、一部については以下に読み替えて進めます。

  • 証明書は「配布用証明書」を作成します。
    • BaaS@rakuzaはPush通知をAPNsの実稼働用サーバ（api.push.apple.com:443）に送信します。そのため、アプリ証明書および後述するPush通知証明書も配布用証明書が必要になります。
  • AppIDの登録は「Explicit App ID」で行います。
  • AppIDの「App Services」→「Push Notifications」にチェックをします。
  • Provisioning Profilesは「Ad Hoc」を選択します。
    • こちらも配布用にします。リリースするわけではないので、「Ad Hoc」（評価用）でOKです。

Push通知証明書作成

BaaS@rakuzaからAPNsにPush通知を送信する際に必要となる証明書を作成します。（イメージ図の「③プッシュ通知依頼」に該当）この証明書はビルド用証明書とは別物なので注意です。

  1. アプリビルド時の証明書作成と同様に、「Certificates, Identifiers & Profiles」→「Certificates」→右上の「＋」をクリックし、「Production」→「Apple Push Notification service SSL (Sandbox & Production)」を選択して、Continue。
  2. 作成したAppIDを選択して、Continue。
  3. CSRを作成して、作成したファイルをアップロードします。
  4. 作成した証明書はダウンロードして、ファイル形式をp12かpemに変換します。
    • macOSであれば、ダブルクリックして一旦インストールし、キーチェーンアクセスツールで証明書を右クリックして書き出せばp12に変換できます。書き出す際、パスフレーズを設定しないよう注意です。（Windows/Linuxの方は「cer pem 変換」でググりましょう！）

スクリーンショット 2017-03-19 22.30.54.png

2. Androidの設定

イメージ図の「①デバイストークン取得」には「SenderID」が、「③プッシュ通知依頼」には「APIキー」が必要です。SenderID、APIキーの作成はFirebaseで行います。（AndroidのPush通知はGCMからFCMに移行し、新規にGCM向けのAPIキーをGoogle Developer Consoleを通して作成することはできなくなりました。1）

コンソール画面に移動し、「新規プロジェクトを作成」よりプロジェクトを作成します。
fb3.png

プロジェクト作成後、左上の歯車マーク→「プロジェクトの設定」→「クラウドメッセージング」タブを開きます。
fb4.png

表示された画面の「送信者 ID」がSenderID、「Legacy server key」がAPIキーです。（2017/03/22時点でBaaS@rakuzaは古い形式のAPIキーのみをサポートしています。そのため、「Server key」ではなく「Legacy server key」を使用する必要があります）
fb5.png

3. Push通知証明書、APIキーをBaaS管理者画面で登録

管理者画面の「プッシュ通知管理」→「プッシュ通知環境設定」を開き、前章で作成した証明書＆APIキーをBaaS@rakuzaに設定します。iOSのPush通知証明書はファイル名が日本語だと変な感じになるので、英数字のファイル名に変換しておくことをおすすめします。（push.p12とか）

スクリーンショット 2017-03-19 22.46.41.png

4. 「phonegap-plugin-push」のインストール

Push通知の各種機能（デバイストークン取得など）を使用するためには、Cordovaプラグインが必要になります。ここでは、汎用的なPush通知プラグインの「phonegap-plugin-push」を使用します。

バージョンは1.8.4にします。（1.9.x以降はCordovaのバージョンが6.4.0以降となっていますが、Monacaは6.2をサポートしているため）
いつもの様にgitのURLを設定すると最新版が読み込まれてしまうので、一旦1.8.4のソースコードをダウンロードして、「圧縮されたZIPパッケージをアップロード」でzipファイルをアップロードします。
スクリーンショット 2017-03-19 23.26.29.png

また、インストール後に「Push Plugin」→「設定」より、SenderIDを設定します。

SENDER_ID=<「2. Androidの設定」で作成したSenderID>

スクリーンショット 2017-03-19 23.26.51.png

※余談ですが、phonegap-plugin-pushは2.0.0（まだrcですが）からFCMに対応しています。しかし、Cordovaのバージョンが6.4.0以降のため、Monacaでは使用できません・・。6.4.0以降の対応はやくきてくれーー！！

5. ユーザーの登録

BaaS@rakuzaでは１ユーザー＝１デバイストークンとなっているため、デバイストークンの登録にユーザーの登録が必要です。ユーザーはID/パスワードでも登録できますが、とりあえず匿名ユーザーを登録します。

MainController.js
const USER_ACCESS_TOKEN_KEY = 'userAccessToken';

function setupRakuza() {
  // 第一引数で指定されたテナントキーの値をもとに楽座のテナントを設定します
  var tenantKey = 'ここにテナントキー';
  RKZClient.setTenantKey(tenantKey, function() {
    // 成功時の処理
    alert('RKZClientクラスの初期化に成功しました。');
    // ユーザーの登録
    registerUser();
  }, function(error) {
    // エラー時にアラートでエラー内容を表示します
    alert(JSON.stringify(error, null, ' '));
  });
}

function registerUser() {
  var deferred = $q.defer();

  // ローカルからユーザーアクセストークンを取得
  var userAccessToken = localStorage.getItem(USER_ACCESS_TOKEN_KEY);
  if (!userAccessToken) {
    // ユーザーアクセストークンがなければ、新規でユーザーを作成
    var userData = {};
    RKZClient.registUser(userData, function (userData) {
      alert(userData.user_access_token + "," + userData.user_no);

      // ユーザーアクセストークンをローカルに保存する
      localStorage.setItem(USER_ACCESS_TOKEN_KEY, userData.user_access_token);
      // ユーザーアクセストークンを返す
      deferred.resolve(userData.user_access_token);
    }, function (error) {
      alert(JSON.stringify(error, null, ' '));
      deferred.reject(error);
    });
  } else {
    // あれば、ユーザーアクセストークンを返す
    deferred.resolve(userAccessToken);
  }

  // 結果はPrimiseを返して、呼び出し元で結果をハンドリングできる様にする
  return deferred.promise;
}

上記コードを実行後に管理者画面でユーザー一覧画面を表示すると、ユーザーが登録されたことが確認できます。
スクリーンショット 2017-03-19 23.48.48.png

6. デバイストークンの取得＆登録

続いて、デバイストークンの取得＆登録を行います。Push通知を行うには、デバイストークンが必要なため、アプリ側でデバイストークンを取得し、BaaS@rakuzaに送信＆登録を行う必要があります。先ほどのユーザー登録処理後に、デバイストークンの取得＆登録処理の関数を呼び出す様修正します。

MainController.js
function setupRakuza() {
  // 第一引数で指定されたテナントキーの値をもとに楽座のテナントを設定します
  var tenantKey = 'ここにテナントキー';
  RKZClient.setTenantKey(tenantKey, function() {
    // 成功時の処理
    alert('RKZClientクラスの初期化に成功しました。');
    // ユーザーの登録
    registerUser().then(function (userAccessToken) {
      // プッシュ通知のセットアップ
      setupPushNotification(userAccessToken);
    });
  }, function(error) {
    // エラー時にアラートでエラー内容を表示します
    alert(JSON.stringify(error, null, ' '));
  });
}

function registerUser() {
  // 略...
}

function setupPushNotification(userAccessToken) {
  // プッシュ通知初期設定
  var push = PushNotification.init({
    android: {
      senderID: '「2. Androidの設定」で作成したSenderID'
    },
    ios: {
      alert: 'true',
      badge: 'true',
      sound: 'true'
    }
  });

  // デバイストークン取得時のイベント
  push.on('registration', function(data) {
    console.info('registrationId: ' + data.registrationId);

    // デバイストークンをBaaS@rakuzaに送信＆登録
    RKZClient.registPushDeviceToken(userAccessToken, data.registrationId, function (statusCode) {
      alert('デバイストークンを登録しました。');
    }, function (error) {
      alert(JSON.stringify(error, null, ' '));
    });
  });

  // 通知受信時のイベント
  push.on('notification', function(data) {
    console.info('message: ' + data.message);
    console.info('title: ' + data.title);
    console.info('count: ' + data.count);
    console.info('sound: ' + data.sound);
    console.info('image: ' + data.image);
    console.info('additionalData: ' + data.additionalData);
  });

  push.on('error', function(e) {
    console.error('message: ' + e.message);
  });
}

7. アプリのビルド

前述までの状態でアプリをビルドして実機にインストールします。iOSはAd Hocでビルドしてください。Androidはデバッグビルドで構いません。

8. Push通知実行

管理者画面より、お知らせをPush通知します。「お知らせ管理」→「お知らせ一覧」よりお知らせ一覧を表示し、Push通知したいお知らせの「Push」列のボタンをクリックします。
プッシュ通知入力画面でタイトルを編集できます。（ちなみに、実際に送信されるのはタイトルのみです）
配信日時を変更して、指定時間に送信も可能です。すぐに送りたい場合は変更せずそのまま「次へ」ボタンをクリックして、予約をします。
スクリーンショット 2017-03-20 0.21.27.png

しばらくすると、Push通知が届きます。
IMG_0001.jpg

もし、Push通知が届かない！？場合は管理画面（「プッシュ通知管理」→「プッシュ通知履歴」）から送信ログを参照できるので確認してみて下さい。「ログ詳細」からダウンロードできます。
無題5.png

エラーメッセージが以下の場合、APIキーが間違っているか、FCM移行後にGoogle Developer ConsoleでAPIキーを作成した可能性があります。後者の場合は、Firebaseより「Google プロジェクトをインポート」を実行して生成された「Legacy server key」を指定して下さい。

Android端末へのプッシュ通知の送信に失敗しました。 : HTTP/1.0 401 Unauthorized

ソースコード

今回修正したソースコードです。
https://github.com/kishino/BaaSSampleApp/commit/0400042c1fb001644c1d3cf39701edd5e6ecdf2a

おわりに

おそらく、一番ハマるのはiOSの証明書などの作成だと思います。（私もはまりました・・:sob:）
ただ、そこを乗り越えれば面倒なサーバの処理をBaaSが行なってくれるので、簡単にPush通知が実装できて良い感じでした:grinning:

  1. 公式ドキュメントの「Authentication Error」を参照 ↩

14
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
4