【javascript sdk ver.2】monacaとmbaasでプッシュ通知を体験しよう(for android &...
TRANSCRIPT
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
Copyright © NIFTY Corporation All Rights Reserved.
Monacaとニフティクラウドmobile backendで
プッシュ通知を体験してみよう
ニフティ株式会社
Copyright © NIFTY Corporation All Rights Reserved. *
この時間帯に体験して頂く内容
Monacaで作ったアプリにプッシュ通知を組み込む
APNs
GCM
プッシュ通知の送信先となる配信端末情報を保存する
Copyright © NIFTY Corporation All Rights Reserved. *
プッシュ通知の利用例
スマホ対応済みブログ
Copyright © NIFTY Corporation All Rights Reserved. *
プッシュ通知の利用例
記事の更新をきっかけにREST APIでプッシュ登録
Monaca製のアプリへ更新を知らせるプッシュ通知
APNs
GCM
スマホ対応済みブログ
Copyright © NIFTY Corporation All Rights Reserved. *
この時間帯に体験して頂く内容(再確認)
Monacaで作ったアプリにプッシュ通知を組み込む
APNs
GCM
プッシュ通知の送信先となる配信端末情報を保存する
Copyright © NIFTY Corporation All Rights Reserved. *
目次
① プッシュ通知の仕組みについて
② プッシュ通知を利用する準備(Android)
③ プッシュ通知を利用する準備(iOS)
④ mobile backendでプッシュ通知機能を利用する準備
⑤ Monacaで作ったアプリにプラグインを組み込む
⑥ 動作確認!
Copyright © NIFTY Corporation All Rights Reserved.
①プッシュ通知の仕組みについて
Copyright © NIFTY Corporation All Rights Reserved. *
①プッシュ通知の仕組みについて
iOS向けプッシュ通知
APNs (Apple Push Notification Service)
Android向けプッシュ通知
GCM (Google Cloud Messaging)
ニフティクラウドmobile backendのプッシュ通知は各プラットフォームが提供している
通知サービスを利用しています
Copyright © NIFTY Corporation All Rights Reserved. *
①プッシュ通知の仕組みについて(APNs)
①事前準備
・APNs証明書を取得
②初回起動時
・deviceTokenの取得
③プッシュ通知
APNs
証明書①
②
メッセージ③
Copyright © NIFTY Corporation All Rights Reserved. *
①プッシュ通知の仕組みについて(GCM)
①事前準備
・APIキーを取得
・GCMの有効化
②初回起動時
・Registration Idの取得
③プッシュ通知
GCM
APIキー①
メッセージ③
②
Copyright © NIFTY Corporation All Rights Reserved.
②プッシュ通知を利用する準備(Android)
Copyright © NIFTY Corporation All Rights Reserved. *
②プッシュ通知を利用する準備(Android)
Android向けプッシュ通知にはGoogleアカウントが必要です
Copyright © NIFTY Corporation All Rights Reserved. *
②プッシュ通知を利用する準備(Android)
Google Developers Console へログイン後、「プロジェクトを作成」を選択。
https://console.developers.google.com/
Copyright © NIFTY Corporation All Rights Reserved. *
②プッシュ通知を利用する準備(Android)
プロジェクト名を入力して「作成」
Copyright © NIFTY Corporation All Rights Reserved. *
②プッシュ通知を利用する準備(Android)
プロジェクト番号は後で使います場所を覚えておいてください
プロジェクト番号の確認
Copyright © NIFTY Corporation All Rights Reserved. *
②プッシュ通知を利用する準備(Android)
左上のメニューを選択→「API Manager」を選択
Copyright © NIFTY Corporation All Rights Reserved. *
②プッシュ通知を利用する準備(Android)
「認証情報」をクリック
Copyright © NIFTY Corporation All Rights Reserved. *
②プッシュ通知を利用する準備(Android)
「認証情報を追加」→「APIキー」→「サーバーキー」をクリック
Copyright © NIFTY Corporation All Rights Reserved. *
②プッシュ通知を利用する準備(Android)
サーバーIPアドレスは空欄のまま、「作成」してください。
Copyright © NIFTY Corporation All Rights Reserved. *
②プッシュ通知を利用する準備(Android)
GoogleのAPIを利用するためのAPIキーが生成されました
APIキー
「OK」をクリックで閉じる
Copyright © NIFTY Corporation All Rights Reserved. *
②プッシュ通知を利用する準備(Android)
次に、GCMを有効にします。「概要」を選択、「Cloud Messaging for Android」
をクリック
Copyright © NIFTY Corporation All Rights Reserved. *
②プッシュ通知を利用する準備(Android)
Google Cloud Messaging for AndroidのAPIを有効にします。
Copyright © NIFTY Corporation All Rights Reserved.
③プッシュ通知を利用する準備(iOS)
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(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/
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
https://developer.apple.com/membercenter/
Apple開発者ページのメンバーセンターへログイン後、「Certificates, Identifiers & Profiles」を選択。
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
「Identifiers」を選択。
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
新しいAppIDを作ります。※既存のものを使う場合はこの手順は不要です※ワイルドカードなIDは使えません
「iOS Apps」になっていることを確認しましょう!
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
新しいAppIDを作ります。
アプリの説明(ascii文字で入力するのが無難です)
(例) Push Notification Hands On
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
新しいAppIDを作ります。
「Explicit App ID」を選択
「Bundle ID」を入力
プッシュ通知を利用する場合、Wildcard App IDは使えません
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
新しいAppIDを作ります。
「Push Notifications」にチェックを入れる
「Continue」をクリック
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
新しいAppIDが作られました。
「Push Notifications」がEnabledまたは
Configurableになっていることを確認しましょう!
Configurableの場合は次のステップを実施すると
Enabledに切り替わります。
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
APNs用の証明書を作ります。
「Certificates」の「All」を選択
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
APNs用の証明書を作ります。
「Apple Push Notification service SSL (Sandbox)」を選択して「Continue」をクリック
Monacaでデバッグビルドをする場合
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
先ほど作成したApp IDを選択してください
APNs用の証明書を作ります。
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
APNs用の証明書を作ります。
CSRファイルは、アプリビルド用証明書を作成した際と同じものを使ってください。
※無くした場合は、CSRファイルを作り直してアプリビルド用の証明書も作成し直してください
※MonacaでCSRファイルを作成済みの場合はMonacaクラウドIDEからエクスポートして利用してください
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
CSRファイルを選択してください
APNs用の証明書を作ります。
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
APNs用の証明書が作成されました。
ダウンロードしてください
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
プロビジョニングプロファイルを作成します。
左メニューのProvisioning Profilesの
Allを選択
Provisioning Profilesのページへ遷移後に、右上の「+」を選択
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
プロビジョニングプロファイルを作成します。
デバッグビルドする場合はDevelopmentを選択
アドホックビルドする場合はAd Hocを選択
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
プロビジョニングプロファイルを作成します。
今回使うAppIDを選択
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
プロビジョニングプロファイルを作成します。
今回使うビルド用証明書を選択
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
プロビジョニングプロファイルを作成します。
動作確認で使う端末を選択※端末登録していない場合はdeviceから要登録
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
Monacaで秘密鍵とCSRを作成した方は、Monacaにログインしてプロジェクトを開いてください。「設定>iOSビルド設定」を開きデベロッパー証明書をエクスポートします。
※macのキーチェーンアクセスで秘密鍵、CSRを作成した方は不要です
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
プロビジョニングプロファイルを作成します。
プロファイルの名前を入力
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
プロビジョニングプロファイルが作成されました。
ダウンロードしてください
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
ここまでの作業で以下の2つのファイルが出来ればOKです。
プロビジョニングプロファイル
APNs用証明書(.cer)
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
ダウンロードしたAPNs用証明書をダブルクリックしてください。
APNs用証明書
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
キーチェーンアクセスの証明書の項目に「Apple Development iOS Push Services: *******」とそれに紐づく秘密鍵がインポートされたことを確認してください。
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
キーチェーンアクセスの証明書の項目の「Apple Development iOS Push Services: *******」を右クリックして「書き出す」を選択してください。
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
P12形式で保存先を決めると、パスワードを求められます。
パスワードは入力しないでOKを押してください。
Copyright © NIFTY Corporation All Rights Reserved. *
③プッシュ通知を利用する準備(iOS)
ここまでの作業で手元に3つのファイルがあればOKです。
Appleの開発者サイトからダウンロードしたプロビジョニング
プロファイル
キーチェーンアクセスから書き出した
APNs用証明書(p12)
Appleの開発者サイトからダウンロードした
APNs用証明書(cer)
Copyright © NIFTY Corporation All Rights Reserved. *
チェックポイント!(プッシュ通知を使う準備)
iOS
APNs用の証明書(p12)が準備できていること
デバッグビルドする場合は「APNs Development iOS」
アドホックビルドする場合は「APNs Production iOS」
プロビジョニングプロファイルが準備できていること
Android
APIキーが生成できていること
種別がサーバーアプリケーションのキーであること
IPが任意のIPを許可であること
Google Cloud Messaging for AndroidのAPIが、有効化されていること
Copyright © NIFTY Corporation All Rights Reserved.
④mobile backendでプッシュ通知機能を利用する準備
Copyright © NIFTY Corporation All Rights Reserved. *
④mobile backendでプッシュ通知機能を利用する準備
ログインするhttp://mb.cloud.nifty.com/
Copyright © NIFTY Corporation All Rights Reserved. *
④mobile backendでプッシュ通知機能を利用する準備
mBaaSをはじめて利用される方は、アプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。
「PushTest」と入力してください
Copyright © NIFTY Corporation All Rights Reserved. *
④mobile backendでプッシュ通知機能を利用する準備
※ログイン後に、この画面が出た方は…
「+新しいアプリ」をクリックすると
でてきます!
「PushTest」と入力してください
Copyright © NIFTY Corporation All Rights Reserved. *
④mobile backendでプッシュ通知機能を利用する準備
アプリが作成されました。
2つのキーは後で使います
OKをクリックすると管理画面が表示されます
※後でキーを確認する方法は次のページに掲載しています。
Copyright © NIFTY Corporation All Rights Reserved. *
④mobile backendでプッシュ通知機能を利用する準備
後でキーを確認するには…
アプリ設定
Copyright © NIFTY Corporation All Rights Reserved. *
④mobile backendでプッシュ通知機能を利用する準備
後でキーを確認するには…
ここにあります
Copyright © NIFTY Corporation All Rights Reserved. *
④mobile backendでプッシュ通知機能を利用する準備
データストアを確認しておく
データストア
Copyright © NIFTY Corporation All Rights Reserved. *
④mobile backendでプッシュ通知機能を利用する準備
データストアを確認しておく
Copyright © NIFTY Corporation All Rights Reserved. *
④mobile backendでプッシュ通知機能を利用する準備
APNs証明書とGCMのAPIキーをmobile backendに設定します。
再びアプリ設定の「プッシュ通知」を選択
Copyright © NIFTY Corporation All Rights Reserved. *
④mobile backendでプッシュ通知機能を利用する準備
APNs証明書とGCMのAPIキーをmobile backendに設定します。
許可する
Google Developer Consoleで取得したAPIキーを入力
キーチェーンアクセスから書き出したAPNs証明書(p12)を
アップロードする
Copyright © NIFTY Corporation All Rights Reserved.
⑤Monacaで作ったアプリにプラグインを組み込む
Copyright © NIFTY Corporation All Rights Reserved. *
⑤Monacaで作ったアプリにプラグインを組み込む
Monacaにログインして新しいプロジェクトを作ります
「開発をスタート」をクリック
Copyright © NIFTY Corporation All Rights Reserved. *
⑤Monacaで作ったアプリにプラグインを組み込む
「Monaca.ioで開発」を選択してください
Copyright © NIFTY Corporation All Rights Reserved. *
⑤Monacaで作ったアプリにプラグインを組み込む
最小限のテンプレート「選択」をクリック
Copyright © NIFTY Corporation All Rights Reserved. *
⑤Monacaで作ったアプリにプラグインを組み込む
「プッシュ通知体験アプリ」※適当に書き変える
「プロジェクトを作成する」をクリック
Copyright © NIFTY Corporation All Rights Reserved. *
⑤Monacaで作ったアプリにプラグインを組み込む
今作成したプロジェクトを開きます
プッシュ通知体験アプリ
Copyright © NIFTY Corporation All Rights Reserved. *
⑤Monacaで作ったアプリにプラグインを組み込む
上部メニューの「設定」から、「Cordovaプラグインの管理」を選択
Copyright © NIFTY Corporation All Rights Reserved. *
⑤Monacaで作ったアプリにプラグインを組み込む
リストの下の方に「NiftyMB」というプラグインがあるので「有効」にしてください。↓のようになればOKです。
Copyright © NIFTY Corporation All Rights Reserved. *
⑤Monacaで作ったアプリにプラグインを組み込む
index.htmlを編集して配信端末(installation)の登録処理をできるようにします。
index.htmlのheadタグ内のscriptタグの内側に追記。
installationの保存に必要なdeviceTokenの取得には
プラグイン内部のネイティブコードが必要です。
ネイティブコードの準備が完了したdevicereadyイベント発火後に取得/保存の処理を行います。
Copyright © NIFTY Corporation All Rights Reserved. *
⑤Monacaで作ったアプリにプラグインを組み込む
index.htmlを編集して配信端末(installation)の登録処理をできるようにします。
devicereadyイベント発火時のリスナー関数で、NCMBプラグインのsetDeviceToken関数を呼び出します。
この関数はdeviceTokenの取得とmobile backendへの登録を行います。
※3つの引数は次のステップで解説します
Copyright © NIFTY Corporation All Rights Reserved. *
⑤Monacaで作ったアプリにプラグインを組み込む
index.htmlを編集して配信端末(installation)の登録処理をできるようにします。
前ステップで仮に記載したキーやIDの部分を適切なものに書き換えます。mobile backendのアプリケーションキーとクライアントキーを第1-2引数に、
Google Developer Consoleのプロジェクト番号を第3引数に記載します。
Copyright © NIFTY Corporation All Rights Reserved.
⑥動作確認!
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜アプリのビルド〜
ビルド設定 (for Android)
ビルド手順 (for Android)
ビルド設定 (for iOS)
ビルド手順 (for iOS)
動作確認
ここから先は確認端末に応じて必要な部分を実施してください。
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド設定(for Android)〜
Androidの方
動作確認だけであれば特に設定は必要ありません。
ストアに提出する場合はMonacaのドキュメントを参考にしてください。
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド手順(for Android)〜
上部メニューの「ビルド」から、「Androidアプリのビルド」を選択
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド手順(for Android)〜
デバッグビルドを選択
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド手順(for Android)〜
少々お待ちください…
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド手順(for Android)〜
任意の方法で端末へ転送してください
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド設定(for iOS)〜
mobile backendに設定したAPNs証明書がDevelopmentかProductionかを確認して、適切なビルドを行ってください
Developmentの場合はデバッグビルド
Productionの場合はアドホックビルド
ビルド用の証明書と秘密鍵の組み合わせが正しくなるよう設定してください
MonacaのiOSアプリ設定のAppIDはAPNs証明書と一致させてください
プロビジョニングプロファイルのAppIDはAPNs証明書と一致させてください
iOSの方 ビルドに関する設定が必要です。
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド設定(for iOS)〜
iOSの方 ビルドに関する設定が必要です。
上部メニューの「設定」から、「iOSアプリ設定」を選択
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド設定(for iOS)〜
iOSの方 ビルドに関する設定が必要です。
App IDに、前半で作成した証明書に設定したものと同じIDを設定してください。
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド手順(for iOS)〜
上部メニューの「ビルド」から、「iOSアプリのビルド」を選択
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド手順(for iOS)〜
デバッグビルドを選択
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド手順(for iOS)〜
プロビジョニングプロファイルをアップロード
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド手順(for iOS)〜
少々お待ち下さい…
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド手順(for iOS)〜
クリックしてダウンロードしてください
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜ビルド手順(for iOS)〜
iTunes経由
Xcode経由 http://docs.monaca.mobi/cur/ja/manual/deploy/non_market_deploy/
DeployGate経由(OTA)
https://deploygate.com/
任意の方法で端末へ転送してください
Monacaにドキュメントがあります
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜動作確認〜
端末上のアプリを起動してください。※アプリでプッシュ通知の許可を求められた場合は許可してください※mobile backendの管理画面上で「データストア>installationクラス」に
オブジェクトが増えていれば端末登録成功です※端末登録が上手くいかない場合は、アプリを再起動してみてください
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜動作確認〜
プッシュ通知の「+新しいプッシュ通知」を選択。
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜動作確認〜
メッセージに送りたい文字列を
入力
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜動作確認〜
Android端末に配信する
iOS端末に配信する
プッシュ通知を作成して少々お待ちください…
Copyright © NIFTY Corporation All Rights Reserved. *
⑥動作確認 〜動作確認〜
mobile backend上のプッシュ通知の配信ステータスが「配信済み」になり、端末にプッシュ通知が届きます。
Copyright © NIFTY Corporation All Rights Reserved. *