FJCT_ニフクラ mobile backend（mBaaS）お役立ちブログ

スマホアプリ開発にニフクラ mobile backend（mBaaS）。アプリ開発に役立つ情報をおとどけ！

簡単にできます！Monacaアプリにプッシュ通知を実装しよう

プッシュ通知 Monaca Tips

https://cdn-ak.f.st-hatena.com/images/fotolife/f/fjct/20171017/20171017165820.png

アプリのアクティブ率を高めたり、キャンペーンなどを活性化するためにはプッシュ通知機能が欠かせません。それはMonacaアプリについても同様で、アプリを開発したら、次に欲しくなる機能にプッシュ通知があがってくるはずです。

とはいえスマートフォンの中だけに留まっていたアプリ開発が、プッシュ通知になるとデバイストークンの管理やプッシュ通知の作成などサーバサイドの開発が必要になってしまいます。そこでmobile backendを使って手軽に素早くプッシュ通知機能を追加しましょう。

必要なもの

  • mobile backendのアカウント（無料）
  • Monacaのアカウント（無料）
  • iOS Dev Centerのアカウント（有料）

プッシュ通知はビルドしたアプリでしか確認できませんので、iOS Dev Centerのアカウントおよび証明書、App ID、プロビジョニングファイルが必要になります。

mobile backendでアプリを作成

まずmobile backend側での作業になります。管理画面にて新規アプリ作成を選択します。

作成するとアプリケーションキーとクライアントキーが表示されます。これを使いますのでコピーしておきます。

さらにアプリ設定のプッシュ通知にて、プッシュ通知の許可を許可するにしておきます。また、プッシュ通知に用いる証明書をアップロードしておきます。証明書の作成手順についてはチュートリアル (iOS) : APNsとの連携に必要な準備をご覧ください。

Monacaでプロジェクトを作成

今回は最もシンプルなHello Worldアプリを使います。Monacaのダッシュボードよりプロジェクトの作成を選んで、さらにHello Worldアプリの選択ボタンを押してください。

表示されるモーダルウィンドウで適当なプロジェクト名をつけます。今回はNCMB Pushとしています。

プロジェクトを作成したら、開くボタンを押してMonaca IDEを立ち上げます。

NMCB Pushプラグインのインストール

Monaca IDE（上の画像参照）が開いたら、設定メニューのCordovaプラグインの管理を選択します。

Cordovaプラグイン一覧が開いたら、その中にあるNiftyMBを有効にしてください。

アプリの設定

続いてMonaca IDEでアプリの設定を行います。今回はiOSアプリに対してプッシュ通知を飛ばしてみます。設定メニューのiOSアプリ設定を選択します。

そしてアプリ設定にてApp IDをプッシュ通知を受信するApp IDに合わせます。

アプリビルド設定

プッシュ通知はビルドしたアプリでしか確認できません。予めiOS Dev Centerにて秘密鍵の生成、開発者証明書を作成しておきます。そして、設定メニューのiOSビルドよりアップロードします。

HTMLコードの修正

今回はHTMLファイルだけを修正します。index.htmlの script タグの内容を次のようにします。

<script>
    // PhoneGap event handler
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
            // プッシュ通知受信時のコールバックを登録します
            window.NCMB.monaca.setHandler
            (
                function(jsonData){
                    // 送信時に指定したJSONが引数として渡されます 
                    alert("callback :::" + JSON.stringify(jsonData));
                }
            );

            // デバイストークンを取得してinstallation登録が行われます
            // ※ aplication_key,client_keyはニフティクラウドmobile backendから発行されたkeyに置き換えてください
            // ※ sender_idは【GCMとの連携に必要な準備】で作成したProjectのProject Numberを入力してください
            window.NCMB.monaca.setDeviceToken(
                 "APPLICATION_KEY",
                 "CLIENT_KEY",
                 "#####sender_id#####" 
            );
    }
</script>

window.NCMB.monaca.setHandler はプッシュ通知を受信した時のコールバック、 window.NCMB.monaca.setDeviceToken はデバイストークンの取得処理になります。APPLICATION_KEY、CLIENT_KEYをそれぞれニフティクラウド mobile backendの管理画面から取得できるアプリケーションキー、クライアントキーに置き換えてください。

iOSアプリのビルド

ではiOSアプリをビルドします。ビルドメニューよりiOSアプリのビルドを選択します。

ビルドのパターンは作成したプロビジョニングによって異なりますが、筆者はデバッグビルドを選択します。

プロビジョニングファイルをアップロードします。

ビルドが無事完了するとアプリがダウンロードできます。iTunesやDeployGateのようなサービスを使ってiOSにインストールしましょう。

アプリの起動

アプリをインストールして起動すると、初回にプッシュ通知の確認ダイアログが表示されます。

ここでOKを押すと、mobile backendの管理画面、データストアのinstallationクラスにデータが追加されます。

こうなれば完了です。後は管理画面のプッシュ作成画面より自由にプッシュ通知が飛ばせるようになります。

作成したプッシュ通知はアプリにて確認できます。

プッシュ通知の受信

プッシュ通知を受信してアプリを開くと、次のハンドラーが呼ばれます。

// プッシュ通知受信時のコールバックを登録します
window.NCMB.monaca.setHandler(
  function(jsonData){
    // 送信時に指定したJSONが引数として渡されます 
    alert("callback :::" + JSON.stringify(jsonData));
  }
);

後はこのデータに応じて表示処理を変えたり、データの取得を行うと言った具合です。

さいごに

いかがでしょうか。iOS Dev Centerでの

  • Certificate
  • App ID
  • Provisioning Profile

の作成さえ終わっていれば、Monaca側ではNCMB Pushプラグインのインストールとデバイストークン取得のコードを書き加えるだけで完了します。ぜひ作成したアプリにさらなる魅力を加えるためにもプッシュ通知を追加してください！

f:id:mbaasblog:20180927171608p:plain