集中講座2 monacaとmbaasでプッシュ通知を体験しよう
-
date post
15-Aug-2015 -
Category
Software
-
view
164 -
download
1
Transcript of 集中講座2 monacaとmbaasでプッシュ通知を体験しよう
Copyright © NIFTY Corporation All Rights Reserved.
【集中講座②】
Monaca とニフティクラウド mobile backend
でプッシュ通知を体験してみよう
ニフティ株式会社
Copyright © NIFTY Corporation All Rights Reserved. 2
今日のゴール
スマホ対応済みブログ記事の更新をトリガーに
REST API でプッシュ登録
Monaca 製のアプリへ更新を知らせるプッシュ通知
APNs
GCM
Copyright © NIFTY Corporation All Rights Reserved. 3
この時間帯に体験して頂く内容
Monaca で作ったアプリにプッシュ通知を組み込む
APNs
GCM
プッシュ通知の送信先となる配信端末情報を保存する
Copyright © NIFTY Corporation All Rights Reserved. 4
目次
① プッシュ通知の仕組みについて
② プッシュ通知を利用する準備( Android )
③ プッシュ通知を利用する準備( iOS )
④ mobile backend でプッシュ通知機能を利用する準備
⑤ Monaca で作ったアプリにプラグインを組み込む
⑥ 動作確認!
Copyright © NIFTY Corporation All Rights Reserved.
① プッシュ通知の仕組みについて
Copyright © NIFTY Corporation All Rights Reserved. 6
① プッシュ通知の仕組みについて
iOS 向けプッシュ通知 APNs (Apple Push Notification Service)
Android 向けプッシュ通知 GCM (Google Cloud Messaging)
ニフティクラウド mobile backend のプッシュ通知は各プラットフォームが提供している
通知サービスを利用しています
Copyright © NIFTY Corporation All Rights Reserved. 7
① プッシュ通知の仕組みについて( APNs )
① 事前準備 APNs 証明書を取得
② deviceToken の取得③ プッシュ通知
APNs
証明書 ①
②
メッセージ③
Copyright © NIFTY Corporation All Rights Reserved. 8
① プッシュ通知の仕組みについて( GCM )
① 事前準備 API キーを取得 GCM の有効化
② registration_id の取得③ プッシュ通知
GCM
API キー ①
②
メッセージ③
Copyright © NIFTY Corporation All Rights Reserved.
② プッシュ通知を利用する準備 (Android)
Copyright © NIFTY Corporation All Rights Reserved. 10
② プッシュ通知を利用する準備( Android )
Android 向けプッシュ通知にはGoogle アカウントが必要です
Copyright © NIFTY Corporation All Rights Reserved. 11
② プッシュ通知を利用する準備( Android )
Google Developers Console へログイン後、「プロジェクトを作成」を選択。
https://console.developers.google.com/
Copyright © NIFTY Corporation All Rights Reserved. 12
② プッシュ通知を利用する準備( Android )
プロジェクト名を入力して「作成」
Copyright © NIFTY Corporation All Rights Reserved. 13
② プッシュ通知を利用する準備( Android )
「 API と認証」の「認証情報」を選択
プロジェクト番号は後で使うのでメモしておいてください
Copyright © NIFTY Corporation All Rights Reserved. 14
② プッシュ通知を利用する準備( Android )
「新しいキーを作成」をクリック
Copyright © NIFTY Corporation All Rights Reserved. 15
② プッシュ通知を利用する準備( Android )
「サーバーキー」をクリック
Copyright © NIFTY Corporation All Rights Reserved. 16
② プッシュ通知を利用する準備( Android )
許可対象 IP アドレスは空欄のまま、「作成」してください。
Copyright © NIFTY Corporation All Rights Reserved. 17
② プッシュ通知を利用する準備( Android )
Google の API を利用するためのAPI キーが生成されました
この部分の文字列が API キー
Copyright © NIFTY Corporation All Rights Reserved. 18
② プッシュ通知を利用する準備( Android )
次に、 GCM を有効にします。
「 API と認証」の「 API 」を選択、「 Cloud Messaging for Android 」をクリックする。
Copyright © NIFTY Corporation All Rights Reserved. 19
② プッシュ通知を利用する準備( Android )
Google Cloud Messaging for Android のAPI を有効にします。
Copyright © NIFTY Corporation All Rights Reserved.
③ プッシュ通知を利用する準備 (iOS)
Copyright © NIFTY Corporation All Rights Reserved. 21
③ プッシュ通知を利用する準備( 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/
Copyright © NIFTY Corporation All Rights Reserved. 22
③ プッシュ通知を利用する準備( iOS )
https://developer.apple.com/membercenter/
Apple 開発者ページのメンバーセンターへログイン後、「 Certificates, Identifiers & Profiles 」を選択。
クリック
Copyright © NIFTY Corporation All Rights Reserved. 23
③ プッシュ通知を利用する準備( iOS )
「 Identifiers 」を選択。
Copyright © NIFTY Corporation All Rights Reserved. 24
③ プッシュ通知を利用する準備( iOS )
新しい AppID を作ります。 ※既存のものを使う場合はこの手順は不要です ※ワイルドカードな ID は使えません
「 iOS Apps 」になっていることを確認しましょう!
Copyright © NIFTY Corporation All Rights Reserved. 25
③ プッシュ通知を利用する準備( iOS )
新しい AppID を作ります。
アプリの説明(ascii 文字で入力するのが無難です)
Copyright © NIFTY Corporation All Rights Reserved. 26
③ プッシュ通知を利用する準備( iOS )
新しい AppID を作ります。
「 Explicit App ID 」を選択
「 Bundle ID 」を入力
プッシュ通知を利用する場合、 Wildcard App ID は使えません
Copyright © NIFTY Corporation All Rights Reserved. 27
③ プッシュ通知を利用する準備( iOS )
新しい AppID を作ります。
「 Push Notifications 」にチェックを入れる
「 Continue 」をクリック
Copyright © NIFTY Corporation All Rights Reserved. 28
③ プッシュ通知を利用する準備( iOS )
新しい AppID が作られました。
「 Push Notifications 」がEnabled または
Configurable になっていることを確認しましょう!
Configurable の場合は次のステップを実施すると
Enabled に切り替わります。
Copyright © NIFTY Corporation All Rights Reserved. 29
③ プッシュ通知を利用する準備( iOS )
APNs 用の証明書を作ります。
「 Certificates 」の「 All 」を選択
Copyright © NIFTY Corporation All Rights Reserved. 30
③ プッシュ通知を利用する準備( iOS )
APNs 用の証明書を作ります。
「 Apple Push Notification service SSL (Sandbox) 」を選択して「 Continue 」をクリック
Monaca でデバッグビルドをする場合
Copyright © NIFTY Corporation All Rights Reserved. 31
③ プッシュ通知を利用する準備( iOS )
先ほど作成した App ID を選択してください
APNs 用の証明書を作ります。
Copyright © NIFTY Corporation All Rights Reserved. 32
③ プッシュ通知を利用する準備( iOS )
APNs 用の証明書を作ります。
CSR ファイルは、アプリビルド用証明書を作成した際と同じものを使ってください。 ※無くした場合は、 CSR ファイルを 作り直してアプリビルド用の証明書も 作成し直してください ※ Monaca で CSR ファイルを作成済みの 場合は Monaca クラウド IDE から エクスポートして利用してください
Copyright © NIFTY Corporation All Rights Reserved. 33
③ プッシュ通知を利用する準備( iOS )
CSR ファイルを選択してください
APNs 用の証明書を作ります。
Copyright © NIFTY Corporation All Rights Reserved. 34
③ プッシュ通知を利用する準備( iOS )
APNs 用の証明書が作成されました。
ダウンロードしてください
Copyright © NIFTY Corporation All Rights Reserved. 35
③ プッシュ通知を利用する準備( iOS )
プロビジョニングプロファイルを作成します。
左メニューのProvisioning Profiles の
All を選択
Provisioning Profiles のページへ遷移後に、右上の「+」を選択
Copyright © NIFTY Corporation All Rights Reserved. 36
③ プッシュ通知を利用する準備( iOS )
プロビジョニングプロファイルを作成します。
デバッグビルドする場合はDevelopment を選択
アドホックビルドする場合はAd Hoc を選択
Copyright © NIFTY Corporation All Rights Reserved. 37
③ プッシュ通知を利用する準備( iOS )
プロビジョニングプロファイルを作成します。
今回使う AppID を選択
Copyright © NIFTY Corporation All Rights Reserved. 38
③ プッシュ通知を利用する準備( iOS )
プロビジョニングプロファイルを作成します。
今回使うビルド用証明書を選択
Copyright © NIFTY Corporation All Rights Reserved. 39
③ プッシュ通知を利用する準備( iOS )
プロビジョニングプロファイルを作成します。
動作確認で使う端末を選択※ 端末登録していない場合は device から要登録
Copyright © NIFTY Corporation All Rights Reserved. 40
③ プッシュ通知を利用する準備( iOS )
プロビジョニングプロファイルを作成します。
プロファイルの名前を入力
Copyright © NIFTY Corporation All Rights Reserved. 41
③ プッシュ通知を利用する準備( iOS )
プロビジョニングプロファイルが作成されました。
ダウンロードしてください
Copyright © NIFTY Corporation All Rights Reserved. 42
③ プッシュ通知を利用する準備( iOS )
Monaca で秘密鍵と CSR を作成した方は、Monaca にログインしてプロジェクトを開いてください。「設定> iOS ビルド設定」を開きデベロッパー証明書をエクスポートします。 ※ mac のキーチェーンアクセスで秘密鍵、 CSR を作成した方は不要です
Copyright © NIFTY Corporation All Rights Reserved. 43
③ プッシュ通知を利用する準備( iOS )
任意のパスワードを入力してください
パスワードを入力してデベロッパー証明書のエクスポートを完了してください。 ※ mac のキーチェーンアクセスで秘密鍵、 CSR を作成した方は不要です
Copyright © NIFTY Corporation All Rights Reserved. 44
③ プッシュ通知を利用する準備( iOS )
ここまでの作業でお手元に4つのファイルがあれば OK です。※monaca からの証明書エクスポートが不要な方は3つ
CSR
Monaca からエクスポートしたビルド用証明書
※Monaca からエクスポートした方のみ
Apple の開発者サイトからダウンロードしたプロビジョニング
プロファイル
Apple の開発者サイトからダウンロードした
APNs 用証明書 (cer)
Copyright © NIFTY Corporation All Rights Reserved. 45
③ プッシュ通知を利用する準備( iOS )
Monaca からエクスポートしたビルド用証明書
※Monaca からエクスポートした方のみ
Monaca からエクスポートしたビルド用証明書をダブルクリックしてください。 ※ Monaca からのビルド用証明書のエクスポートが不要な方はスキップしてください
Copyright © NIFTY Corporation All Rights Reserved. 46
③ プッシュ通知を利用する準備( iOS )
キーチェーンアクセスが開きパスワードを求められます。Monaca からのエクスポート時に設定したパスワードを入力してください。 ※ Monaca からのビルド用証明書のエクスポートが不要な方はスキップしてください
Copyright © NIFTY Corporation All Rights Reserved. 47
③ プッシュ通知を利用する準備( iOS )
キーチェーンアクセスの証明書の項目に「 iPhone Developer : ******** (**********) 」とそれに紐づく秘密鍵がインポートされたことを確認してください。 ※ Monaca からのビルド用証明書のエクスポートが不要な方は、 ご自身の証明書と秘密鍵が存在することをご確認ください
Copyright © NIFTY Corporation All Rights Reserved. 48
③ プッシュ通知を利用する準備( iOS )
Apple の開発者サイトからダウンロードした
APNs 用証明書
Apple の開発者サイトからダウンロードしたAPNs 用証明書をダブルクリックしてください。
Copyright © NIFTY Corporation All Rights Reserved. 49
③ プッシュ通知を利用する準備( iOS )
キーチェーンアクセスの証明書の項目に「 iPhone Developer : ******** (**********) 」と「 Apple Development iOS Push Services: ******* 」とそれらに紐づく秘密鍵がインポートされたことを確認してください。両方の秘密鍵は同じものであることを確認してください。
Copyright © NIFTY Corporation All Rights Reserved. 50
③ プッシュ通知を利用する準備( iOS )
キーチェーンアクセスの証明書の項目の「 Apple Development iOS Push Services: ******* 」を右クリックして「書き出す」を選択してください。
Copyright © NIFTY Corporation All Rights Reserved. 51
③ プッシュ通知を利用する準備( iOS )
P12 形式で保存先を決めると、パスワードを求められます。パスワードは入力しないで OK を押してください。
Copyright © NIFTY Corporation All Rights Reserved. 52
③ プッシュ通知を利用する準備( iOS )
ここまでの作業でお手元に5つのファイルがあれば OK です。※monaca からの証明書エクスポートが不要な方は4つ
CSR
Monaca からエクスポートしたビルド用証明書
※Monaca からエクスポートした方のみ
Apple の開発者サイトからダウンロードしたプロビジョニング
プロファイル
Apple の開発者サイトからダウンロードした
APNs 用証明書 (cer)
キーチェーンアクセスから書き出した
APNs 用証明書 (p12)
Copyright © NIFTY Corporation All Rights Reserved. 53
チェックポイント!(プッシュ通知を使う準備)
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. 55
④mobile backend でプッシュ通知機能を利用する準備
APNs 証明書と GCM の API キーをmobile backend に設定します。
RSS リーダーを作ったときのアプリを選択して、アプリ設定の「プッシュ通知」を選択。
Copyright © NIFTY Corporation All Rights Reserved. 56
④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. 58
⑤Monaca で作ったアプリにプラグインを組み込む
Monaca にログインして、RSS リーダープロジェクトを開きます
Copyright © NIFTY Corporation All Rights Reserved. 59
⑤Monaca で作ったアプリにプラグインを組み込む
上部メニューの「設定」から、「 Cordova プラグインの管理」を選択
Copyright © NIFTY Corporation All Rights Reserved. 60
⑤Monaca で作ったアプリにプラグインを組み込む
リストの下の方に「 NiftyMB 」というプラグインがあるので「有効」にしてください。↓のようになれば OK です。
Copyright © NIFTY Corporation All Rights Reserved. 61
⑤Monaca で作ったアプリにプラグインを組み込む
index.html を編集して配信端末(installation) の登録処理をできるようにします。
index.html のhead タグ内のscript タグの内側に追記。
installation の保存に必要なdeviceToken の取得には
プラグイン内部のネイティブコードが必要です。
ネイティブコードの準備が完了したdeviceready イベント発火後に取得/保存の処理を行います。
Copyright © NIFTY Corporation All Rights Reserved. 62
⑤Monaca で作ったアプリにプラグインを組み込む
index.html を編集して配信端末(installation) の登録処理をできるようにします。
deviceready イベント発火時のリスナー関数で、NCMB プラグインの setDeviceToken関数を呼び出します。
この関数は deviceToken の取得と mobile backend への登録を行います。
※3 つの引数は次のステップで解説します
Copyright © NIFTY Corporation All Rights Reserved. 63
⑤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. 65
⑥動作確認 〜アプリのビルド〜
ビルド設定 ( for Android )ビルド手順 ( for Android )ビルド設定 ( for iOS )ビルド手順 ( for iOS )動作確認
ここから先は確認端末に応じて必要な部分を実施してください。
Copyright © NIFTY Corporation All Rights Reserved. 66
⑥動作確認 〜ビルド設定( for Android )〜
Android の方
動作確認だけであれば特に設定は必要ありません。
ストアに提出する場合は Monaca のドキュメントを参考にしてください。
Copyright © NIFTY Corporation All Rights Reserved. 67
⑥動作確認 〜ビルド手順( for Android )〜
上部メニューの「ビルド」から、「 Android アプリのビルド」を選択
Copyright © NIFTY Corporation All Rights Reserved. 68
⑥動作確認 〜ビルド手順( for Android )〜
デバッグビルドを選択
Copyright © NIFTY Corporation All Rights Reserved. 69
⑥動作確認 〜ビルド手順( for Android )〜
少々お待ちください…
Copyright © NIFTY Corporation All Rights Reserved. 70
⑥動作確認 〜ビルド手順( for Android )〜
任意の方法で端末へ転送してください
Copyright © NIFTY Corporation All Rights Reserved. 71
⑥動作確認 〜ビルド設定( for iOS )〜
mobile backend に設定した APNs 証明書がDevelopment か Production かを確認して、適切なビルドを行ってください
Development の場合はデバッグビルド Production の場合はアドホックビルド
ビルド用の証明書と秘密鍵の組み合わせが正しくなるよう設定してください
Monaca の iOS アプリ設定の AppID は APNs 証明書と一致させてください
プロビジョニングプロファイルの AppID は APNs 証明書と一致させてください
iOS の方 ビルドに関する設定が必要です。
Copyright © NIFTY Corporation All Rights Reserved. 72
⑥動作確認 〜ビルド設定( for iOS )〜
iOS の方 ビルドに関する設定が必要です。
上部メニューの「設定」から、「 iOS アプリ設定」を選択
Copyright © NIFTY Corporation All Rights Reserved. 73
⑥動作確認 〜ビルド設定( for iOS )〜
iOS の方 ビルドに関する設定が必要です。
App ID に、前半で作成した証明書に設定したものと同じID を設定してください。
Copyright © NIFTY Corporation All Rights Reserved. 74
⑥動作確認 〜ビルド設定( for iOS )〜
iOS の方 ビルドに関する設定が必要です。
上部メニューの「設定」から、「 iOS ビルド設定」を選択
Copyright © NIFTY Corporation All Rights Reserved. 75
⑥動作確認 〜ビルド設定( for iOS )〜
iOS の方 ビルドに関する設定が必要です。
必要に応じて秘密鍵をインポートしてください。 ※ビルド用証明書の秘密鍵を設定してください ※ Monaca 上で CSR+ 秘密鍵生成済みの場合は不要です ※すでに設定済みであれば改めて作業する必要はありません
Copyright © NIFTY Corporation All Rights Reserved. 76
⑥動作確認 〜ビルド設定( for iOS )〜
iOS の方 ビルドに関する設定が必要です。
ビルド用証明書を必要に応じてアップロードしてください。 ※すでに設定済みであれば改めて作業する必要はありません ※デバッグビルドの場合はデベロッパー証明書を、 アドホックビルドの場合はディストリビューション証明書を設定してください
Copyright © NIFTY Corporation All Rights Reserved. 77
⑥動作確認 〜ビルド手順( for iOS )〜
上部メニューの「ビルド」から、「 iOS アプリのビルド」を選択
Copyright © NIFTY Corporation All Rights Reserved. 78
⑥動作確認 〜ビルド手順( for iOS )〜
デバッグビルドを選択
Copyright © NIFTY Corporation All Rights Reserved. 79
⑥動作確認 〜ビルド手順( for iOS )〜
プロビジョニングプロファイルをアップロード
Copyright © NIFTY Corporation All Rights Reserved. 80
⑥動作確認 〜ビルド手順( for iOS )〜
少々お待ち下さい…
Copyright © NIFTY Corporation All Rights Reserved. 81
⑥動作確認 〜ビルド手順( for iOS )〜
クリックしてダウンロードしてください
Copyright © NIFTY Corporation All Rights Reserved. 82
⑥動作確認 〜ビルド手順( 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. 83
⑥動作確認 〜動作確認〜
端末上のアプリを起動してください。※ アプリでプッシュ通知の許可を求められた場合は許可してください※mobile backend の管理画面上で「データストア> installation クラス」に オブジェクトが増えていれば端末登録成功です※ 端末登録が上手くいかない場合は、アプリを再起動してみてください
Copyright © NIFTY Corporation All Rights Reserved. 84
⑥動作確認 〜動作確認〜
プッシュ通知の「+新しいプッシュ通知」を選択。
Copyright © NIFTY Corporation All Rights Reserved. 85
⑥動作確認 〜動作確認〜
メッセージに送りたい文字列を
入力
Copyright © NIFTY Corporation All Rights Reserved. 86
⑥動作確認 〜動作確認〜
Android 端末に配信する
iOS 端末に配信する
プッシュ通知を作成して少々お待ちください…
Copyright © NIFTY Corporation All Rights Reserved. 87
⑥動作確認 〜動作確認〜
mobile backend 上のプッシュ通知の配信ステータスが「配信済み」になり、端末にプッシュ通知が届きます。
Copyright © NIFTY Corporation All Rights Reserved. 88
プラグインのその他の機能と注意点
プラグインのその他の機能 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 )
アプリの処理タイミングによっては端末登録に失敗することがありますが、アプリ起動のたびに端末登録を試行します
Copyright © NIFTY Corporation All Rights Reserved. 89