こんにちは。ニフティクラウド mobile backend（NCMB）エヴァンジェリストです。
この記事では、スマートフォンアプリの必須機能とさえ言えるプッシュ通知を簡単に実装できる、ニフティクラウド mobile backendの使い方を紹介します。
iOS、Androidで実装方法が異なりますので、今回はiOSについて紹介します。
必要なもの
まず以下のサービスへの登録が必要になります。
- ニフティクラウド mobile backendのアカウント（無料）
- Monacaのアカウント（無料）
- iOS Dev Centerのアカウント（有料）
Monacaとニフティクラウド mobile backendはサービス連携しているので、Monacaの無料ユーザであってもプッシュ通知機能を利用することが可能です。
ただし、プッシュ通知を送る際にはアプリをビルドしてインストールする必要があるので、Appleの開発者ライセンスは必要です。
Appleの開発者ライセンスを取得したら、プッシュ通知の証明書やプロビジョニングプロファイルは取得しておいてください。
ここでは省略しますが、プッシュ通知 (iOS) : 基本的な使い方 を参考にしてもらうと早いと思います。
ニフティクラウド mobile backendでアプリを作成
まずニフティクラウド mobile backend側での作業になります。管理画面にて新規アプリ作成を選択します。
作成するとアプリケーションキーとクライアントキーが表示されます。これをコピーしておきます。
OKボタンの押してダッシュボードに入ったら、右上のアプリ設定をクリックします（画像中、矢印のあるところ）。
［アプリ設定］内の［プッシュ通知］画面にて、「プッシュ通知の許可」を「許可する」に設定します（画像中、上にある矢印）。
また、プッシュ通知に用いる証明書をアップロードしておきます（画像中、下の矢印）。
この時アップロードする証明書の作り方は チュートリアル (iOS) : mBaaSとAPNsの連携に必要な設定 の「証明書を.p12形式に変換する」を参考にしてください。
Monacaでプロジェクトを作成
次はMonacaでの作業になります。既存のプロジェクトを使うか、新規でプロジェクトを立ち上げます。
どのテンプレートを利用しても構いませんが、今回はOnsen UIのテンプレートを使っています。
プロジェクトを作成したら、開くボタンを押してMonaca IDEを立ち上げます。
NCMBプラグインのインストール
Monaca IDEが開いたら、［設定］メニューの［Cordovaプラグインの管理］を選択します。
Cordovaプラグイン一覧が開いたら、その中にある NCMB を有効にしてください。
アプリの設定
続いてMonaca IDEでアプリの設定を行います。［アプリ設定］画面のApp ID欄に、iOS Dev Centerで設定したプッシュ通知を受信するApp IDを入力します。
HTMLコードの修正
index.htmlの script タグ内に、以下のJavaScriptのコードを記述します。
プッシュ通知を受け取ると、コールバック関数 window.NCMB.monaca.setHandler が実行されます。
YOUR_APPLICATION_KEY と YOUR_CLIENT_KEY をそれぞれニフティクラウド mobile backendでアプリを作成した時のものに置き換えてください。
（YOUR_SENDER_ID はAndroidにプッシュ通知を送る際に必要な設定ですので、今回は説明を省きます）
ons.ready(function() {
// プッシュ通知受信時のコールバックを登録します
window.NCMB.monaca.setHandler(
function(jsonData){
alert("callback :::" + JSON.stringify(jsonData));
}
);
// デバイストークンを取得してinstallation登録が行われます
window.NCMB.monaca.setDeviceToken(
"YOUR_APPLICATION_KEY",
"YOUR_CLIENT_KEY",
"YOUR_SENDER_ID"
);
});
これで準備は完了です。
アプリのビルドとインストール
ではアプリをビルドします。まずはあらかじめ作成しておいた証明書やプロビジョニングプロファイルをアップロードします。
そしてビルドを実行します。
問題なければアプリをダウンロード、または実機でQRコードを読み込んでアプリをインストールします。
iOS端末でQRコードを読み込んだ際に表示される画面です。
「Install」をタップすると確認ダイアログが出ます。
アプリの起動
アプリを起動するとプッシュ通知を受信するかアラートが出ます。「許可」をタップします。
今回はアプリの画面は作っていませんので、起動すると空白の画面が表示されるだけです。
起動時に先ほどindex.htmlに記述した window.NCMB.monaca.setDeviceToken が実行されて、ニフティクラウド mobile backendに端末が登録されます。
ニフティクラウド mobile backendの管理画面を見ると、データストアのInstallationにデバイストークンのデータが入っているのが確認できるはずです。
これで送信準備が整いました。
プッシュ通知を作成する
後は管理画面のプッシュ通知作成画面より自由にプッシュ通知が飛ばせるようになります。
「iOS端末に配信する」を選択すると対象が1件になっているのが分かるはずです。
送信するとすぐにプッシュ通知がデバイスに届きます。
そのプッシュ通知を開くと、JSONデータ（Payload）が受信できているのが分かるはずです。
後はこのデータに応じて表示処理を変えたり、追加データの取得を行うと言った形でカスタマイズできます。
いかがでしょうか。iOS Dev Centerでの
- Certificate
- App ID
- Provisioning Profile
の作成さえ終わっていれば、Monaca側ではNCMBプラグインのインストールとデバイストークン取得のコードを書き加えるだけでプッシュ通知機能の実装が完了します。
アプリにさらなる魅力を加えるためにもぜひプッシュ通知を追加してみてください！プッシュ通知のチュートリアルもご用意していますのでそちらもあわせてご確認ください。