2019/03/06更新
- ニフクラ mobile backendの『プッシュ通知』機能を実装したサンプルプロジェクトです
- 簡単な操作ですぐに ニフクラ mobile backendの機能を体験いただけます★☆
スマートフォンアプリのバックエンド機能(プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト)が開発不要、しかも基本無料(注1)で使えるクラウドサービス!
注1:詳しくはこちらをご覧ください
- Monaca 会員登録
- 下記リンクより登録(無料)をお願いします
https://ja.monaca.io/
- 下記リンクより登録(無料)をお願いします
- ニフクラ mobile backend 会員登録
- 下記リンクより登録(無料)をお願いします
https://mbaas.nifcloud.com/
- 下記リンクより登録(無料)をお願いします
- 推奨ブラウザ環境の準備
- Chrome最新版
- PC
- Googleアカウント
- Android端末(最新バージョン推奨)
- Mac(キーチェーンアクセスを利用)
- Apple Developer Program (有償)アカウント
- 別の Mac で使用しているアカウントの場合、発行する証明書に秘密鍵を紐付けることができません。ただし、アカウントを使用している Mac から秘密鍵を書き出して、今回使用するMacに送ることで作業は可能です
- iOS 端末(最新バージョン推奨)
- Lightning ケーブル(端末の UDID を調べるために必要です)
ニフクラ mobile backend のプッシュ通知は、各プラットフォームが提供している通知サービスを利用しています。
Androidの通知サービス FCM(Firebase Cloud Messaging)
- FCM は GCM (Google Cloud Messaging)の新バージョンです。既に GCM にてプロジェクトの作成・ GCM の有効化設定を終えている場合は、継続してご利用いただくことが可能です。新規で GCM をご利用いただくことはできませんので、あらかじめご了承ください。
iOSの通知サービス APNs(Apple Push Notification Service)
- 上図のように、アプリ(Monaca)・サーバー(ニフクラ mobile backend)・通知サービス(FCMあるいはAPNs)の間で認証が必要になります
- 認証に必要な鍵や証明書の作成は作業手順の「0.プッシュ通知機能を使うための準備」で行います
動作確認を行う端末に応じて該当する内容を準備してください
- Firebaseプロジェクトを作成していただいたあと、下記設定を行っていただく必要があります。
- APIキーの取得※2019年3月19日以降廃止
- google-service.jsonをアプリに配置
- Firebaseプロジェクトの秘密鍵をmobile backendにアップロード
- 下記リンク先のドキュメントを参考に、FCM プロジェクトの作成と、APIキー・google-services.json・秘密鍵の取得と設定を行ってください
Firebaseプロジェクトの作成とAPIキーの取得についてはこちら
google-services.jsonとFirebase秘密鍵の設定方法についてはこちら
- 上記のドキュメントをご覧の上、必要な証明書類の作成をお願いします
- 証明書の作成にはApple Developer Programの登録(有料)が必要です
- ニフクラ mobile backend にログインします
https://mbaas.nifcloud.com/
- 新しいアプリを作成します
- アプリ名を入力し、「新規作成」をクリックします
- 例)PushDemo
- mobile backend を既に使用したことがある場合は、画面上方のメニューバーにある「+新しいアプリ」をクリックすると同じ画面が表示されます
- アプリ作成されると下図のような画面になります
- この2種類のAPIキー(アプリケーションキーとクライアントキー)は、この後 Monaca で作成するアプリとの連携のために使用します
- 続けて、「 0. プッシュ通知機能を使うための準備 」で動作確認端末別に作成した認証キーまたは証明書を設定します
※下記画像は、2019/03/06時点での管理画面画像となります。
- mobile backend 側の準備は以上です
- Monacaにログインをします
https://ja.monaca.io/
- プロジェクトを作成します
- プロジェクト名を入力します
- 説明は空欄でOKです
- インポート方法は「URLを指定してインポート」を選択し、下記リンクを 右クリック してURLをコピーしたものを貼り付けてください
https://github.com/NIFCloud-mbaas/MonacaPushApp/archive/master.zip
- 作成されたプロジェクトを「開く」をクリックして開きます
- 作成した Monaca プロジェクトに mobile bakcend で発行した APIキー を設定して連携します
www/index.html
を編集します- Monacaでプロジェクトを開くとデフォルトで表示されるファイルです
- 中ほどにある、
YOUR_NCMB_APPLICATION_KEY
とYOUR_NCMB_CLIENT_KEY
の部分を、先程 mobile backend のダッシュボード上で確認した APIキーに書き換えます
- このとき、ダブルクォーテーション(
"
)を消さないように注意してください!
- 書き換え終わったら「保存」をクリックして保存をします
- メニューバーの「保存」をクリックします
- Windowsの場合は、「Ctrl + S」でも保存可能
- Macの場合は、「Command + S」でも保存可能
- これで Monaca プロジェクトと mobile backend が連携されました!準備は完了です◎
- 動作確認を行う端末に応じて、該当する作業を行ってください
- 「ビルド」>「Androidアプリのビルド」をクリックします
- デフォルト設定(「デバッグ向けビルド」>「デバッグビルド」が選択されている状態)で画面下の「ビルドを開始する」ボタンをクリックします
- 別のタブでビルドが開始され、少し待つとビルドが完了します
- ビルド完了後の画面に表示されるいずれかの方法で、端末にアプリをインストールをしてください
- まず「設定」>「iOSアプリ設定...」をクリックします
- App ID を変更します
- App ID 作成時に設定した『 Bundle ID 』に書き換えます
- 画面下の「保存する」ボタンをクリックします
- 次に「設定」>「iOSビルド設定...」をクリックます
- 「秘密鍵と証明書のインポート」の「インポート」ボタンをクリックして、作成した『開発用証明書(秘密鍵.p12) 』を設定します
- 「証明書とプロファイル」の「プロファイルのアップロード」ボタンをクリックして、作成した『プロビジョニングプロファイル』を設定します
- 「ビルド」>「iOSアプリのビルド」をクリックします
- デフォルト設定(「デバッグ向けビルド」>「デバッグビルド」が選択されている状態)で画面下の「ビルドを開始する」ボタンをクリックします
- 別のタブでビルドが開始され、少し待つとビルドが完了します
- 下記のいずれかの方法で、端末にアプリをインストールをしてください
- iTunesを使う方法
- ダウンロードしたプロジェクト.ipaをドラッグ&ドロップ
- Xcodeを使う方法
- DeployGateを使う方法
- アカウント(無料)を取得し、ダウンロードしたプロジェクト.ipaをドラッグ&ドロップ
- https://deploygate.com/
- 端末でインストールしたアプリを起動します
- プッシュ通知の許可を求めるアラートが出たら、必ず許可してください(iOS端末のみ)
- 起動されたら時点で Android端末は レジスタレーションID が、iOS端末は デバイストークン が取得され、mobile backend に保存されます
- mobile backend のダッシュボードで「データストア」>「installation」クラスを確認してみましょう!
- 端末側で起動したアプリは一度閉じておきます
- 実際にプッシュ通知を送ってみましょう!
- mobile backend のダッシュボードで「プッシュ通知」>「+新しいプッシュ通知」をクリックします
- プッシュ通知のフォームが開かれます
- 必要な項目を入力してプッシュ通知を作成します
- 端末を確認しましょう!
- 少し待つとプッシュ通知が届きます!!!
サンプルプロジェクトに実装済みの内容のご紹介
- Monacaで「設定」>「Cordvaプラグインの管理...」を開きます
- プッシュ通知をアプリに実装する場合は以下のプラグインを有効にします
index.html
の<script></script>
タグ内にデバイストークンを取得し、ニフクラ mobile backendに保存するロジックを書いています
document.addEventListener("deviceready", function(){
// デバイストークンを取得してinstallationに登録する
window.NCMB.monaca.setDeviceToken(
"YOUR_NCMB_APPLICATION_KEY",
"YOUR_NCMB_CLIENT_KEY",
"YOUR_FCM_SENDER_ID"
);
},false);
- 「
YOUR_NCMB_APPLICATION_KEY
」、「YOUR_NCMB_CLIENT_KEY
」はmobile backendのダッシュボードのアプリケーションキー、クライアントキーにそれぞれ書き換えてください - Android端末で動作確認を行う場合は、「
YOUR_FCM_SENDER_ID
」をFCMでプロジェクト作成時に発行されたSenderID(送信者ID)に書き換えてください