Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

929 views

Published on

ハンズオンセミナー『【Monaca×mobile backend】 プッシュ通知をカンタン実装! スピード感ある開発をしよう!』の資料です
▼ニフティクラウドmobile backendのハンズオンセミナーはこちら▼
http://peatix.com/group/36909#

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

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

×