【Monaca×mobile backend】 プッシュ通知をカンタン実装!...
Transcript of 【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
後半ハンズオンセミナー
前半アプリにプッシュ通知が必要な
3つの理由とは
Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved
アプリにプッシュ通知が必要な3つの理由とは
3
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
アプリの存在は忘れてしまうもの…
•1人が1ヶ月に1回以上起動するアプリの数
•1人が1ヶ月に10回以上起動するアプリの数
わずか9個
およそ27個
アクティブに使われる
アプリになるのは
とても大変!
4
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
1. アプリの変化を伝える役割
•新しい機能を紹介やバージョンアップのお知らせ• オートアップデートが行われるのが当たり前になった今、新機能追加やバージョンアップがされても、そのままでは気づく手段がありません
5
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
2. リマインダーとしての役割
•ユーザがあえて通知を受けたいアプリとは??
•メッセージ系アプリ
•リマインダー系アプリ特定の決まった時間に
特定の場所に行ったときに
予定の10分前朝・昼・夜
A店の近くの人にセール情報
イベント開催時
Titlemessage
6
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
3. アプリを立ち上げずに内容を把握させる役割
•メッセージ系アプリに望むことは?
メッセージの内容を通知に表示して欲しい!
…例えばLINEなどのアプリは「本文」が見えるのでアプリを開くかどうか、プッシュ通知の内容で選択ができる!
Titlemessage
急用!アプリ→返信
後で返信
7
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
まとめると…
•プッシュ通知を使ってアプリを活性化できる!
•上手なプッシュ通知の提供方法は
1.ユーザの状況に合わせた
2.ジャストインタイムで
3.内容が適切であり
4.アプリに戻らずとも使えるもの!
Titlemessage
8
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
プッシュ通知は必須!!!
•ユーザーへの通知手段としてプッシュ通知はなくてはならない存在に!
プッシュメールでは×!
9
ダメ
プッシュ通知は簡単に組み込めます!!!
Titlemessage
導入しない理由がない!
Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 10
プッシュ通知を組み込むにはどうしたらいいだろう??
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
プッシュ通知の仕組み
サーバ
プッシュ通知
ここに
を使います!
11
サーバの準備が必要不可欠!!
プッシュ通知
iPhone
Android
プッシュ通知
初期コストサーバーの運用
APNs,GCMの仕様変更への対応大量配信の場合は配信ロジックのチューニング
mBaaSで解決!!
Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 12
mBaaSって何??
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
ニフティクラウドmobile backend
スマートフォンアプリのバックエンド機能が
開発不要になるクラウドサービス
mBaaSって何??
mobileBackend
as = mBaaS !!aService
初期コストの削減サーバー運用の手間削減
アプリ開発がスピードアップ!!!
13
Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 14
Monaca×mBaaSでプッシュ通知を組み込む方法とは...??
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
Monaca×mBaaSで簡単プッシュ通知!
Monacaでアプリを作ったアプリに
SDKを導入する
コードを追記する
たった
3行※iOSの場合
わずか半日で実装!実績あり!
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
配信も簡単!
16
ダッシュボードから簡単配信!
タイトル・メッセージを
入力して即時配信!
こだわり配信も可能!しかも簡単!
• 配信時間指定!
• 配信端末選択!
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
まとめ
•アプリにはプッシュ通知が必須!!•ユーザへの通知手段はもうメールじゃない!
•MonacaとmBaaSを使って
即プッシュ通知を実装可能!!配信可能!
•mBaaSを活用してアプリをもっと活性化!!•他の機能も使ってみよう!データストア、会員管理etc...
17
mBaaS 検索詳しくはこちら
Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 18
ハンズオンセミナー
実際にアプリを作ってみましょう!
×PUSH!!
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
本日体験していただく内容
プッシュ通知
プッシュ通知
iPhone
Android
プッシュ通知
Monacaで作ったアプリにプッシュ通知を組み込みます
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
ハンズオンの流れ
①プッシュ通知の仕組みについて知る
②プッシュ通知機能を利用する準備をする
③mBaaSでプッシュ通知機能を利用する準備をする
④Monacaでアプリ作りプッシュ通知機能を組み込む
⑤動作確認!
20
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
①プッシュ通知の仕組みについて知る
21
ニフティクラウドmobile backendのプッシュ通知は各プラットフォームが提供している通知サービスを利用しています
• Androidの通知サービス
•GCM(Google Cloud Messaging)
• iOSの通知サービス
•APNs(Apple Push Notification Service)
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
①プッシュ通知の仕組みについて知る
22
Android
①プッシュ通知許可
④プッシュ通知⑤プッシュ通知GCM
APIキー
プロジェクトの作成GCM有効化設定
②レジスタレーションID発行
③レジスタレーションIDの登録
プロジェクト番号
APIキーの設定
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
①プッシュ通知の仕組みについて知る
23
iOS
APNs用証明書(.p12)①プッシュ通知許可
⑤プッシュ通知
②デバイストークン発行
③デバイストークン登録
④プッシュ通知
BundleID
AppIDの作成(※)プロビジョニングプロファイルの作成(※)
APNs用証明書の作成
APNs用証明書をp12形式で書き出す
(※)…事前準備で作成済みの内容です
APIキーの設定
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
24
②プッシュ通知機能を利用する準備をする
Android
• Googleアカウントが必要です • Apple Developer Programアカウントが必要です(有償)
• 事前準備(ビルドできる状態)が完了している必要がありますhttp://goo.gl/8wISOm
スライド25へ スライド30へ
作業の内容がそれぞれ違います
iOS
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
25
Android Google Cloud Platform にログインしますhttps://console.cloud.google.com/
GCMのAPIキーの発行
プルダウンから「プロジェクトの作成...」
をクリック
プロジェクト名を入力して「作成」
をクリック
ここをクリック
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
26
Android
GCMのAPIキーの発行
「認証情報を作成」をクリック
「認証情報」をクリック
「APIキー」をクリック
「サーバーキー」をクリック
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
27
Android
GCMのAPIキーの発行
「作成」をクリック
名前を編集(任意)
無記入
「OK」をクリック
APIキーが発行されました!
API Managerの認証情報でいつでも確認できます!
GCMAPIキー
※後で使用します
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
28
Android
GCMのプロジェクトコードの確認
「≡」をクリック
「ホーム」をクリック
GCMプロジェクト番号
※後で使用します
クリック
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
29
Android
GCMの有効化の設定
再び「≡」をクリック
「API Manager」をクリック
「Google Cloud Messaging」をクリック
「有効にする」をクリック
Android完了 スライド40へ
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
30
iOS
プロビジョニングプロファイル を書いたText
CSR※パターン1のみ
※パターン2のみ
事前準備の確認
ビルドに必要な証明書の準備はOKですか?
事前準備資料 http://goo.gl/8wISOm
事前準備で作成したファイル
☑ AppID作成時に「Push Notifications」にチェックを入れましたか?
☑ プロビジョニングプロファイル作成時に、正しくAppID・開発用証明書・動作確認で使用する端末を選択しましたか?
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
どちらからでもOK
②プッシュ通知機能を利用する準備をする
31
Apple Developer Programのメンバーセンターにログインしますhttps://developer.apple.com/account/
「Certificates, Identifiers & Profiles」
をクリック
Apple Developer Program
iOS
APNs用証明書の作成
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
32
Apple Developer Program
左側の「Certificates」>「All」>右上の「+」をクリックします
「Apple Push Notification service
SSL (Sandbox)」をクリック
下の方の「Continue」をクリック
iOS
APNs用証明書の作成
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
33
「Continue」をクリック
「AppID」を選択する
Apple Developer Program
「Continue」をクリック
iOS
APNs用証明書の作成
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
34
「Choose File…」をクリックして
CSRファイルを選択「Continue」をクリック
Apple Developer ProgramiOS
APNs用証明書の作成
注意:事前準備でビルドに使用したものと
同じものを選択してください!
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
35
Apple Developer Program
Download
「Done」をクリック
iOS
APNs用証明書の作成作成した証明書は移動して
おきましょう
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
36
キーチェーンアクセス
作成した「APNs用証明書」をダブルクリックで開きます証明書は鍵がセットになっています
鍵ではなく
「証明書」で右クリック
します
iOS
APNs用証明書をp12形式で書き出す
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
37
キーチェーンアクセス
iOS
APNs用証明書をp12形式で書き出す
注意:p.12形式で保存先を決めると、パスワードを求められますが、
パスワードは入力しないでOKを押してください。
「”---”を書き出す…」をクリック
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
38
書き出し
「パスワード」を入力して「許可」をクリック
キーチェーンアクセス
iOS
作成した証明書.p12は移動して
おきましょう
APNs用証明書をp12形式で書き出す
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
②プッシュ通知機能を利用する準備をする
39
iOS
iOS完了 スライド40へ
プロビジョニングプロファイル を書いたText
CSR※パターン1のみ
※パターン2のみ
確認
今回の作業で追加されたファイル
事前準備で作成したファイル
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
③mBaaSでプッシュ通知機能を利用する準備をする
40
http://mb.cloud.nifty.com/ または、mBaaS 検索
共通※利用登録がお済みでない方は「無料登録」からお願いします
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
41
ログインまたは利用登録が終わるとアプリの新規作成画面が表示されるのでアプリ名を入力して「新規作成」をクリックします
「MonacaPushApp」と入力
③mBaaSでプッシュ通知機能を利用する準備をする
mBaaSダッシュボード
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
42
※ログイン後に、この画面が出た方は…
「+新しいアプリ」をクリックするとでてきます!
③mBaaSでプッシュ通知機能を利用する準備をする
mBaaSダッシュボード
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
アプリが作成されました!
2つのキーは
後で使います!
「OK」をクリックするとダッシュボードが表示されます
43
③mBaaSでプッシュ通知機能を利用する準備をする
mBaaSダッシュボード
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
後でAPIキーを確認するには…
「アプリ設定」を選択
mBaaSダッシュボード
ここにあります
44
③mBaaSでプッシュ通知機能を利用する準備をする
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
③mBaaSでプッシュ通知機能を利用する準備をする
共通
Android
iOS
プッシュ通知プッシュ通知の許可→「許可する」を選択して「保存する」をクリック
Androidプッシュ通知APIキー→GCMのAPIキーを入力して「保存する」をクリック
iOSプッシュ通知証明書(.p12)→「証明書の選択」をクリックして証明書をアップロード
続けて「プッシュ通知」を開いて設定を行いますmBaaS
ダッシュボード
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
④Monacaでアプリ作りプッシュ通知機能を組み込む
46
https://ja.monaca.io/ または、 Monaca 検索
※利用登録がお済みでない方は「サインアップ」からお願いします共通
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
④Monacaでアプリ作りプッシュ通知機能を組み込む
47
「新規プロジェクトの作成」をクリック
MonacaAndroid
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
④Monacaでアプリ作りプッシュ通知機能を組み込む
48
「サンプルアプリ」タブをクリック
「作成」をクリック
スクロールすると出てきます↓
特に何も変更せず「プロジェクトを作成する」
をクリック
プロジェクトを開きます
Monaca
Android
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
④Monacaでアプリ作りプッシュ通知機能を組み込む
49
iOS
プロジェクトを開きます
事前準備で既に作成済みのプロジェクトを開きます
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
④Monacaでアプリ作りプッシュ通知機能を組み込む
50
Monacaプロジェクトが開かれます共通
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
④Monacaでアプリ作りプッシュ通知機能を組み込む
51
Monacaindex.htmlindex.htmlを編集して
配信端末(installation)の登録処理ができるようにします
共通
ここにコードを書きます
「index.html」タブをクリック
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
④Monacaでアプリ作りプッシュ通知機能を組み込む
52
Monacaindex.htmlindex.htmlを編集して
配信端末(installation)の登録処理ができるようにします
共通
※コピペ用ページからコピーして貼り付けてくださいhttps://goo.gl/GSjflF
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
④Monacaでアプリ作りプッシュ通知機能を組み込む
53
Monacaindex.html
共通
d
必ずコピーボタンを使ってください!
mBaaSダッシュボードmBaaSのAPIキーを設定する
「YOUR_NCMB_APPLICATIONKEY」「YOUR_NCMB_CLIENTKEY」はmobile backendのダッシュボードのアプリケーションキー、クライアントキーにそれぞれ書き換えてください!
「PROJECT_NUMBER(Android_only)」はGCMのプロジェクト番号に書き換えて
ください
Android
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
④Monacaでアプリ作りプッシュ通知機能を組み込む
54
こんな感じになっていればOKです[イメージ] Monacaindex.html
「保存」をクリックして保存をします
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
55
⑤動作確認!
Android
• 特に準備は必要ありません • 事前準備で以下が設定済みであること☑ AppID(BundleID)の設定☑ デベロッパー証明書(開発用証明書)のアップ
ロード☑ プロビジョニングプロファイルの設定
スライド56へ スライド58へ
作業の内容がそれぞれ違います
iOS
実機ビルド
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
⑤動作確認!
56
Monaca「ビルド」>「Androidアプリのビルド」をクリックして、Androidアプリケーションのビルドを開きます
Android
「デバッグビルド」を選択して
「次へ」をクリック
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
⑤動作確認!
57
Monaca
Android 任意の方法で端末にインストールしてください
Android完了 スライド60へ
ビルド完了!
少し待つと...
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
⑤動作確認!
58
Monaca「ビルド」>「iOSアプリのビルド」をクリックして、iOSアプリケーションのビルドを開きます
iOS
「デバッグビルド」を選択して
「次へ」をクリック
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
⑤動作確認!
59
Monaca
任意の方法で端末にインストールしてください※インストール方法→https://goo.gl/GSjflF
iOS
ビルド完了!
そのまま「次へ」をクリック
※プロビジョニングプロファイルが設定されていなければ設定してください
少し待つと...
iOS完了 スライド60へ
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
⑤動作確認!
60
インストールしたアプリを起動しますプッシュ通知の許可を求めるアラートが出たら、必ず許可してください!
起動されたら
レジスタレーションIDデバイストークン取得完了です!
ちゃんと取得されたか確認しましょう
アプリを一度閉じます
iOS
Android
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
⑤動作確認!
61
mBaaSの「データストア」の中にある「installation」クラスを開きます
mBaaSダッシュボード
ここに入りました!ここに登録された端末にプッシュ通知を送信することが
可能です
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
⑤動作確認!
62
mBaaSダッシュボードプッシュ通知を
送りましょう!!「メッセージ」を
記入します
「プッシュ通知」クリックして
をクリック!
「iOS」or「Android」にチェックを入れる
「プッシュ通知を作成する」をクリック
すぐに端末を確認!
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
⑤動作確認!
63
プッシュ通知を送りましょう!! 結果例:
無事にプッシュ通知は届きましたか??
プッシュ通知が受信されました★
ロック画面
スマホ起動時画面
通知画面
iOS
Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 64
まとめ
☺プッシュ通知が必要な理由を学びました!
☺プッシュ通知の仕組みを学びました!
☺Monacaで作ったアプリに
プッシュ通知機能を実装しました!
Copyright @ NIFTY Corporation All Rights Reserved
色見本3
65
お願い
アンケートに@nifty IDをご記入ください
mBaaSのダッシュボードhttp://mb.cloud.nifty.com/右上の[ユーザー名]>[アカウント設定]>プロフィールから確認できます
アルファベット3桁+数字5桁
★ハンズオンセミナーはいかがでしたでしょうか?
ぜひご感想をアンケートにお書きください。
また今後の「Swift×mBaaSハンズオンセミナー」
で扱って欲しいテーマなどありましたご記入ください。
★本日はご参加いただきありがとうございました!
Copyright @ NIFTY Corporation All Rights Reserved