ニフクラ mobile backend(mBaaS)お役立ちブログ

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

ついにリリース。Monacaアプリでプッシュ受信ができるプラグインを試す!

ニフティクラウド 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周りの証明書を作成していきたいと思います。メンバーセンターにアクセスします。

続いてiOSのDev Centerにアクセスします。

iOS Developer Program から Certificates, Identifiers & Profiles を開きます。

まずは App IDsのタブを開いて、+ボタンをクリックします。

Nameは適当でかまいませんが、今回はJsPushとしています。また、Explicit App IDのBudle IDは適切なもの(ドメイン名を逆に、最後にアプリ名)を指定してください。今回は com.nifty.cloud.mb.JsPush としています。

さらにApp Servicesとして Push Notifications をチェックするのを忘れないでください。

Continue ボタンを押すと、確認画面が表示されます。

問題がなければ下までスクロールして Submit ボタンを押します。

無事登録されました。

Certificatesの用意

次にCertificatesタブを開きます。ここではプッシュに必要な証明書の取得と、Monacaでアプリをビルドするのに必要な証明書の取得を行います。

+ボタンを押します。今回は開発版なので Development の Apple Push Notification service SSL (Sandbox)にチェックを入れます。そして次に進みます。

App IDは先ほど作成した App ID を選択します。次に進みます。

次のステップでCSRを求められますので準備しましょう。

キーチェーンアクセスを立ち上げて、メニューから キーチェーンアクセス > 証明書アシスタント > 認証局に証明書を要求… を選択します。

証明書アシスタントが立ち上がりますので、続けるをクリックします。

証明書情報として、Apple Developer Programに参加しているメールアドレス、名前を入力します。要求の処理はディスクに保存を選択し、鍵ペア情報を指定にチェックをします。続けるをクリックします。

保存場所を指定します。保存ボタンをクリックします。

鍵のサイズ、アルゴリズムはデフォルトのままです。2048ビット、RSAになっているかと思います。続けるをクリックします。

証明書が生成されて、指定した場所に保存されます。完了ボタンをクリックして、ウィンドウを閉じます。

先ほどのWebブラウザのCSR指定画面に戻ります。そして今作成した証明書をアップロードします。ファイルを指定したら Generate ボタンをクリックします。

無事証明書ができあがりましたので、Downloadボタンを押してダウンロードします。

再度 Certificates タブを開いて、iOS Developmentの証明書もダウンロードします。

Provisioning Profilesの作成

最後に Provisioning Profile を作成します。 Provisioning Profiles タブを開いて + ボタンをクリックします。

Developmentの iOS App Development を選択して、Continue ボタンをクリックします。

App ID は先ほど作成した App ID を選択します。Continue ボタンをクリックします。

Certificateは iOS Developmentを選択します。 Continue ボタンをクリックします。

デバイスを選択します。プッシュ通知は実機でしかテストできませんので、インストール対象のデバイスを選択してください。 Continue ボタンをクリックします。

プロファイルの名前を入力します。今回はJsPushとしています。Generate ボタンをクリックします。

無事プロファイルが作成できましたので、Download ボタンを押してダウンロードします。

ここまでで Member Center における作業は完了です。

ニフティクラウド mobile backend でアプリを作成

次にニフティクラウド mobile backend で新しいアプリを作成します。管理コンソールにログインしたら、左側のメニューで 新しいアプリ を選択します。

新しいアプリの名前を入力します。今回はJsPushとしています。新規作成ボタンをクリックします。

新しいアプリができました。ここでアプリケーションキーとクライアントキーをメモしておくか、この画面のまま残しておきましょう。

プッシュ通知受信用Cordovaプラグインのダウンロード

JavaScript SDKダウンロードページへ行き、プラグインをダウンロードします。Zipファイルですが、解凍する必要はありません。

Monaca でアプリを作成

続いて Monacaでの作業になります。ログインしてダッシュボードを開きます。

ダッシュボードを開いたら、プロジェクトの作成をクリックします。

右側にプロジェクトテンプレートが並びますので、最小限のテンプレートを選択します。

プロジェクト名を入力します。今回は NCMBプッシュ としました。

プロジェクトができあがったら、開くボタンを押します。

プロジェクトを開くとこのように表示されるかと思います。

プラグインを登録

ニフティクラウド mobile backendのプラグインを登録します。再掲になりますが、Cordovaプラグインが使えるのは Professional以上の有料プランのみになります。

設定メニュー > Cordovaプラグインの管理を選択します。

Cordovaプラグインのインポートを選択します。

出てきたダイアログで、先ほどダウンロードしたプッシュ通知受信用Cordovaプラグインを選択します(Zipファイルのまま)。

アップロードが無事完了すると、このようにNiftyMBというプラグインが登録されます。

iOSビルド設定

続けて iOSビルド設定を行います。設定メニュー > iOSビルド設定を選択します。

まず秘密鍵を登録します。インポートボタンを押すのですが、その前にキーチェーンアクセスで秘密鍵を出力します。

キーチェーンアクセスで秘密鍵を作成

キーチェーンアクセスアプリを立ち上げます。証明書の中にある iPhone Developerの証明書の中にある秘密鍵を右クリックして、書き出すを選択します。

保護するためのパスワードは必ず指定してください。

書き出す際にもパスワードを求められるので、こちらは自分のローカルパスワードを入力します。

ファイルはp12という拡張子で書き出されるはずです。

秘密鍵を登録

秘密鍵を書き出せたら、Monacaの画面に戻ってインポートボタンをクリックします。この時、先ほど保護するために登録したパスワードを入力します。秘密鍵は今書き出したものを指定してください。

アップロードが完了すると、登録されていますという表示になります。続けてデベロッパー証明書を登録します。

デベロッパー証明書を登録

先ほど Member Center でダウンロードした、iOS Developmentの証明書をアップロードします。デフォルトの場合 aps_development.cer といったファイル名になっています。デベロッパー証明書のアップロードボタンをクリックしてファイルを指定します。

iOS アプリ設定

さらにiOSアプリの設定を変更します。設定メニューのiOSアプリ設定を開きます。

プロダクト名、App IDを修正します。これは Member Centerで設定したものに合わせる必要があります。今回はプロダクト名は JsPush、App IDは com.nifty.cloud.mb.JsPush としています。

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>

ここで、#####application_key##### と #####client_key##### はニフティクラウド mobile backend でアプリ作成した際に生成されたものを指定してください。分からない場合は管理コンソールにアクセスして、アプリ設定の所に記載されています。

そしてビルドメニューから iOSアプリのビルド を選択します。

モーダルウィンドウが開くので、デバッグビルドを選択します。次へボタンをクリックします。

プロビジョニング選択が出るので、 Member Center でダウンロードしたプロビジョニングファイルを選択します。mobileprovision という拡張子がついています。

選択するとプロビジョニングの名前が表示されます。次へボタンをクリックします。

ビルドが開始されます。しばらく待ちます。

ビルドが完了しました。デバッグビルドではipaファイルがダウンロードされます。このファイルはiTunesを使って実機に転送するか、TestflightやDeployGateといったサービスを使って実機転送を行います。

Testflightを使った例

例えばTestflightを使った例です。細かくは説明しませんが、既に使ったことがある方であれば分かるかと思います。そうでない場合はiTunesを使うのが早いかと思います。

デバッグビルドの場合、Testflightでも証明書が求められます。Ignore and Continueボタンをクリックします。

アップロードが完了したら、Update Profileボタンをクリックします。

Provisioning ProfileはMember Centerでダウンロードした、mobileprovision という拡張子のファイルです。ファイルを指定したらUploadボタンをクリックします。

アップロードを行った後、Teammatesを選択してJust Updateボタンを押すと、インストール待ち画面になります。

アプリ実行

アプリを実機にインストールしたら、立ち上げてみましょう。初回にはプッシュ通知を行っていいか確認のダイアログが出ます。ここはOKを選択します。

ニフティクラウド mobile backendでプッシュを送信する

アプリでプッシュ通知を許可すると、ニフティクラウド mobile backendのデータストア、Installationクラスにデバイストークンが登録されます。

続けてアプリ設定のプッシュ通知を開きます。一番上にあるプッシュ通知の許可を許可するに設定して保存するボタンを押します。

ここで証明書をアップロードするのですが、まずはキーチェーンアクセスで証明書を出力する必要があります。

キーチェーンアクセスで証明書を作成する

先ほど Member CenterのCertificatesでプッシュ通知の証明書をダウンロードしているはずです。デフォルトでは aps_development.cer といった名前かと思います。このファイルを開くと、キーチェーンアクセスに証明書として登録されます。

その証明書を開いて、証明書だけを(秘密鍵は不要です)右クリックします。

〜を書き出す…を選択します。

今度は保護するためのパスワードは指定しないでください。

そしてp12の秘密鍵ファイルとして出力します。

ニフティクラウド mobile backendへのアップロード

秘密鍵を書き出したら、iOSプッシュ通知の証明書として指定します。ファイルを指定したら、アップロードボタンを押します。

アップロード完了すると次のような表示になります。

プッシュ通知を作成する

プッシュ通知タブを開いて、新しいプッシュ通知ボタンをクリックします。

今回はiOS向けなのでタイトルは不要です。メッセージを入力します。

iOS端末に配信するをチェックします。そしてプッシュ通知を作成するボタンをクリックします。

確認のダイアログが出るので、作成するボタンをクリックします。

そうするとプッシュが作成されて、少し待つと配信済みになります。

アプリで受信

作成されたプッシュ通知は少し待つとアプリ側で受信されます。

それを開くとMonacaアプリが立ち上がります。

このようなアラートが出るのは、Mocana側で記述したコードが

window.NCMB.monaca.setHandler(
  function(data){
    alert("test::" + data);
  }
);

のように設定されているからです。setHandlerが呼び出されますので、後はdataを解析すればメッセージを活かしたり、別な画面に遷移させることも可能になります。


いかがだったでしょうか。Monacaアプリにおいてもニフティクラウド mobile backend を通じたプッシュ通知が可能になります。ぜひプロモーションやイベント通知などに活かしてください!

f:id:mbaasblog:20180927104348p:plain