【monaca×mobile backend】プッシュ通知をカンタン実装！...

Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved

【Monaca×mobile backend】プッシュ通知をカンタン実装！スピード感ある開発をしよう！

ニフティ株式会社

120160602作成（20160615更新）

Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 2

後半ハンズオンセミナー

前半アプリにプッシュ通知が必要な

３つの理由とは

Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved

アプリにプッシュ通知が必要な３つの理由とは

3

Copyright @ NIFTY Corporation All Rights Reserved

色見本３

アプリの存在は忘れてしまうもの…

•１人が１ヶ月に１回以上起動するアプリの数

•１人が１ヶ月に10回以上起動するアプリの数

わずか9個

およそ27個

アクティブに使われる

アプリになるのは

とても大変！

4


色見本３

1. アプリの変化を伝える役割

•新しい機能を紹介やバージョンアップのお知らせ• オートアップデートが行われるのが当たり前になった今、新機能追加やバージョンアップがされても、そのままでは気づく手段がありません

5


色見本３

2. リマインダーとしての役割

•ユーザがあえて通知を受けたいアプリとは？？

•メッセージ系アプリ

•リマインダー系アプリ特定の決まった時間に

特定の場所に行ったときに

予定の10分前朝・昼・夜

A店の近くの人にセール情報

イベント開催時

Titlemessage

6


色見本３

3. アプリを立ち上げずに内容を把握させる役割

•メッセージ系アプリに望むことは？

メッセージの内容を通知に表示して欲しい！

…例えばLINEなどのアプリは「本文」が見えるのでアプリを開くかどうか、プッシュ通知の内容で選択ができる！

Titlemessage

急用！アプリ→返信

後で返信

7


色見本３

まとめると…

•プッシュ通知を使ってアプリを活性化できる！

•上手なプッシュ通知の提供方法は

1.ユーザの状況に合わせた

2.ジャストインタイムで

3.内容が適切であり

4.アプリに戻らずとも使えるもの！

Titlemessage

8


色見本３

プッシュ通知は必須！！！

•ユーザーへの通知手段としてプッシュ通知はなくてはならない存在に！

プッシュメールでは×！

9

ダメ

プッシュ通知は簡単に組み込めます！！！

Titlemessage

導入しない理由がない！


プッシュ通知を組み込むにはどうしたらいいだろう？？


色見本３

プッシュ通知の仕組み

サーバ

プッシュ通知

ここに

を使います！

11

サーバの準備が必要不可欠！！

プッシュ通知

iPhone

Android

プッシュ通知

初期コストサーバーの運用

APNs,GCMの仕様変更への対応大量配信の場合は配信ロジックのチューニング

mBaaSで解決！！


mBaaSって何？？


色見本３

ニフティクラウドmobile backend

スマートフォンアプリのバックエンド機能が

開発不要になるクラウドサービス

mBaaSって何？？

mobileBackend

as ＝ mBaaS !!aService

初期コストの削減サーバー運用の手間削減

アプリ開発がスピードアップ！！！

13


Monaca×mBaaSでプッシュ通知を組み込む方法とは...？？


色見本３

Monaca×ｍBaaSで簡単プッシュ通知！

Monacaでアプリを作ったアプリに

SDKを導入する

コードを追記する

たった

3行※iOSの場合

わずか半日で実装！実績あり！


色見本３

配信も簡単！

16

ダッシュボードから簡単配信！

タイトル・メッセージを

入力して即時配信！

こだわり配信も可能！しかも簡単！

• 配信時間指定！

• 配信端末選択！


色見本３

まとめ

•アプリにはプッシュ通知が必須！！•ユーザへの通知手段はもうメールじゃない！

•MonacaとmBaaSを使って

即プッシュ通知を実装可能！！配信可能！

•mBaaSを活用してアプリをもっと活性化！！•他の機能も使ってみよう！データストア、会員管理etc...

17

mBaaS 検索詳しくはこちら


ハンズオンセミナー

実際にアプリを作ってみましょう！

×PUSH!!


色見本３

本日体験していただく内容

プッシュ通知

プッシュ通知

iPhone

Android

プッシュ通知

Monacaで作ったアプリにプッシュ通知を組み込みます


色見本３

ハンズオンの流れ

①プッシュ通知の仕組みについて知る

②プッシュ通知機能を利用する準備をする

③mBaaSでプッシュ通知機能を利用する準備をする

④Monacaでアプリ作りプッシュ通知機能を組み込む

⑤動作確認！

20


色見本３


21

ニフティクラウドmobile backendのプッシュ通知は各プラットフォームが提供している通知サービスを利用しています

• Androidの通知サービス

•GCM（Google Cloud Messaging）

• iOSの通知サービス

•APNs（Apple Push Notification Service）


色見本３


22

Android

①プッシュ通知許可

④プッシュ通知⑤プッシュ通知GCM

APIキー

プロジェクトの作成GCM有効化設定

②レジスタレーションID発行

③レジスタレーションIDの登録

プロジェクト番号

APIキーの設定


色見本３


23

iOS

APNs用証明書(.p12)①プッシュ通知許可

⑤プッシュ通知

②デバイストークン発行

③デバイストークン登録

④プッシュ通知

BundleID

AppIDの作成(※)プロビジョニングプロファイルの作成(※)

APNs用証明書の作成

APNs用証明書をp12形式で書き出す

(※)…事前準備で作成済みの内容です

APIキーの設定


色見本３

24


Android

• Googleアカウントが必要です • Apple Developer Programアカウントが必要です（有償）

• 事前準備（ビルドできる状態）が完了している必要がありますhttp://goo.gl/8wISOm

スライド25へスライド30へ

作業の内容がそれぞれ違います

iOS

http://goo.gl/8wISOm


色見本３


25

Android Google Cloud Platform にログインしますhttps://console.cloud.google.com/

GCMのAPIキーの発行

プルダウンから｢プロジェクトの作成...｣

をクリック

プロジェクト名を入力して｢作成｣

をクリック

ここをクリック

https://console.cloud.google.com/


色見本３


26

Android


｢認証情報を作成｣をクリック

｢認証情報｣をクリック

｢APIキー｣をクリック

｢サーバーキー｣をクリック


色見本３


27

Android


｢作成｣をクリック

名前を編集(任意)

無記入

｢OK｣をクリック

APIキーが発行されました！

API Managerの認証情報でいつでも確認できます！

GCMAPIキー

※後で使用します


色見本３


28

Android

GCMのプロジェクトコードの確認

｢≡｣をクリック

｢ホーム｣をクリック

GCMプロジェクト番号

※後で使用します

クリック


色見本３


29

Android

GCMの有効化の設定

再び｢≡｣をクリック

｢API Manager｣をクリック

｢Google Cloud Messaging｣をクリック

｢有効にする｣をクリック

Android完了スライド40へ


色見本３


30

iOS

プロビジョニングプロファイルを書いたText

CSR※パターン１のみ

※パターン２のみ

事前準備の確認

ビルドに必要な証明書の準備はOKですか？

事前準備資料 http://goo.gl/8wISOm

事前準備で作成したファイル

☑ AppID作成時に「Push Notifications」にチェックを入れましたか？

☑ プロビジョニングプロファイル作成時に、正しくAppID・開発用証明書・動作確認で使用する端末を選択しましたか？

http://goo.gl/8wISOm


色見本３

どちらからでもOK


31

Apple Developer Programのメンバーセンターにログインしますhttps://developer.apple.com/account/

｢Certificates, Identifiers & Profiles｣

をクリック

Apple Developer Program

iOS


https://developer.apple.com/account/


色見本３


32


左側の「Certificates」＞「All」＞右上の「＋」をクリックします

「Apple Push Notification service

SSL (Sandbox)」をクリック

下の方の「Continue」をクリック

iOS



色見本３


33

「Continue」をクリック

「AppID」を選択する


｢Continue｣をクリック

iOS



色見本３


34

｢Choose File…」をクリックして

CSRファイルを選択｢Continue｣をクリック

Apple Developer ProgramiOS


注意：事前準備でビルドに使用したものと

同じものを選択してください！


色見本３


35


Download

「Done」をクリック

iOS

APNs用証明書の作成作成した証明書は移動して

おきましょう


色見本３


36

キーチェーンアクセス

作成した「APNs用証明書」をダブルクリックで開きます証明書は鍵がセットになっています

鍵ではなく

「証明書」で右クリック

します

iOS



色見本３


37


iOS


注意：p.12形式で保存先を決めると、パスワードを求められますが、

パスワードは入力しないでOKを押してください。

｢”---”を書き出す…｣をクリック


色見本３


38

書き出し

「パスワード」を入力して「許可」をクリック


iOS

作成した証明書.p12は移動して

おきましょう



色見本３


39

iOS

iOS完了スライド40へ

プロビジョニングプロファイルを書いたText

CSR※パターン１のみ

※パターン２のみ

確認

今回の作業で追加されたファイル

事前準備で作成したファイル


色見本３


40

http://mb.cloud.nifty.com/ または、mBaaS 検索

共通※利用登録がお済みでない方は「無料登録」からお願いします

http://mb.cloud.nifty.com/


色見本３

41

ログインまたは利用登録が終わるとアプリの新規作成画面が表示されるのでアプリ名を入力して「新規作成」をクリックします

「MonacaPushApp」と入力


mBaaSダッシュボード


色見本３

42

※ログイン後に、この画面が出た方は…

「+新しいアプリ」をクリックするとでてきます!




色見本３

アプリが作成されました！

２つのキーは

後で使います！

「OK」をクリックするとダッシュボードが表示されます

43




色見本３

後でAPIキーを確認するには…

「アプリ設定」を選択


ここにあります

44



色見本３


共通

Android

iOS

プッシュ通知プッシュ通知の許可→「許可する」を選択して「保存する」をクリック

Androidプッシュ通知APIキー→GCMのAPIキーを入力して「保存する」をクリック

iOSプッシュ通知証明書（.p12）→「証明書の選択」をクリックして証明書をアップロード

続けて「プッシュ通知」を開いて設定を行いますmBaaS

ダッシュボード


色見本３


46

https://ja.monaca.io/ または、 Monaca 検索

※利用登録がお済みでない方は「サインアップ」からお願いします共通

https://ja.monaca.io/


色見本３


47

「新規プロジェクトの作成」をクリック

MonacaAndroid


色見本３


48

「サンプルアプリ」タブをクリック

「作成」をクリック

スクロールすると出てきます↓

特に何も変更せず「プロジェクトを作成する」

をクリック

プロジェクトを開きます

Monaca

Android


色見本３


49

iOS

プロジェクトを開きます

事前準備で既に作成済みのプロジェクトを開きます


色見本３


50

Monacaプロジェクトが開かれます共通


色見本３


51

Monacaindex.htmlindex.htmlを編集して

配信端末(installation)の登録処理ができるようにします

共通

ここにコードを書きます

｢index.html｣タブをクリック


色見本３


52

Monacaindex.htmlindex.htmlを編集して

配信端末(installation)の登録処理ができるようにします

共通

※コピペ用ページからコピーして貼り付けてくださいhttps://goo.gl/GSjflF

https://goo.gl/GSjflF


色見本３


53

Monacaindex.html

共通

d

必ずコピーボタンを使ってください！

mBaaSダッシュボードmBaaSのAPIキーを設定する

「YOUR_NCMB_APPLICATIONKEY」「YOUR_NCMB_CLIENTKEY」はmobile backendのダッシュボードのアプリケーションキー、クライアントキーにそれぞれ書き換えてください！

「PROJECT_NUMBER(Android_only)」はGCMのプロジェクト番号に書き換えて

ください

Android


色見本３


54

こんな感じになっていればOKです[イメージ] Monacaindex.html

「保存」をクリックして保存をします


色見本３

55

⑤動作確認！

Android

• 特に準備は必要ありません • 事前準備で以下が設定済みであること☑ AppID(BundleID)の設定☑ デベロッパー証明書(開発用証明書)のアップ

ロード☑ プロビジョニングプロファイルの設定

スライド56へスライド58へ

作業の内容がそれぞれ違います

iOS

実機ビルド


色見本３

⑤動作確認！

56

Monaca「ビルド」＞「Androidアプリのビルド」をクリックして、Androidアプリケーションのビルドを開きます

Android

｢デバッグビルド｣を選択して

｢次へ｣をクリック


色見本３

⑤動作確認！

57

Monaca

Android 任意の方法で端末にインストールしてください

Android完了スライド60へ

ビルド完了！

少し待つと...


色見本３

⑤動作確認！

58

Monaca「ビルド」＞「iOSアプリのビルド」をクリックして、iOSアプリケーションのビルドを開きます

iOS

｢デバッグビルド｣を選択して

｢次へ｣をクリック


色見本３

⑤動作確認！

59

Monaca

任意の方法で端末にインストールしてください※インストール方法→https://goo.gl/GSjflF

iOS

ビルド完了！

そのまま｢次へ｣をクリック

※プロビジョニングプロファイルが設定されていなければ設定してください

少し待つと...

iOS完了スライド60へ




色見本３

⑤動作確認！

60

インストールしたアプリを起動しますプッシュ通知の許可を求めるアラートが出たら、必ず許可してください！

起動されたら

レジスタレーションIDデバイストークン取得完了です！

ちゃんと取得されたか確認しましょう

アプリを一度閉じます

iOS

Android


色見本３

⑤動作確認！

61

mBaaSの「データストア」の中にある「installation」クラスを開きます


ここに入りました！ここに登録された端末にプッシュ通知を送信することが

可能です


色見本３

⑤動作確認！

62

mBaaSダッシュボードプッシュ通知を

送りましょう！！「メッセージ」を

記入します

「プッシュ通知」クリックして

をクリック！

「iOS」or「Android」にチェックを入れる

「プッシュ通知を作成する」をクリック

すぐに端末を確認！


色見本３

⑤動作確認！

63

プッシュ通知を送りましょう！！結果例：

無事にプッシュ通知は届きましたか？？

プッシュ通知が受信されました★

ロック画面

スマホ起動時画面

通知画面

iOS


まとめ

☺プッシュ通知が必要な理由を学びました！

☺プッシュ通知の仕組みを学びました！

☺Monacaで作ったアプリに

プッシュ通知機能を実装しました！


色見本３

65

お願い

アンケートに@nifty IDをご記入ください

mBaaSのダッシュボードhttp://mb.cloud.nifty.com/右上の[ユーザー名]＞[アカウント設定]＞プロフィールから確認できます

アルファベット3桁＋数字5桁

★ハンズオンセミナーはいかがでしたでしょうか？

ぜひご感想をアンケートにお書きください。

また今後の「Swift×mBaaSハンズオンセミナー」

で扱って欲しいテーマなどありましたご記入ください。

★本日はご参加いただきありがとうございました！

http://mb.cloud.nifty.com/

【monaca×mobile backend】 プッシュ通知をカンタン実装！...

Education

【monaca×mobile backend】プッシュ通知をカンタン実装！...