ニフクラmBaaSお役立ちブログ

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

Monacaアプリ開発!mBaaSでアプリにプッシュ通知を組み込もう!

こんにちは!新入社員の平出です!

皆さん、Swiftでアプリ開発してますか!?せっかく開発したアプリ、もっと多く使ってもらいたいですよね。その手段の一つとしてプッシュ通知があるのはご存知でしょうか?また、プッシュ通知は組み込んでみたいけど、実装が大変そうだなと思っていないでしょうか?そうした、メンドクサさを省いてくれるサービスがあるんです!それがニフティクラウドmobile backendというクラウドサービスです。今回はニフティクラウドmobile backendを使ってSwiftアプリへプッシュ通知を組み込むサンプルアプリを作りました。こちらを用いて、チュートリアル形式でプッュ通知の組み込みが体験できます!ぜひ、試してみてください!

ニフティクラウドmobile backendとは?

about_mBaaS ニフティクラウドmobile backendとは、mBaaS(mobile backend as a Service)と呼ばれるクラウドサービスで、スマートフォンアプリでよく利用される汎用的な機能をクラウドから提供するサービスです。

クラウド上に用意された機能をAPIで呼び出すだけで利用できるので、サーバー開発・運用不要でよりリッチなバックエンド機能をアプリに実装することができます。 ここからはニフティクラウドmobile backendではなくmBaaSと呼ばせていただきます。Monaca SDKも用意しており、Monacaからも簡単に利用できます。

今回の概要

monaca_push_overview

mBaaSのプッシュ通知は、各プラットフォームが提供している通知サービスを利用しています。上図のように、アプリ(Monaca)・サーバー(ニフティクラウドmobile backend)・通知サービス(GCM/FCMあるいはAPNs)の間で認証が必要になります。

以上を踏まえて、5つの手順で進めて行きたいと思います。

  1. 事前準備(GCM/FCMあるいはAPNsの設定)
  2. mBaaSでAPIキー取得
  3. サンプルプロジェクトにAPIキーを設定
  4. 動作確認

尚、事前にMonacaでの会員登録は済ませておいてください。それでは、早速始めましょう!

1.事前準備

GCM/FCMあるいはAPNsの設定に関しては下記の記事にそれぞれまとめています。

こちらをご覧になって、GCM/FCMあるいはAPNsの設定をお願いします!

2.mBaaSでAPIキー取得

まずはmBaaSの会員登録(無料)します。登録が完了してログインをすると、下図のように「アプリの新規作成」画面が出るのでアプリを作成します。

monaca_push_api

アプリを作成すると下図のような画面になります。この2種類のAPIキー(アプリケーションキーとクライアントキー)はMonacaで作成するアプリにmBaaSを紐付けるために使用します。

android_push_api

続いてプッシュ通知の設定も行いましょう。

monaca_push_api

3.サンプルプロジェクトにAPIキーを設定

まずはMonacaにログインしてサンプルプロジェクトをインポートする作業をします。「Import Project」をクリックしてプロジェクト名を入力します。(説明は空欄でOKです)

monaca_push_api2

インポート方法は「URLを指定してインポート」を選択し、サンプルプロジェクトのgithub画面でbuttonボタンをクリックして、さらにbutton2ボタンを右クリックしてURLをコピーしたものを貼り付けてください。

 

monaca_push_api3

作成されたプロジェクトを「開く」をクリックして開きます。

monaca_push_api4

「index.html」ファイルを開いて、先ほどmBaaSのダッシュボード上で確認したAPIキーを貼り付けます。Android端末で動作確認をする場合はプロジェクト番号も貼り付けます。

monaca_push_api5

それぞれ「YOUR_NCMB_APPLICATION_KEY」と「YOUR_NCMB_CLIENT_KEY」の部分を書き換えます。この時、ダブルクォーテーション(")を消さないように注意してください!書き換えたらファイルを保存しておきましょう。

monaca_push_api6

4.動作確認

実機ビルドをして動作確認を行います。ここからは端末に応じて該当する作業を行ってください。

Android端末で動作確認をする場合

  • 「ビルド」>「Androidアプリのビルド」をクリックして、Androidアプリケーションのビルドを開きます
  • 「デバッグビルド」を選択して「次へ」をクリックします
  • 少し待つとビルドが完了します
  • 任意の方法で端末にインストールをしてください

iOS端末で動作確認をする場合

  • 「設定」>「iOSビルド設定...」をクリックして、iOSビルド設定を開きます
  • ⑦開発用証明書(秘密鍵.p12)と②開発用み証明書(.cer)を設定します

monaca_push_check monaca_push_check2 monaca_push_check3

  • 「ビルド」>「iOSアプリのビルド」をクリックして、iOSアプリケーションのビルドを開きます
  • 「デバッグビルド」を選択して「次へ」をクリックします
  • 「参照...」をクリックして⑤で作成したプロビジョニングプロファイルを設定し、「次へ」をクリックします

monaca_push_check4

  • 少し待つとビルドが完了します
  • 任意の方法で端末にインストールをしてください
    • iTunesでダウンロードしたプロジェクト.ipaをドラッグ&ドロップ
    • Xcodeを使う方法
    • DeployGateでダウンロードしたプロジェクト.ipaをドラッグ&ドロップ

以上で実機ビルドは完了です。インストールしたアプリを起動して、プッシュ通知の許可を求めるアラートが出た場合は、必ず許可してください!起動されたら、この時点でAndroid端末はレジスタレーションID、iOS端末はデバイストークンが取得されます。mBaaSのダッシュボードで「データストア」>「installation」クラスを確認してみましょう!確認できたら、端末側で起動したアプリは一度閉じて起きます。

では、いよいよプッシュ通知を送りましょう!mBaaSのダッシュボードで「プッシュ通知」>「+新しいプッシュ通知」をクリックして、必要な項目を入力してプッシュ通知を作成しましょう!

monaca_push_check5

少し待つと端末にプッシュ通知が届きます!!

クーポン配信もお手の物

プッシュ通知の設定いかがだったでしょうか?mBaaSを使えば簡単に設定できることが分かっていただけたと思います!また、mBaaSではMonacaでクーポン配信も可能です!ぜひそちらもお試しください!最後までお読みいただきありがとうございました。

sample&tutrial