【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店の近くの人に
セール情報
イベント開催時
Title
message
6

色見本３
3. アプリを立ち上げずに内容を把握させる役割
• メッセージ系アプリに望むことは？
 メッセージの内容を通知に表示して欲しい！
…例えばLINEなどのアプリは「本文」が見えるのでアプリを開くかど
うか、プッシュ通知の内容で選択ができる！
Title
message
急用！
アプリ→返信
後で返信
7

色見本３
まとめると…
•プッシュ通知を使ってアプリを活性化できる！
•上手なプッシュ通知の提供方法は
1.ユーザの状況に合わせた
2.ジャストインタイムで
3.内容が適切であり
4.アプリに戻らずとも使えるもの！
Title
message
8

色見本３
プッシュ通知は必須！！！
• ユーザーへの通知手段としてプッシュ通知はなくては
ならない存在に！
プッシュメールでは×！
9
ダメ
プッシュ通知は
簡単に組み込めます！！！
Title
message
導入しない
理由がない！

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

色見本３
プッシュ通知の仕組み
サーバ
プッシュ通知
ここに
を使います！
11
サーバの準備が
必要不可欠！！
プッシュ通知
iPhone
Android
プッシュ通知
初期コスト
サーバーの運用
APNs,GCMの仕様変更への対応
大量配信の場合は配信ロジックのチューニング
mBaaSで
解決！！

mBaaSって何？？

色見本３
ニフティクラウドmobile backend
スマートフォンアプリのバックエンド機能が
開発不要になるクラウドサービス
mBaaSって何？？
mobile
Backend
as ＝ mBaaS !!
a
Service
 初期コストの削減
 サーバー運用の手間削減
アプリ開発が
スピードアップ！！！
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)
①プッシュ通知許可
⑤プッシュ通知
②デバイストークン発行
③デバイストークン登録
④プッシュ通知
Bundle
ID
AppIDの作成(※)
プロビジョニングプロファイルの作成(※)
APNs用証明書の作成
APNs用証明書をp12形式で書き出す
(※)…事前準備で作成済みの内容です
APIキーの設定

色見本３
24
Android
• Googleアカウントが必要です • Apple Developer Programアカウント
が必要です（有償）
• 事前準備（ビルドできる状態）が完了して
いる必要がありますhttp://goo.gl/8wISOm
スライド25へスライド30へ
作業の内容がそれぞれ違います
iOS

色見本３
25
Android Google Cloud Platform にログインします
https://console.cloud.google.com/
GCMのAPIキーの発行
プルダウンから
｢プロジェクトの作成...｣
をクリック
プロジェクト名
を入力して
｢作成｣
をクリック
ここを
クリック

色見本３
26
Android
｢認証情報を作成｣
をクリック
｢認証情報｣
をクリック
｢APIキー｣
をクリック
｢サーバーキー｣
をクリック

色見本３
27
Android
｢作成｣
をクリック
名前を編集
(任意)
無記入
｢OK｣
をクリック
APIキーが発行されました！
API Manager
の認証情報で
いつでも確認
できます！
GCM
APIキー
※後で使用します

色見本３
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・開発用証明書・動
作確認で使用する端末を選択
しましたか？

色見本３
どちらからでもOK
31
Apple Developer Programのメンバーセンターにログインします
https://developer.apple.com/account/
｢Certificates,
Identifiers & Profiles｣
をクリック
Apple Developer Program
iOS

色見本３
32
左側の「Certificates」＞「All」＞右上の「＋」をクリックします
「Apple Push
Notification service
SSL (Sandbox)」
をクリック
下の方の
「Continue」
をクリック
iOS

色見本３
33
「Continue」
をクリック
「AppID」
を選択する
｢Continue｣
をクリック
iOS

色見本３
34
｢Choose File…」
をクリックして
CSRファイルを選択
｢Continue｣
をクリック
iOS
注意：事前準備で
ビルドに使用したものと
同じものを選択してください！

色見本３
35
Download
「Done」
をクリック
iOS
作成した
証明書は
移動して
おきましょう

色見本３
36
キーチェーンアクセス
作成した「APNs用証明書」をダブルクリックで開きます
証明書は鍵がセットになっています
鍵ではなく
「証明書」
で右クリック
します
iOS

色見本３
37
iOS
注意：p.12形式で保存先を決めると、
パスワードを求められますが、
パスワードは入力しない
でOKを押してください。
｢”---”を書き出す…｣
をクリック

色見本３
38
書き出し
「パスワード」を
入力して「許可」
をクリック
iOS
作成した
証明書.p12は
移動して
おきましょう

色見本３
39
iOS
iOS完了スライド40へ
プロビジョニング
プロファイルを書いたText
CSR
※パターン１のみ
※パターン２のみ
確認
今回の作業で
追加された
ファイル
事前準備で
作成した
ファイル

色見本３
40
http://mb.cloud.nifty.com/ または、
mBaaS 検索
共通
※利用登録がお済みでない方は「無料登録」からお願いします

色見本３
41
ログインまたは利用登録が終わるとアプリの新規作成画面が表示されるので
アプリ名を入力して「新規作成」をクリックします
「MonacaPushApp」
と入力
mBaaS
ダッシュボード

色見本３
42
※ログイン後に、この画面が出た方は…
「+新しいアプリ」
をクリックすると
でてきます!
mBaaS

色見本３
アプリが作成されました！
２つのキーは
後で使います！
「OK」をクリックすると
ダッシュボードが表示されます
43
mBaaS

色見本３
後でAPIキーを確認するには…
「アプリ設定」
を選択
mBaaS
ここにあります
44

色見本３
共通
Android
iOS
プッシュ通知
プッシュ通知の許可
→「許可する」を選択して「保存する」をクリック
Androidプッシュ通知
APIキー
→GCMのAPIキーを入力して「保存する」をクリック
iOSプッシュ通知
証明書（.p12）
→「証明書の選択」をクリックして証明書をアップロード
続けて「プッシュ通知」を開いて設定を行います
mBaaS

色見本３
46
https://ja.monaca.io/ または、
Monaca 検索
※利用登録がお済みでない方は「サインアップ」からお願いします
共通

色見本３
47
「新規プロジェクトの作成」
をクリック
Monaca
Android

色見本３
48
「サンプルアプリ」
タブをクリック
「作成」
をクリック
スクロールすると出てきます↓
特に何も変更せず
「プロジェクトを作成する」
をクリック
プロジェクト
を開きます
Monaca
Android

色見本３
49
iOS
プロジェクト
を開きます
事前準備で既に作成済みのプロジェクトを開きます

色見本３
50
Monaca
プロジェクトが開かれます共通

色見本３
51
Monaca
index.htmlindex.htmlを編集して
配信端末(installation)の登録処理ができるようにします
共通
ここにコード
を書きます
｢index.html｣
タブを
クリック

色見本３
52
Monaca
index.htmlindex.htmlを編集して
配信端末(installation)の登録処理ができるようにします
共通
※コピペ用ページからコピーして
貼り付けてください
https://goo.gl/GSjflF

色見本３
53
Monaca
index.html
共通
d
必ずコピーボタンを
使ってください！
mBaaS
ダッシュボードmBaaSのAPIキーを設定する
「YOUR_NCMB_APPLICATIONKEY」
「YOUR_NCMB_CLIENTKEY」
はmobile backendのダッシュボードの
アプリケーションキー、
クライアントキーにそれぞれ
書き換えてください！
「PROJECT_NUMBER(Android_only)」
はGCMのプロジェクト番号に書き換えて
ください
Android

色見本３
54
こんな感じになっていればOKです[イメージ] Monaca
index.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」クラスを開きます
mBaaS
ここに入りました！ここに登録された端末に
プッシュ通知を送信することが
可能です

色見本３
⑤動作確認！
62
mBaaS
送りましょう！！
「メッセージ」を
記入します
「プッシュ通知」
クリックして
をクリック！
「iOS」or「Android」
にチェックを入れる
「プッシュ通知を作成する」
をクリック
すぐに端末を確認！

色見本３
⑤動作確認！
63
送りましょう！！結果例：
無事にプッシュ通知は届きましたか？？
プッシュ通知が
受信されました★
ロック画面
スマホ起動時画面
通知画面
iOS

まとめ
☺プッシュ通知が必要な理由を学びました！
☺プッシュ通知の仕組みを学びました！
☺Monacaで作ったアプリに
プッシュ通知機能を実装しました！

色見本３
65
お願い
アンケートに@nifty IDをご記入ください
mBaaSのダッシュボードhttp://mb.cloud.nifty.com/右上の
[ユーザー名]＞[アカウント設定]＞プロフィールから確認できます
アルファベット3桁＋数字5桁
★ハンズオンセミナーはいかがでしたでしょうか？
ぜひご感想をアンケートにお書きください。
また今後の「Swift×mBaaSハンズオンセミナー」
で扱って欲しいテーマなどありましたご記入ください。
★本日はご参加いただきありがとうございました！

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

Recomendados

Recomendados

Mais conteúdo relacionado

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

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

Mais de natsumo

Mais de natsumo (9)

Último

Último (8)