Skip to content
No description, website, or topics provided.
JavaScript CSS
Branch: master
Clone or download
Pull request Compare This branch is 13 commits ahead, 2 commits behind natsumo:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.monaca
platforms/chrome
readme-img
res
www
README.md
config.xml
package.json ncmb_push_plugin v3.0.0 Sep 19, 2018

README.md

【Monaca】
アプリにプッシュ通知を組み込もう!

2019/03/06更新

画像1

概要

ニフクラ mobile backendとは

スマートフォンアプリのバックエンド機能(プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト)が開発不要、しかも基本無料(注1)で使えるクラウドサービス!

画像2

注1:詳しくはこちらをご覧ください

動作環境の準備

共通

  • Monaca 会員登録
  • ニフクラ mobile backend 会員登録
  • 推奨ブラウザ環境の準備
  • Chrome最新版

Android端末で動作確認をする場合

  • PC
  • Googleアカウント
  • Android端末(最新バージョン推奨)

iOS端末で動作確認をする場合

  • Mac(キーチェーンアクセスを利用)
  • Apple Developer Program (有償)アカウント
    • 別の Mac で使用しているアカウントの場合、発行する証明書に秘密鍵を紐付けることができません。ただし、アカウントを使用している Mac から秘密鍵を書き出して、今回使用するMacに送ることで作業は可能です
  • iOS 端末(最新バージョン推奨)
  • Lightning ケーブル(端末の UDID を調べるために必要です)

プッシュ通知の仕組み

ニフクラ mobile backend のプッシュ通知は、各プラットフォームが提供している通知サービスを利用しています。

Androidの通知サービス FCM(Firebase Cloud Messaging)

画像a1

  • FCM は GCM (Google Cloud Messaging)の新バージョンです。既に GCM にてプロジェクトの作成・ GCM の有効化設定を終えている場合は、継続してご利用いただくことが可能です。新規で GCM をご利用いただくことはできませんので、あらかじめご了承ください。

iOSの通知サービス APNs(Apple Push Notification Service)

画像i1

  • 上図のように、アプリ(Monaca)・サーバー(ニフクラ mobile backend)・通知サービス(FCMあるいはAPNs)の間で認証が必要になります
  • 認証に必要な鍵や証明書の作成は作業手順の「0.プッシュ通知機能を使うための準備」で行います

作業の手順

0. プッシュ通知機能を使うための準備

動作確認を行う端末に応じて該当する内容を準備してください

Android端末で動作確認をする場合

  • Firebaseプロジェクトを作成していただいたあと、下記設定を行っていただく必要があります。
    • APIキーの取得※2019年3月19日以降廃止
    • google-service.jsonをアプリに配置
    • Firebaseプロジェクトの秘密鍵をmobile backendにアップロード
  • 下記リンク先のドキュメントを参考に、FCM プロジェクトの作成と、APIキー・google-services.json・秘密鍵の取得と設定を行ってください

Firebaseプロジェクトの作成とAPIキーの取得についてはこちら
google-services.jsonとFirebase秘密鍵の設定方法についてはこちら

iOS端末で動作確認をする場合

iOS 端末で動作確認されるかたはこちら

  • 上記のドキュメントをご覧の上、必要な証明書類の作成をお願いします
  • 証明書の作成にはApple Developer Programの登録(有料)が必要です

画像i2

1. ニフクラ mobile backend の準備

画像3-1

  • 新しいアプリを作成します
  • アプリ名を入力し、「新規作成」をクリックします
    • 例)PushDemo

画像3-2

  • mobile backend を既に使用したことがある場合は、画面上方のメニューバーにある「+新しいアプリ」をクリックすると同じ画面が表示されます

画像3-3

  • アプリ作成されると下図のような画面になります
  • この2種類のAPIキー(アプリケーションキーとクライアントキー)は、この後 Monaca で作成するアプリとの連携のために使用します

画像4

  • 続けて、「 0. プッシュ通知機能を使うための準備 」で動作確認端末別に作成した認証キーまたは証明書を設定します
    ※下記画像は、2019/03/06時点での管理画面画像となります。

画像5

  • mobile backend 側の準備は以上です

2. Monaca でアプリの準備

画像8-1

  • プロジェクトを作成します

画像8-2

  • プロジェクト名を入力します
  • 説明は空欄でOKです
  • インポート方法は「URLを指定してインポート」を選択し、下記リンクを 右クリック してURLをコピーしたものを貼り付けてください
    • https://github.com/NIFCloud-mbaas/MonacaPushApp/archive/master.zip

画像9

  • 作成されたプロジェクトを「開く」をクリックして開きます

画像6

3. APIキーの設定

  • 作成した Monaca プロジェクトに mobile bakcend で発行した APIキー を設定して連携します
  • www/index.htmlを編集します
    • Monacaでプロジェクトを開くとデフォルトで表示されるファイルです
  • 中ほどにある、YOUR_NCMB_APPLICATION_KEYYOUR_NCMB_CLIENT_KEYの部分を、先程 mobile backend のダッシュボード上で確認した APIキーに書き換えます

画像7

  • このとき、ダブルクォーテーション(")を消さないように注意してください!
  • 書き換え終わったら「保存」をクリックして保存をします
    • メニューバーの「保存」をクリックします
    • Windowsの場合は、「Ctrl + S」でも保存可能
    • Macの場合は、「Command + S」でも保存可能

画像11

  • これで Monaca プロジェクトと mobile backend が連携されました!準備は完了です◎

4. 実機ビルド

  • 動作確認を行う端末に応じて、該当する作業を行ってください

Android端末で動作確認をする場合

  • 「ビルド」>「Androidアプリのビルド」をクリックします
  • デフォルト設定(「デバッグ向けビルド」>「デバッグビルド」が選択されている状態)で画面下の「ビルドを開始する」ボタンをクリックします
  • 別のタブでビルドが開始され、少し待つとビルドが完了します
  • ビルド完了後の画面に表示されるいずれかの方法で、端末にアプリをインストールをしてください

iOS端末で動作確認をする場合

  • まず「設定」>「iOSアプリ設定...」をクリックします
  • App ID を変更します
    • App ID 作成時に設定した『 Bundle ID 』に書き換えます

画像16

  • 画面下の「保存する」ボタンをクリックします
  • 次に「設定」>「iOSビルド設定...」をクリックます
  • 「秘密鍵と証明書のインポート」の「インポート」ボタンをクリックして、作成した『開発用証明書(秘密鍵.p12) 』を設定します

画像i30

  • 「証明書とプロファイル」の「プロファイルのアップロード」ボタンをクリックして、作成した『プロビジョニングプロファイル』を設定します

画像i33

  • 「ビルド」>「iOSアプリのビルド」をクリックします
  • デフォルト設定(「デバッグ向けビルド」>「デバッグビルド」が選択されている状態)で画面下の「ビルドを開始する」ボタンをクリックします
  • 別のタブでビルドが開始され、少し待つとビルドが完了します
  • 下記のいずれかの方法で、端末にアプリをインストールをしてください
iOSアプリのインストール方法
  1. iTunesを使う方法
  • ダウンロードしたプロジェクト.ipaをドラッグ&ドロップ
  1. Xcodeを使う方法
  1. DeployGateを使う方法
  • アカウント(無料)を取得し、ダウンロードしたプロジェクト.ipaをドラッグ&ドロップ
  • https://deploygate.com/

5. 動作確認

  • 端末でインストールしたアプリを起動します
  • プッシュ通知の許可を求めるアラートが出たら、必ず許可してください(iOS端末のみ)
  • 起動されたら時点で Android端末は レジスタレーションID が、iOS端末は デバイストークン が取得され、mobile backend に保存されます
  • mobile backend のダッシュボードで「データストア」>「installation」クラスを確認してみましょう!

画像12

  • 端末側で起動したアプリは一度閉じておきます

6. プッシュ通知を送りましょう!

  • 実際にプッシュ通知を送ってみましょう!
  • mobile backend のダッシュボードで「プッシュ通知」>「+新しいプッシュ通知」をクリックします
  • プッシュ通知のフォームが開かれます
  • 必要な項目を入力してプッシュ通知を作成します

画像13

  • 端末を確認しましょう!
  • 少し待つとプッシュ通知が届きます!!!

画像17

解説

サンプルプロジェクトに実装済みの内容のご紹介

Cordvaプラグインの設定

  • Monacaで「設定」>「Cordvaプラグインの管理...」を開きます
  • プッシュ通知をアプリに実装する場合は以下のプラグインを有効にします

画像15

ロジック

  • 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)に書き換えてください

参考

You can’t perform that action at this time.