集中講座2 monacaとmbaasでプッシュ通知を体験しよう

Copyright © NIFTY Corporation All Rights Reserved.

【集中講座②】

Monaca とニフティクラウド mobile backend

でプッシュ通知を体験してみよう

ニフティ株式会社

Copyright © NIFTY Corporation All Rights Reserved. 2

今日のゴール

スマホ対応済みブログ記事の更新をトリガーに

REST API でプッシュ登録

Monaca 製のアプリへ更新を知らせるプッシュ通知

APNs

GCM


この時間帯に体験して頂く内容

Monaca で作ったアプリにプッシュ通知を組み込む

APNs

GCM

プッシュ通知の送信先となる配信端末情報を保存する


目次

① プッシュ通知の仕組みについて

② プッシュ通知を利用する準備（ Android ）

③ プッシュ通知を利用する準備（ iOS ）

④ mobile backend でプッシュ通知機能を利用する準備

⑤ Monaca で作ったアプリにプラグインを組み込む

⑥ 動作確認！



iOS 向けプッシュ通知 APNs (Apple Push Notification Service)

Android 向けプッシュ通知 GCM (Google Cloud Messaging)

ニフティクラウド mobile backend のプッシュ通知は各プラットフォームが提供している

通知サービスを利用しています


① プッシュ通知の仕組みについて（ APNs ）

① 事前準備 APNs 証明書を取得

② deviceToken の取得③ プッシュ通知

APNs

証明書 ①

②

メッセージ③


① プッシュ通知の仕組みについて（ GCM ）

① 事前準備 API キーを取得 GCM の有効化

② registration_id の取得③ プッシュ通知

GCM

API キー ①

②

メッセージ③


② プッシュ通知を利用する準備 (Android)



Android 向けプッシュ通知にはGoogle アカウントが必要です



Google Developers Console へログイン後、「プロジェクトを作成」を選択。

https://console.developers.google.com/



プロジェクト名を入力して「作成」



「 API と認証」の「認証情報」を選択

プロジェクト番号は後で使うのでメモしておいてください



「新しいキーを作成」をクリック



「サーバーキー」をクリック



許可対象 IP アドレスは空欄のまま、「作成」してください。



Google の API を利用するためのAPI キーが生成されました

この部分の文字列が API キー



次に、 GCM を有効にします。

「 API と認証」の「 API 」を選択、「 Cloud Messaging for Android 」をクリックする。



Google Cloud Messaging for Android のAPI を有効にします。


③ プッシュ通知を利用する準備 (iOS)



iOS 向けプッシュ通知にはApple Developer Program （有償）

への登録が必要です

https://developer.apple.com/jp/programs/※iOS 向けプッシュ通知を行う際に必要な p12 形式の証明書の作成に Mac が必要です※ 以降の手順は Monaca のビルド設定が完了している前提で進めます　　【 Monaca で設定】 http://docs.monaca.mobi/cur/ja/manual/build/ios/build_ios/　　【 Xcode から移行】 http://docs.monaca.mobi/cur/ja/manual/build/ios/import_export/

http://docs.monaca.mobi/cur/ja/manual/build/ios/build_ios/

http://docs.monaca.mobi/cur/ja/manual/build/ios/build_ios/

http://docs.monaca.mobi/cur/ja/manual/build/ios/import_export/

http://docs.monaca.mobi/cur/ja/manual/build/ios/import_export/



https://developer.apple.com/membercenter/

Apple 開発者ページのメンバーセンターへログイン後、「 Certificates, Identifiers & Profiles 」を選択。

クリック



「 Identifiers 」を選択。



新しい AppID を作ります。　※既存のものを使う場合はこの手順は不要です　※ワイルドカードな ID は使えません

「 iOS Apps 」になっていることを確認しましょう！



新しい AppID を作ります。

アプリの説明(ascii 文字で入力するのが無難です）




「 Explicit App ID 」を選択

「 Bundle ID 」を入力

プッシュ通知を利用する場合、 Wildcard App ID は使えません




「 Push Notifications 」にチェックを入れる

「 Continue 」をクリック



新しい AppID が作られました。

「 Push Notifications 」がEnabled または

Configurable になっていることを確認しましょう！

Configurable の場合は次のステップを実施すると

Enabled に切り替わります。



APNs 用の証明書を作ります。

「 Certificates 」の「 All 」を選択




「 Apple Push Notification service SSL (Sandbox) 」を選択して「 Continue 」をクリック

Monaca でデバッグビルドをする場合



先ほど作成した App ID を選択してください





CSR ファイルは、アプリビルド用証明書を作成した際と同じものを使ってください。　※無くした場合は、 CSR ファイルを　　作り直してアプリビルド用の証明書も　　作成し直してください　※ Monaca で CSR ファイルを作成済みの　　場合は Monaca クラウド IDE から　　エクスポートして利用してください



CSR ファイルを選択してください




APNs 用の証明書が作成されました。

ダウンロードしてください



プロビジョニングプロファイルを作成します。

左メニューのProvisioning Profiles の

All を選択

Provisioning Profiles のページへ遷移後に、右上の「＋」を選択




デバッグビルドする場合はDevelopment を選択

アドホックビルドする場合はAd Hoc を選択




今回使う AppID を選択




今回使うビルド用証明書を選択




動作確認で使う端末を選択※ 端末登録していない場合は device から要登録




プロファイルの名前を入力



プロビジョニングプロファイルが作成されました。

ダウンロードしてください



Monaca で秘密鍵と CSR を作成した方は、Monaca にログインしてプロジェクトを開いてください。「設定＞ iOS ビルド設定」を開きデベロッパー証明書をエクスポートします。　　　　※ mac のキーチェーンアクセスで秘密鍵、 CSR を作成した方は不要です



任意のパスワードを入力してください

パスワードを入力してデベロッパー証明書のエクスポートを完了してください。　　　　※ mac のキーチェーンアクセスで秘密鍵、 CSR を作成した方は不要です



ここまでの作業でお手元に４つのファイルがあれば OK です。※monaca からの証明書エクスポートが不要な方は３つ

CSR

Monaca からエクスポートしたビルド用証明書

※Monaca からエクスポートした方のみ

Apple の開発者サイトからダウンロードしたプロビジョニング

プロファイル

Apple の開発者サイトからダウンロードした

APNs 用証明書 (cer)





Monaca からエクスポートしたビルド用証明書をダブルクリックしてください。　　　　※ Monaca からのビルド用証明書のエクスポートが不要な方はスキップしてください



キーチェーンアクセスが開きパスワードを求められます。Monaca からのエクスポート時に設定したパスワードを入力してください。　　　　※ Monaca からのビルド用証明書のエクスポートが不要な方はスキップしてください



キーチェーンアクセスの証明書の項目に「 iPhone Developer ： ******** (**********) 」とそれに紐づく秘密鍵がインポートされたことを確認してください。　　　　※ Monaca からのビルド用証明書のエクスポートが不要な方は、　　　　　ご自身の証明書と秘密鍵が存在することをご確認ください




APNs 用証明書

Apple の開発者サイトからダウンロードしたAPNs 用証明書をダブルクリックしてください。



キーチェーンアクセスの証明書の項目に「 iPhone Developer ： ******** (**********) 」と「 Apple Development iOS Push Services: ******* 」とそれらに紐づく秘密鍵がインポートされたことを確認してください。両方の秘密鍵は同じものであることを確認してください。



キーチェーンアクセスの証明書の項目の「 Apple Development iOS Push Services: ******* 」を右クリックして「書き出す」を選択してください。



P12 形式で保存先を決めると、パスワードを求められます。パスワードは入力しないで OK を押してください。



ここまでの作業でお手元に５つのファイルがあれば OK です。※monaca からの証明書エクスポートが不要な方は４つ

CSR



Apple の開発者サイトからダウンロードしたプロビジョニング

プロファイル


APNs 用証明書 (cer)

キーチェーンアクセスから書き出した

APNs 用証明書 (p12)


チェックポイント！（プッシュ通知を使う準備）

iOS APNs 用の証明書 (p12) が準備できていること

– デバッグビルドする場合は「 APNs Development iOS 」

– アドホックビルドする場合は「 APNs Production iOS 」

プロビジョニングプロファイルが準備できていること

Android API キーが生成できていること

– 種別がサーバーアプリケーションのキーであること– IP が任意の IP を許可であること

Google Cloud Messaging for Android の API が、有効化されていること


④mobile backend でプッシュ通知機能を　利用する準備


④mobile backend でプッシュ通知機能を利用する準備

APNs 証明書と GCM の API キーをmobile backend に設定します。

RSS リーダーを作ったときのアプリを選択して、アプリ設定の「プッシュ通知」を選択。


④mobile backend でプッシュ通知機能を利用する準備

APNs 証明書と GCM の API キーを mobile backend に設定します。

許可する

Google Developer Console で取得した API キーを入力

キーチェーンアクセスから書き出した APNs 証明書 (p12) を

アップロードする


⑤Monaca で作ったアプリに　プラグインを組み込む


⑤Monaca で作ったアプリにプラグインを組み込む

Monaca にログインして、RSS リーダープロジェクトを開きます



上部メニューの「設定」から、「 Cordova プラグインの管理」を選択



リストの下の方に「 NiftyMB 」というプラグインがあるので「有効」にしてください。↓のようになれば OK です。



index.html を編集して配信端末(installation) の登録処理をできるようにします。

index.html のhead タグ内のscript タグの内側に追記。

installation の保存に必要なdeviceToken の取得には

プラグイン内部のネイティブコードが必要です。

ネイティブコードの準備が完了したdeviceready イベント発火後に取得／保存の処理を行います。



index.html を編集して配信端末(installation) の登録処理をできるようにします。

deviceready イベント発火時のリスナー関数で、NCMB プラグインの setDeviceToken関数を呼び出します。

この関数は deviceToken の取得と mobile backend への登録を行います。

※3 つの引数は次のステップで解説します



index.html を編集して配信端末(installation) の登録処理をできるようにします。前ステップで仮に記載したキーや ID の部分を適切なものに書き換えます。

mobile backend のアプリケーションキーとクライアントキーを第 1-2引数に、Google Developer Console のプロジェクト番号を第 3引数に記載します。


⑥動作確認！


⑥動作確認　〜アプリのビルド〜

ビルド設定　（ for Android ）ビルド手順　（ for Android ）ビルド設定　（ for iOS ）ビルド手順　（ for iOS ）動作確認

ここから先は確認端末に応じて必要な部分を実施してください。


⑥動作確認　〜ビルド設定（ for Android ）〜

Android の方

動作確認だけであれば特に設定は必要ありません。

ストアに提出する場合は Monaca のドキュメントを参考にしてください。


⑥動作確認　〜ビルド手順（ for Android ）〜

上部メニューの「ビルド」から、「 Android アプリのビルド」を選択



デバッグビルドを選択



少々お待ちください…



任意の方法で端末へ転送してください


⑥動作確認　〜ビルド設定（ for iOS ）〜

mobile backend に設定した APNs 証明書がDevelopment か Production かを確認して、適切なビルドを行ってください

Development の場合はデバッグビルド Production の場合はアドホックビルド

ビルド用の証明書と秘密鍵の組み合わせが正しくなるよう設定してください

Monaca の iOS アプリ設定の AppID は APNs 証明書と一致させてください

プロビジョニングプロファイルの AppID は APNs 証明書と一致させてください

iOS の方ビルドに関する設定が必要です。




上部メニューの「設定」から、「 iOS アプリ設定」を選択




App ID に、前半で作成した証明書に設定したものと同じID を設定してください。




上部メニューの「設定」から、「 iOS ビルド設定」を選択




必要に応じて秘密鍵をインポートしてください。　　　※ビルド用証明書の秘密鍵を設定してください　　　※ Monaca 上で CSR+ 秘密鍵生成済みの場合は不要です　　　※すでに設定済みであれば改めて作業する必要はありません




ビルド用証明書を必要に応じてアップロードしてください。　　　※すでに設定済みであれば改めて作業する必要はありません　　　※デバッグビルドの場合はデベロッパー証明書を、　　　　アドホックビルドの場合はディストリビューション証明書を設定してください


⑥動作確認　〜ビルド手順（ for iOS ）〜

上部メニューの「ビルド」から、「 iOS アプリのビルド」を選択



デバッグビルドを選択



プロビジョニングプロファイルをアップロード



少々お待ち下さい…



クリックしてダウンロードしてください



iTunes経由Xcode経由

http://docs.monaca.mobi/cur/ja/manual/deploy/non_market_deploy/

DeployGate経由（ OTA ） https://deploygate.com/

任意の方法で端末へ転送してください

Monaca にドキュメントがあります

http://docs.monaca.mobi/cur/ja/manual/deploy/non_market_deploy/

https://deploygate.com/


⑥動作確認　〜動作確認〜

端末上のアプリを起動してください。※ アプリでプッシュ通知の許可を求められた場合は許可してください※mobile backend の管理画面上で「データストア＞ installation クラス」に　オブジェクトが増えていれば端末登録成功です※ 端末登録が上手くいかない場合は、アプリを再起動してみてください



プッシュ通知の「＋新しいプッシュ通知」を選択。



メッセージに送りたい文字列を

入力



Android 端末に配信する

iOS 端末に配信する

プッシュ通知を作成して少々お待ちください…



mobile backend 上のプッシュ通知の配信ステータスが「配信済み」になり、端末にプッシュ通知が届きます。


プラグインのその他の機能と注意点

プラグインのその他の機能 window.NCMB.monaca.setHandler(function(json){})

– プッシュ通知からアプリを起動した際にプッシュ通知に含まれるデータを受け取るためのコールバックを登録できます。

window.NCMB.monaca.setReceiptStatus(true);– 引数に true を設定することでプッシュ通知からアプリを起動した際に、開封登録処理を行うよう設定できま

す。このメソッドを呼び出さない場合は開封登録処理は行われません。 window.NCMB.monaca.getInstallationId(function(id){});

– mobile backend に端末登録をした際に自動採番された ObjectId を取得します。

注意点 Monaca 用プラグインは以下の機能を搭載しておりません

– リッチプッシュ（ iOS/Android ）– ダイアログプッシュ（ Android ）– カスタムレシーバー（ Android ）

アプリの処理タイミングによっては端末登録に失敗することがありますが、アプリ起動のたびに端末登録を試行します

集中講座2 monacaとmbaasでプッシュ通知を体験しよう

Software