アプリのアクティブ率を高めたり、キャンペーンなどを活性化するためにはプッシュ通知機能が欠かせません。それはMonacaアプリについても同様で、アプリを開発したら、次に欲しくなる機能にプッシュ通知があがってくるはずです。
とはいえスマートフォンの中だけに留まっていたアプリ開発が、プッシュ通知になるとデバイストークンの管理やプッシュ通知の作成などサーバサイドの開発が必要になってしまいます。そこでmobile backendを使って手軽に素早くプッシュ通知機能を追加しましょう。
- 必要なもの
- mobile backendでアプリを作成
- Monacaでプロジェクトを作成
- NMCB Pushプラグインのインストール
- アプリの設定
- アプリビルド設定
- HTMLコードの修正
- iOSアプリのビルド
- アプリの起動
- プッシュ通知の受信
- さいごに
必要なもの
- mobile backendのアカウント(無料)
- Monacaのアカウント(無料)
- iOS Dev Centerのアカウント(有料)
プッシュ通知はビルドしたアプリでしか確認できませんので、iOS Dev Centerのアカウントおよび証明書、App ID、プロビジョニングファイルが必要になります。
mobile backendでアプリを作成
まずmobile backend側での作業になります。管理画面にて新規アプリ作成を選択します。
Monacaでプロジェクトを作成
今回は最もシンプルなHello Worldアプリを使います。Monacaのダッシュボードよりプロジェクトの作成を選んで、さらにHello Worldアプリの選択ボタンを押してください。
NMCB Pushプラグインのインストール
Monaca IDE(上の画像参照)が開いたら、設定メニューのCordovaプラグインの管理を選択します。
アプリの設定
続いてMonaca IDEでアプリの設定を行います。今回はiOSアプリに対してプッシュ通知を飛ばしてみます。設定メニューのiOSアプリ設定を選択します。
アプリビルド設定
プッシュ通知はビルドしたアプリでしか確認できません。予め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アプリのビルドを選択します。
アプリの起動
アプリをインストールして起動すると、初回にプッシュ通知の確認ダイアログが表示されます。
プッシュ通知の受信
プッシュ通知を受信してアプリを開くと、次のハンドラーが呼ばれます。
// プッシュ通知受信時のコールバックを登録します window.NCMB.monaca.setHandler( function(jsonData){ // 送信時に指定したJSONが引数として渡されます alert("callback :::" + JSON.stringify(jsonData)); } );
後はこのデータに応じて表示処理を変えたり、データの取得を行うと言った具合です。
さいごに
いかがでしょうか。iOS Dev Centerでの
- Certificate
- App ID
- Provisioning Profile
の作成さえ終わっていれば、Monaca側ではNCMB Pushプラグインのインストールとデバイストークン取得のコードを書き加えるだけで完了します。ぜひ作成したアプリにさらなる魅力を加えるためにもプッシュ通知を追加してください!