ニフティクラウド mobile backendではiOS/Android/JavaScript向けにSDKをリリースしています。そしてHTML5を使ってiOS/Android双方で動作するアプリを開発できるMonacaではJavaScript SDKを使ってニフティクラウド mobile backendと連携できるようになっています。
このJavaScript SDKでは基本的なニフティクラウド mobile backendの操作ができるのですが、プッシュ周りのサポートは行われていませんでした。このたび、プッシュ通知の許可を得たり、プッシュ通知を解析して任意の処理を行えるプラグインをリリースしました。そこでこの記事ではニフティクラウド mobile backend × Monacaでどのようにプッシュ通知を行うか、手順を追って説明したいと思います。
必要なもの
まず最低限必要になるものを挙げます。
ニフティクラウド mobile backendのアカウント
当サービスのアカウントです（無料）。こちらの記事を参考にアカウントを作成してください。
Monacaの有料アカウント
Monacaのアカウントが必要です。ただしCordovaプラグインのインポートには Professional 以上のプランに入っている必要があります。月額5,000円ですが、14日間のトライアルが可能です。
iOS Developer Programアカウント
今回はiOSのプッシュ通知を行います。そのためiOS Developerになっている必要があります（有料）。
Mac OSX
キーチェーンアクセスなどを操作しますので必要です。
証明書周りの準備
ではまずはiOS周りの証明書を作成していきたいと思います。メンバーセンターにアクセスします。
まずは App IDsのタブを開いて、+ボタンをクリックします。
次にCertificatesタブを開きます。ここではプッシュに必要な証明書の取得と、Monacaでアプリをビルドするのに必要な証明書の取得を行います。
最後に Provisioning Profile を作成します。 Provisioning Profiles タブを開いて + ボタンをクリックします。
ニフティクラウド mobile backend でアプリを作成
次にニフティクラウド mobile backend で新しいアプリを作成します。管理コンソールにログインしたら、左側のメニューで 新しいアプリ を選択します。
プッシュ通知受信用Cordovaプラグインのダウンロード
JavaScript SDKダウンロードページへ行き、プラグインをダウンロードします。Zipファイルですが、解凍する必要はありません。
Monaca でアプリを作成
続いて Monacaでの作業になります。ログインしてダッシュボードを開きます。
ニフティクラウド mobile backendのプラグインを登録します。再掲になりますが、Cordovaプラグインが使えるのは Professional以上の有料プランのみになります。
設定メニュー > Cordovaプラグインの管理を選択します。
続けて iOSビルド設定を行います。設定メニュー > iOSビルド設定を選択します。
キーチェーンアクセスで秘密鍵を作成
キーチェーンアクセスアプリを立ち上げます。証明書の中にある iPhone Developerの証明書の中にある秘密鍵を右クリックして、書き出すを選択します。
秘密鍵を登録
秘密鍵を書き出せたら、Monacaの画面に戻ってインポートボタンをクリックします。この時、先ほど保護するために登録したパスワードを入力します。秘密鍵は今書き出したものを指定してください。
デベロッパー証明書を登録
先ほど Member Center でダウンロードした、iOS Developmentの証明書をアップロードします。デフォルトの場合 aps_development.cer といったファイル名になっています。デベロッパー証明書のアップロードボタンをクリックしてファイルを指定します。
iOS アプリ設定
さらにiOSアプリの設定を変更します。設定メニューのiOSアプリ設定を開きます。
HTMLファイルの修正
Monaca IDEの左側にあるファイルリストから index.html を選択します。そして内容が表示されたら、<script>〜</script> の内容を次のように変更します。
<script>
window.addEventListener("load",function()
{
// プッシュ通知受信時のコールバックを登録
window.NCMB.monaca.setHandler
(
function(jsonData){
// 送信時に指定したJSONが引数として渡されます
alert("callback :::" + JSON.stringify(jsonData));
}
);
document.addEventListener("deviceready", function()
{
// デバイストークンを取得してinstallation登録
// * application_key, client_keyはニフティクラウドmobile backendから発行されたキーに置き換える
// * sender_idはGCMとの連携に必要な準備で取得したIDに置き換える
window.NCMB.monaca.setDeviceToken(
"#####application_key#####",
"#####client_key#####",
"#####sender_id#####"
);
}, false);
},false);
</script>
Testflightを使った例
例えばTestflightを使った例です。細かくは説明しませんが、既に使ったことがある方であれば分かるかと思います。そうでない場合はiTunesを使うのが早いかと思います。
アプリ実行
アプリを実機にインストールしたら、立ち上げてみましょう。初回にはプッシュ通知を行っていいか確認のダイアログが出ます。ここはOKを選択します。
ニフティクラウド mobile backendでプッシュを送信する
アプリでプッシュ通知を許可すると、ニフティクラウド mobile backendのデータストア、Installationクラスにデバイストークンが登録されます。
キーチェーンアクセスで証明書を作成する
先ほど Member CenterのCertificatesでプッシュ通知の証明書をダウンロードしているはずです。デフォルトでは aps_development.cer といった名前かと思います。このファイルを開くと、キーチェーンアクセスに証明書として登録されます。
ニフティクラウド mobile backendへのアップロード
秘密鍵を書き出したら、iOSプッシュ通知の証明書として指定します。ファイルを指定したら、アップロードボタンを押します。
プッシュ通知を作成する
プッシュ通知タブを開いて、新しいプッシュ通知ボタンをクリックします。
アプリで受信
作成されたプッシュ通知は少し待つとアプリ側で受信されます。
window.NCMB.monaca.setHandler(
function(data){
alert("test::" + data);
}
);
のように設定されているからです。setHandlerが呼び出されますので、後はdataを解析すればメッセージを活かしたり、別な画面に遷移させることも可能になります。
いかがだったでしょうか。Monacaアプリにおいてもニフティクラウド mobile backend を通じたプッシュ通知が可能になります。ぜひプロモーションやイベント通知などに活かしてください！
