【javascript sdk ver.2】monacaとmbaasでプッシュ通知を体験しよう(for android &...

Copyright © NIFTY Corporation All Rights Reserved. *

事前準備

【ニフティクラウドmobile backendの利用登録】

http://mb.cloud.nifty.com/signup.htm

【Monacaの利用登録】

https://ja.monaca.io/

※ iOS端末をお持ちいただいた方

【 iOS Developer Program(有償)への登録とビルド確認まで】

https://developer.apple.com/jp/programs/ 参考：http://docs.monaca.mobi/cur/ja/manual/build/

※ Android端末をお持ちいただいた方

【 Googleアカウントの取得とGoogle Developers Console へのログイン】

https://developers.google.com/

https://accounts.google.com/signup

http://mb.cloud.nifty.com/signup.htm

https://ja.monaca.io/

https://developer.apple.com/jp/programs/

https://developers.google.com/

Copyright © NIFTY Corporation All Rights Reserved.

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

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

ニフティ株式会社


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

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

APNs

GCM

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


プッシュ通知の利用例

スマホ対応済みブログ


プッシュ通知の利用例

記事の更新をきっかけに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）

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



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

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



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



プロジェクト番号は後で使います場所を覚えておいてください

プロジェクト番号の確認



左上のメニューを選択→「API Manager」を選択



「認証情報」をクリック



「認証情報を追加」→「APIキー」→「サーバーキー」をクリック



サーバーIPアドレスは空欄のまま、「作成」してください。



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

APIキー

「OK」をクリックで閉じる



次に、GCMを有効にします。「概要」を選択、「Cloud Messaging for Android」

をクリック



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


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


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

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

への登録が必要です

https://developer.apple.com/jp/programs/※以降の手順は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/import_export/



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

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



「Identifiers」を選択。



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

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



新しいAppIDを作ります。

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

(例) Push Notification Hands On




「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を作成した方は不要です




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



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

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



ここまでの作業で以下の２つのファイルが出来ればOKです。

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

APNs用証明書(.cer)



ダウンロードしたAPNs用証明書をダブルクリックしてください。

APNs用証明書



キーチェーンアクセスの証明書の項目に「Apple Development iOS Push Services: *******」とそれに紐づく秘密鍵がインポートされたことを確認してください。



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



P12形式で保存先を決めると、パスワードを求められます。

パスワードは入力しないでOKを押してください。



ここまでの作業で手元に３つのファイルがあればOKです。

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

プロファイル

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

APNs用証明書(p12)

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

APNs用証明書(cer)


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

iOS

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

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

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

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

Android

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

種別がサーバーアプリケーションのキーであること

IPが任意のIPを許可であること

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


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



ログインするhttp://mb.cloud.nifty.com/



mBaaSをはじめて利用される方は、アプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。

「PushTest」と入力してください



※ログイン後に、この画面が出た方は…

「+新しいアプリ」をクリックすると

でてきます!

「PushTest」と入力してください



アプリが作成されました。

２つのキーは後で使います

OKをクリックすると管理画面が表示されます

※後でキーを確認する方法は次のページに掲載しています。



後でキーを確認するには…

アプリ設定



後でキーを確認するには…

ここにあります



データストアを確認しておく

データストア



データストアを確認しておく



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

再びアプリ設定の「プッシュ通知」を選択



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

許可する

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

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

アップロードする


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



Monacaにログインして新しいプロジェクトを作ります

「開発をスタート」をクリック



「Monaca.ioで開発」を選択してください



最小限のテンプレート「選択」をクリック



「プッシュ通知体験アプリ」※適当に書き変える

「プロジェクトを作成する」をクリック



今作成したプロジェクトを開きます

プッシュ通知体験アプリ



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



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



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

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

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

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

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




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

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

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




前ステップで仮に記載したキーや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を設定してください。


⑥動作確認〜ビルド手順（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上のプッシュ通知の配信ステータスが「配信済み」になり、端末にプッシュ通知が届きます。

【javascript sdk ver.2】monacaとmbaasでプッシュ通知を体験しよう(for android &...

Engineering