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

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

Monacaアプリにプッシュ通知を実装しよう!

さらなる発展的なMonacaアプリ開発を目指して

皆さんMonacaアプリの開発は進んでいますか?ある程度スマホアプリの開発をしているとどうしても追加したくなるのが「プッシュ通知」だと思います。このブログを読まれている皆様ならプッシュ通知の効用はご存知だと思いますが、われわれもプッシュ通知の大切さはいたるところでお話させていただいています。

http://www.slideshare.net/mobilebackend/3-50198555

本ブログではこのプッシュ通知をmBaaSを使って簡単に実装しようというものです。

mBaaSを使ったMonacaアプリでのプッシュ通知実装の流れ

MonacaでビルドしたAndroidアプリ・iOSアプリにプッシュ通知機能を実装する手順は下記のとおりです。

MonacaPush_Flow

Android・iOS、両プラットフォームにプッシュ通知を配信するにはそれぞれのプッシュ通知配信サービス「GCM」「APNs」と連携させる必要があります。連携には本来、自前のサーバー環境を用意して接続する必要があるのですが、mBaaSを利用するとその連携の手間も大幅に削減できます。 本ブログではmBaaSを利用した場合の「GCM」「APNs」との連携方法からご説明する資料に基づいて、プッシュ通知機能実装をご案内させていただきます。

http://www.slideshare.net/mobilebackend/monacambaas

Androidアプリへのプッシュ通知

MonacaでビルドしたAndroidアプリにプッシュ通知を送る時にはは下図のようにGoogle社が提供する「GCM」というサービスとスマホアプリ・mBaaSが連携をとる必要があります。

 

MonacaPush_GCM

APIキーの取得やGCMの有効化などが必要となります。その説明もP9~19に解説が書いてあります

iOSアプリのプッシュ通知の仕組み

iOSアプリにプッシュ通知を送る仕組みは下図のようにApple社が提供する「APNs」というサービスとスマホアプリ・mBaaSが連携をとる必要があります。連携をとるために証明書作成をはじめとする準備が必要だったり、実機でのデバッグビルドのためのAppleIDの取得が必要です。

MonacaPush_APNs

なかなか複雑でかつ量も多いです。そこで・・・ P20~P52にその方法をまとめて説明しました。

mBaaSを使ったプッシュ通知実装!

前置きがが大変長くなってしまいましたが、アプリいプッシュ通知を実装していきましょう! やることは大きく分けて二つ「mobile backendでプッシュ通知機能を利用する準備」「Monacaで作ったアプリにプラグインを組み込む」です。

「mobile backendでプッシュ通知機能を利用する準備」

mBaaSのコントロールパネルに設定を行い、「GCM」と「APNs」それぞれと連携する準備をします。

MonacaPush_APNs&GCM MonacaPush_APNs&GCM2

「Monacaで作ったアプリにプラグインを組み込む」

また、Monaceでビルドするアプリにプッシュ通知を受信するプラグインを導入します。

MonacaPush_Plugin

導入後、mBaaSのキーの設定などを行います。

MonacaPush_Key

このあと各環境に合わせてビルドを行えば、プッシュ通知の実装が行えます。

ちょっと難しかった方へ・・・

今回のプッシュ通知はmBaaSを使う上でも難しいところとなります。今回の内容が少し難しい場合は、簡単に始められるMonaca×mBaaSの資料、サンプルプロジェクト、ブログも準備していますのでそちらをご利用ください!

http://www.slideshare.net/mobilebackend/monaca-datastore-demo

サンプルプロジェクト