狠狠撸

狠狠撸Share a Scribd company logo

【JavaScript SDK ver.2】MonacaとmBaaSでプッシュ通知を体験しよう(for Android & iOS)

natsumo
natsumo

惭辞苍补肠补と尘叠补补厂を使ったプッシュ通知体験

Engineering
1 of 97
Downloaded 10 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
right ? NIFTY Corporation All Rights Reserved. * 事前準備 【ニフティクラウドmobile backendの利用登録】 ? http://mb.cloud.nifty.com/signup.htm 【Monacaの利用登録】 ? https://ja.monaca.io/ ※ iOS端末をお持ちいただいた方 【 iOS Developer Program(有償)への登録とビルド確認まで】 ? https://developer.apple.com/jp/programs/ ? 参考：http://docs.monaca.mobi/cur/ja/manual/build/ ※ Android端末をお持ちいただいた方 【 Googleアカウントの取得と Google Developers Console へのログイン】 ? https://developers.google.com/ ? https://accounts.google.com/signup
opyright ? NIFTY Corporation All Rights Reserved. Monacaと ニフティクラウドmobile backendで プッシュ通知を体験してみよう ニフティ株式会社
right ? NIFTY Corporation All Rights Reserved. * この時間帯に体験して頂く内容 Monacaで作ったアプリにプッシュ通知を組み込む APNs GCM プッシュ通知の送信先となる 配信端末情報を保存する
right ? NIFTY Corporation All Rights Reserved. * プッシュ通知の利用例 スマホ対応済み ブログ
right ? NIFTY Corporation All Rights Reserved. * プッシュ通知の利用例 記事の更新をきっかけに REST APIでプッシュ登録 Monaca製の アプリへ 更新を知らせる プッシュ通知 APNs GCM スマホ対応済み ブログ
right ? NIFTY Corporation All Rights Reserved. * この時間帯に体験して頂く内容(再確認) Monacaで作ったアプリにプッシュ通知を組み込む APNs GCM プッシュ通知の送信先となる 配信端末情報を保存する
right ? NIFTY Corporation All Rights Reserved. * 目次 ① プッシュ通知の仕組みについて ② プッシュ通知を利用する準備（Android） ③ プッシュ通知を利用する準備（iOS） ④ mobile backendでプッシュ通知機能を利用する準備 ⑤ Monacaで作ったアプリにプラグインを組み込む ⑥ 動作確認！
Copyright ? NIFTY Corporation All Rights Reserved. ①プッシュ通知の仕組みについて
right ? NIFTY Corporation All Rights Reserved. * ①プッシュ通知の仕組みについて ? iOS向けプッシュ通知 ? APNs (Apple Push Notification Service) ? Android向けプッシュ通知 ? GCM (Google Cloud Messaging) ニフティクラウドmobile backendのプッシュ通知は 各プラットフォームが提供している 通知サービスを利用しています
right ? NIFTY Corporation All Rights Reserved. * ①プッシュ通知の仕組みについて（APNs） ①事前準備 ?APNs証明書を取得 ②初回起動時 ?deviceTokenの取得 ③プッシュ通知 APNs 証明書 ① ② メッセージ ③
right ? NIFTY Corporation All Rights Reserved. * ①プッシュ通知の仕組みについて（GCM） ①事前準備 ?APIキーを取得 ?GCMの有効化 ②初回起動時 ?Registration Idの取得 ③プッシュ通知 GCM APIキー ① メッセージ ③ ②
Copyright ? NIFTY Corporation All Rights Reserved. ②プッシュ通知を利用する準備(Android)
right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） Android向けプッシュ通知には Googleアカウントが必要です
right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） Google Developers Console へログイン後、 「プロジェクトを作成」を選択。 https://console.developers.google.com/
right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） プロジェクト名を入力して「作成」
right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） プロジェクト番号は後で使います 場所を覚えておいてください プロジェクト番号の確認
right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） 左上のメニューを選択→「API Manager」を選択
right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） 「認証情報」をクリック
right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） 「認証情報を追加」 →「APIキー」 →「サーバーキー」をクリック
right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） サーバーIPアドレスは空欄のまま、「作成」してください
right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） GoogleのAPIを利用するための APIキーが生成されました APIキー 「OK」をクリックで閉じる
right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） 次に、GCMを有効にします。 「概要」を選択、 「Cloud Messaging for Android」 をクリック
right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） Google Cloud Messaging for Androidの APIを有効にします。
Copyright ? NIFTY Corporation All Rights Reserved. ③プッシュ通知を利用する準備(iOS)
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） iOS向けプッシュ通知には Apple Developer Program（有償） への登録が必要です https://developer.apple.com/jp/programs/ ※以降の手順はMonacaのビルド設定が完了している前提で進めます 【Monacaで設定】http://docs.monaca.mobi/cur/ja/manual/build/ios/build_ios/ 【Xcodeから移行】http://docs.monaca.mobi/cur/ja/manual/build/ios/import_export/
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） https://developer.apple.com/membercenter/ Apple開発者ページのメンバーセンターへログイン後、 「Certificates, Identifiers & Profiles」を選択。
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 「Identifiers」を選択。
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 新しいAppIDを作ります。 ※既存のものを使う場合はこの手順は不要です ※ワイルドカードなIDは使えません 「iOS Apps」になっている ことを確認しましょう！
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 新しいAppIDを作ります。 アプリの説明 (ascii文字で入力するのが無難です） (例) Push Notification Hands On
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 新しいAppIDを作ります。 「Explicit App ID」を選択 「Bundle ID」を入力 プッシュ通知を利用する場合、Wildcard App IDは使えません
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 新しいAppIDを作ります。 「Push Notifications」に チェックを入れる 「Continue」をクリック
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 新しいAppIDが作られました。 「Push Notifications」が Enabledまたは Configurableになっている ことを確認しましょう！ Configurableの場合は 次のステップを実施すると Enabledに切り替わります。
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） APNs用の証明書を作ります。 「Certificates」の 「All」を選択
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） APNs用の証明書を作ります。 「Apple Push Notification service SSL (Sandbox)」を 選択して「Continue」をクリック Monacaでデバッグビルドをする場合
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 先ほど作成したApp IDを選択してください APNs用の証明書を作ります。
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） APNs用の証明書を作ります。 CSRファイルは、 アプリビルド用証明書を 作成した際と同じものを 使ってください。 ※無くした場合は、CSRファイルを 作り直してアプリビルド用の証明書も 作成し直してください ※MonacaでCSRファイルを作成済みの 場合はMonacaクラウドIDEから エクスポートして利用してください
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） CSRファイルを選択してください APNs用の証明書を作ります。
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） APNs用の証明書が作成されました。 ダウンロードしてください
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 左メニューの Provisioning Profilesの Allを選択 Provisioning Profilesの ページへ遷移後に、 右上の「＋」を選択
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 デバッグビルドする場合は Developmentを選択 アドホックビルドする場合は Ad Hocを選択
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 今回使うAppIDを選択
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 今回使うビルド用証明書を選択
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 動作確認で使う端末を選択 ※端末登録していない場合はdeviceから要登録
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） Monacaで秘密鍵とCSRを作成した方は、 Monacaにログインしてプロジェクトを開いてください。 「設定＞iOSビルド設定」を開きデベロッパー証明書をエクスポートします。 ※macのキーチェーンアクセスで秘密鍵、CSRを作成した方は不要です
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 プロファイルの名前を入力
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルが作成されました。 ダウンロードしてください
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） ここまでの作業で 以下の２つのファイルが出来ればOKです。 プロビジョニング プロファイル APNs用 証明書(.cer)
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） ダウンロードした APNs用証明書をダブルクリックしてください。 APNs用 証明書
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） キーチェーンアクセスの証明書の項目に 「Apple Development iOS Push Services: **」と それに紐づく秘密鍵がインポートされたことを確認してください。
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） キーチェーンアクセスの証明書の項目の 「Apple Development iOS Push Services: **」を 右クリックして「書き出す」を選択してください。
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） P12形式で保存先を決めると、パスワードを求められます。 パスワードは入力しないでOKを押してください。
right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） ここまでの作業で手元に３つのファイルがあればOKです。 Appleの 開発者サイトから ダウンロードした プロビジョニング プロファイル キーチェーンアクセスから 書き出した APNs用証明書(p12) Appleの 開発者サイトから ダウンロードした APNs用 証明書(cer)
right ? NIFTY Corporation All Rights Reserved. * チェックポイント！（プッシュ通知を使う準備） ? iOS ? APNs用の証明書(p12)が準備できていること ?デバッグビルドする場合は「APNs Development iOS」 ?アドホックビルドする場合は「APNs Production iOS」 ? プロビジョニングプロファイルが準備できている こと ? Android ? APIキーが生成できていること ?種別がサーバーアプリケーションのキーであること ?IPが任意のIPを許可であること ? Google Cloud Messaging for AndroidのAPIが、有 効化されていること
Copyright ? NIFTY Corporation All Rights Reserved. ④mobile backendでプッシュ通知機能を 利用する準備
right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 ログインする http://mb.cloud.nifty.com/
right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 mBaaSをはじめて利用される方は、 アプリの新規作成画面が表示されます。 アプリ名を入力して新規作成してください。 「PushTest」 と入力してください
right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 ※ログイン後に、この画面が出た方は… 「+新しいアプリ」 をクリックすると でてきます! 「PushTest」 と入力してください
right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 アプリが作成されました。 ２つのキーは 後で使います OKをクリックすると 管理画面が表示されます ※後でキーを確認する方法は 次のページに掲載しています。
right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 後でキーを確認するには… アプリ設定
right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 後でキーを確認するには… ここにあります
right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 データストアを確認しておく データストア
right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 データストアを確認しておく
right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 APNs証明書とGCMのAPIキーを mobile backendに設定します。 再びアプリ設定の 「プッシュ通知」を選択
right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 APNs証明書とGCMのAPIキーをmobile backendに設定します。 許可する Google Developer Consoleで 取得したAPIキーを入力 キーチェーンアクセスから 書き出したAPNs証明書(p12)を アップロードする
Copyright ? NIFTY Corporation All Rights Reserved. ⑤Monacaで作ったアプリに プラグインを組み込む
right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む Monacaにログインして 新しいプロジェクトを作ります 「開発をスタート」 をクリック
right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む 「Monaca.ioで開発」を 選択してください
right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む 最小限のテンプレート 「選択」 をクリック
right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む 「プッシュ通知体験アプリ」 ※適当に書き変える 「プロジェクトを作成する」 をクリック
right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む 今作成したプロジェクトを開きます プッシュ通知体験アプリ
right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む 上部メニューの「設定」から、 「Cordovaプラグインの管理」を選択
right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む リストの下の方に「NiftyMB」という プラグインがあるので「有効」にしてください 。 ↓のようになればOKです。
right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む index.htmlを編集して配信端末(installation)の 登録処理をできるようにします。 index.htmlの headタグ内の scriptタグの 内側に追記。 installationの保存に必要な deviceTokenの取得には プラグイン内部の ネイティブコードが必要です。 ネイティブコードの準備が完了した devicereadyイベント発火後に 取得／保存の処理を行います。
right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む index.htmlを編集して配信端末(installation)の 登録処理をできるようにします。 devicereadyイベント発火時のリスナー関数で、 NCMBプラグインのsetDeviceToken関数を呼び出します。 この関数はdeviceTokenの取得とmobile backendへの登録を行います。 ※3つの引数は次のステップで解説します
right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む index.htmlを編集して配信端末(installation)の 登録処理をできるようにします。 前ステップで仮に記載したキーやIDの部分を適切なものに書き換えます。 mobile backendのアプリケーションキーとクライアントキーを第1-2引数に、 Google Developer Consoleのプロジェクト番号を第3引数に記載します。
Copyright ? NIFTY Corporation All Rights Reserved. ⑥動作確認！
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?アプリのビルド? ? ビルド設定 （for Android） ? ビルド手順 （for Android） ? ビルド設定 （for iOS） ? ビルド手順 （for iOS） ? 動作確認 ここから先は確認端末に応じて 必要な部分を実施してください。
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド設定（for Android）? Androidの方 動作確認だけであれば特に設定は必要ありません。 ストアに提出する場合はMonacaのドキュメントを 参考にしてください。
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for Android）? 上部メニューの「ビルド」から、 「Androidアプリのビルド」を選択
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for Android）? デバッグビルドを選択
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for Android）? 少々お待ちください…
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for Android）? 任意の方法で端末へ 転送してください
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド設定（for iOS）? ? mobile backendに設定したAPNs証明書が DevelopmentかProductionかを確認して、適切なビル ドを行ってください ? Developmentの場合はデバッグビルド ? Productionの場合はアドホックビルド ? ビルド用の証明書と秘密鍵の組み合わせが正しくな るよう設定してください ? MonacaのiOSアプリ設定のAppIDはAPNs証明書と一 致させてください ? プロビジョニングプロファイルのAppIDはAPNs証明 書と一致させてください iOSの方 ビルドに関する設定が必要です。
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド設定（for iOS）? iOSの方 ビルドに関する設定が必要です。 上部メニューの「設定」から、 「iOSアプリ設定」を選択
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド設定（for iOS）? iOSの方 ビルドに関する設定が必要です。 App IDに、前半で作成した 証明書に設定したものと同じ IDを設定してください。
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? 上部メニューの「ビルド」から 、 「iOSアプリのビルド」を選択
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? デバッグビルドを選択
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? プロビジョニングプロフ ァイルをアップロード
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? 少々お待ち下さい…
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? クリックして ダウンロード してください
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? ? iTunes経由 ? Xcode経由 ? http://docs.monaca.mobi/cur/ja/manual/deploy/non_market_deploy/ ? DeployGate経由（OTA） ? https://deploygate.com/ 任意の方法で端末へ転送してください Monacaにドキュメントがあります
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?動作確認? 端末上のアプリを起動してください。 ※アプリでプッシュ通知の許可を求められた場合は許可してください ※mobile backendの管理画面上で「データストア＞installationクラス」に オブジェクトが増えていれば端末登録成功です ※端末登録が上手くいかない場合は、アプリを再起動してみてください
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?動作確認? プッシュ通知の「＋新しいプッシュ通知」を選択。
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?動作確認? メッセージに 送りたい文字列を 入力
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?動作確認? Android端末に配信する iOS端末に配信する プッシュ通知を作成して 少々お待ちください…
right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?動作確認? mobile backend上のプッシュ通知の 配信ステータスが「配信済み」になり 、 端末にプッシュ通知が届きます。
right ? NIFTY Corporation All Rights Reserved. *

More Related Content

What's hot (20)

PDF
はやわかり贬罢惭尝5ハイブリッドアプリ开発事情
Monaca
?
PDF
HTML5によるモハ?イルアフ?リ開発 か?拓拓くヒ?シ?ネスチャンス
アシアル株式会社
?
PDF
Visual Studio 2015 を使用した Cordova アプリの開発
Osamu Monoe
?
PDF
Onsen UI 2.0とUIライブラリの未来
アシアル株式会社
?
PDF
オフ?ショナル型。?なんとなく付ける ! ? 撲滅? 改訂版
Tomoki Hasegawa
?
PPTX
颁辞谤诲辞惫补×业务システム：失败しないモバイル开発の秘诀
アシアル株式会社
?
PDF
フィードテイラー绍介(2014.11.15版)
feedtailor
?
PPTX
事例で解説するハイブリッドアプリ开発のポイント
Monaca
?
PDF
エンターフ?ライス?における颈翱厂アフ?リ开発て?押さえておくへ?き7つのこと
feedtailor
?
PDF
DevLOVE関西(No.62) 知っておいて損はないエンタープライズiOS導入のいろは
feedtailor
?
PPTX
Web標準技術で iOS、Android両対応アプリを開発
アシアル株式会社
?
PPTX
颁辞谤诲辞惫补で础苍驳耻濒补谤闯厂アプリ开発
アシアル株式会社
?
PDF
はじめてのiOSアプリ開発 ①
Nagamine Hiromasa
?
PDF
エンタープライズ?モバイルアプリにおける ハイブリッドアプリ開発
日本颁辞谤诲辞惫补ユーザー会
?
PDF
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
アシアル株式会社
?
PDF
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
Monaca
?
PDF
Windows Phone / iOS / Android アプリ同時開発のススメ
Yoshito Tabuchi
?
PPTX
Osc html5-monaca
Hikaru Ito
?
PPTX
エンタープライズ要件に対応する高品质な颁辞谤诲辞惫补アプリ开発のポイント
アシアル株式会社
?
PDF
Lync 2013 アプリの開発ーJapan SharePoint Group
adachiyosuke
?
はやわかり贬罢惭尝5ハイブリッドアプリ开発事情
Monaca
?
HTML5によるモハ?イルアフ?リ開発 か?拓拓くヒ?シ?ネスチャンス
アシアル株式会社
?
Visual Studio 2015 を使用した Cordova アプリの開発
Osamu Monoe
?
Onsen UI 2.0とUIライブラリの未来
アシアル株式会社
?
オフ?ショナル型。?なんとなく付ける ! ? 撲滅? 改訂版
Tomoki Hasegawa
?
颁辞谤诲辞惫补×业务システム：失败しないモバイル开発の秘诀
アシアル株式会社
?
フィードテイラー绍介(2014.11.15版)
feedtailor
?
事例で解説するハイブリッドアプリ开発のポイント
Monaca
?
エンターフ?ライス?における颈翱厂アフ?リ开発て?押さえておくへ?き7つのこと
feedtailor
?
DevLOVE関西(No.62) 知っておいて損はないエンタープライズiOS導入のいろは
feedtailor
?
Web標準技術で iOS、Android両対応アプリを開発
アシアル株式会社
?
颁辞谤诲辞惫补で础苍驳耻濒补谤闯厂アプリ开発
アシアル株式会社
?
はじめてのiOSアプリ開発 ①
Nagamine Hiromasa
?
エンタープライズ?モバイルアプリにおける ハイブリッドアプリ開発
日本颁辞谤诲辞惫补ユーザー会
?
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
アシアル株式会社
?
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
Monaca
?
Windows Phone / iOS / Android アプリ同時開発のススメ
Yoshito Tabuchi
?
Osc html5-monaca
Hikaru Ito
?
エンタープライズ要件に対応する高品质な颁辞谤诲辞惫补アプリ开発のポイント
アシアル株式会社
?
Lync 2013 アプリの開発ーJapan SharePoint Group
adachiyosuke
?

Similar to 【JavaScript SDK ver.2】MonacaとmBaaSでプッシュ通知を体験しよう(for Android & iOS) (20)

PDF
【Monaca×mobile backend】 プッシュ通知をカンタン実装！ スピード感ある開発をしよう！
natsumo
?
PDF
【Monaca×mobile backend】プッシュ通知をカンタン実装！スピード感ある開発をしよう！-準備編(iOS)-
natsumo
?
PDF
厂飞颈蹿迟アプリにプッシュ通知を组み込もう！
natsumo
?
PDF
マルチテナントメッセーシ?ンク?基盘を刷新して一年运用した话
Tomohisa Aoshima
?
PDF
Edisonユーサ?会「ニフティクラウド mobile backendとIoTの良い関係」
ニフクラ mobile backend
?
PDF
ニフティクラウト?? mobile backend とIoTの良い関係
ニフクラ mobile backend
?
PDF
[Iga works] live operation targeting push guide 1.1(jpn)
?? ?
?
PDF
厂飞颈蹿迟アプリにプッシュ通知を组み込もう！【事前準備編】
natsumo
?
PDF
ニフティクラウト? Mobile backendとio tの良い関係
ニフクラ mobile backend
?
PDF
【资料】ハンズオンセミナー②プッシュ通知
natsumo
?
PDF
Salesforce1 Platformモハ?イル開発Tips Webinar
Salesforce Developers Japan
?
PPTX
笔鲍厂贬础笔笔サービス绍介
pushapp
?
PDF
厂飞颈蹿迟アプリにプッシュ通知を组み込もう！-【番外編】SDKのインポート方法-
natsumo
?
PDF
Ncmb勉強会 #8 cocos2d x 資料「Cocos2d-xとNCMBを組み合わせるには」
Atsushi Nakatsugawa
?
PDF
Amazon SNS Mobile Push を使ってみる
崇之 清水
?
PDF
Firebase Cloud Messagingを使用したお知らせフ?ッシュ通知機能.pdf
hotta-m
?
PDF
[Service worker] フ?ッシュ通知の使い方
Van Trung Phan
?
PDF
[AWSマイスターシリーズ]Amazon SNSモバイルプッシュ通知
Amazon Web Services Japan
?
PDF
笔鲍厂贬通知証明书作成ツールを作った
Tomoki Hasegawa
?
PPTX
20160120 gpsロガーアプリを作ろう
史識 川原
?
【Monaca×mobile backend】 プッシュ通知をカンタン実装！ スピード感ある開発をしよう！
natsumo
?
【Monaca×mobile backend】プッシュ通知をカンタン実装！スピード感ある開発をしよう！-準備編(iOS)-
natsumo
?
厂飞颈蹿迟アプリにプッシュ通知を组み込もう！
natsumo
?
マルチテナントメッセーシ?ンク?基盘を刷新して一年运用した话
Tomohisa Aoshima
?
Edisonユーサ?会「ニフティクラウド mobile backendとIoTの良い関係」
ニフクラ mobile backend
?
ニフティクラウト?? mobile backend とIoTの良い関係
ニフクラ mobile backend
?
[Iga works] live operation targeting push guide 1.1(jpn)
?? ?
?
厂飞颈蹿迟アプリにプッシュ通知を组み込もう！【事前準備編】
natsumo
?
ニフティクラウト? Mobile backendとio tの良い関係
ニフクラ mobile backend
?
【资料】ハンズオンセミナー②プッシュ通知
natsumo
?
Salesforce1 Platformモハ?イル開発Tips Webinar
Salesforce Developers Japan
?
笔鲍厂贬础笔笔サービス绍介
pushapp
?
厂飞颈蹿迟アプリにプッシュ通知を组み込もう！-【番外編】SDKのインポート方法-
natsumo
?
Ncmb勉強会 #8 cocos2d x 資料「Cocos2d-xとNCMBを組み合わせるには」
Atsushi Nakatsugawa
?
Amazon SNS Mobile Push を使ってみる
崇之 清水
?
Firebase Cloud Messagingを使用したお知らせフ?ッシュ通知機能.pdf
hotta-m
?
[Service worker] フ?ッシュ通知の使い方
Van Trung Phan
?
[AWSマイスターシリーズ]Amazon SNSモバイルプッシュ通知
Amazon Web Services Japan
?
笔鲍厂贬通知証明书作成ツールを作った
Tomoki Hasegawa
?
20160120 gpsロガーアプリを作ろう
史識 川原
?
Ad

More from natsumo (6)

PDF
【厂飞颈蹿迟】クーポン配信アプリを作ろう！
natsumo
?
PDF
【资料】ハンズオンセミナー①クイックスタート
natsumo
?
PDF
【Swift】SDKの読み込みにuse framework!が使えない場合の対処方法
natsumo
?
PDF
【滨辞罢入门】スマホで加速度と位置情报を取得してクラウドに保存しよう！～ハンズオン资料②～
natsumo
?
PDF
【滨辞罢入门】スマホで加速度と位置情报を取得してクラウドに保存しよう！～ハンズオン资料①～
natsumo
?
PPTX
尘叠补补厂登録の流れ
natsumo
?
【厂飞颈蹿迟】クーポン配信アプリを作ろう！
natsumo
?
【资料】ハンズオンセミナー①クイックスタート
natsumo
?
【Swift】SDKの読み込みにuse framework!が使えない場合の対処方法
natsumo
?
【滨辞罢入门】スマホで加速度と位置情报を取得してクラウドに保存しよう！～ハンズオン资料②～
natsumo
?
【滨辞罢入门】スマホで加速度と位置情报を取得してクラウドに保存しよう！～ハンズオン资料①～
natsumo
?
尘叠补补厂登録の流れ
natsumo
?
Ad

【JavaScript SDK ver.2】MonacaとmBaaSでプッシュ通知を体験しよう(for Android & iOS)

  • 1. right ? NIFTY Corporation All Rights Reserved. * 事前準備 【ニフティクラウドmobile backendの利用登録】 ? http://mb.cloud.nifty.com/signup.htm 【Monacaの利用登録】 ? https://ja.monaca.io/ ※ iOS端末をお持ちいただいた方 【 iOS Developer Program(有償)への登録とビルド確認まで】 ? https://developer.apple.com/jp/programs/ ? 参考：http://docs.monaca.mobi/cur/ja/manual/build/ ※ Android端末をお持ちいただいた方 【 Googleアカウントの取得と Google Developers Console へのログイン】 ? https://developers.google.com/ ? https://accounts.google.com/signup
  • 2. opyright ? NIFTY Corporation All Rights Reserved. Monacaと ニフティクラウドmobile backendで プッシュ通知を体験してみよう ニフティ株式会社
  • 3. right ? NIFTY Corporation All Rights Reserved. * この時間帯に体験して頂く内容 Monacaで作ったアプリにプッシュ通知を組み込む APNs GCM プッシュ通知の送信先となる 配信端末情報を保存する
  • 4. right ? NIFTY Corporation All Rights Reserved. * プッシュ通知の利用例 スマホ対応済み ブログ
  • 5. right ? NIFTY Corporation All Rights Reserved. * プッシュ通知の利用例 記事の更新をきっかけに REST APIでプッシュ登録 Monaca製の アプリへ 更新を知らせる プッシュ通知 APNs GCM スマホ対応済み ブログ
  • 6. right ? NIFTY Corporation All Rights Reserved. * この時間帯に体験して頂く内容(再確認) Monacaで作ったアプリにプッシュ通知を組み込む APNs GCM プッシュ通知の送信先となる 配信端末情報を保存する
  • 7. right ? NIFTY Corporation All Rights Reserved. * 目次 ① プッシュ通知の仕組みについて ② プッシュ通知を利用する準備（Android） ③ プッシュ通知を利用する準備（iOS） ④ mobile backendでプッシュ通知機能を利用する準備 ⑤ Monacaで作ったアプリにプラグインを組み込む ⑥ 動作確認！
  • 8. Copyright ? NIFTY Corporation All Rights Reserved. ①プッシュ通知の仕組みについて
  • 9. right ? NIFTY Corporation All Rights Reserved. * ①プッシュ通知の仕組みについて ? iOS向けプッシュ通知 ? APNs (Apple Push Notification Service) ? Android向けプッシュ通知 ? GCM (Google Cloud Messaging) ニフティクラウドmobile backendのプッシュ通知は 各プラットフォームが提供している 通知サービスを利用しています
  • 10. right ? NIFTY Corporation All Rights Reserved. * ①プッシュ通知の仕組みについて（APNs） ①事前準備 ?APNs証明書を取得 ②初回起動時 ?deviceTokenの取得 ③プッシュ通知 APNs 証明書 ① ② メッセージ ③
  • 11. right ? NIFTY Corporation All Rights Reserved. * ①プッシュ通知の仕組みについて（GCM） ①事前準備 ?APIキーを取得 ?GCMの有効化 ②初回起動時 ?Registration Idの取得 ③プッシュ通知 GCM APIキー ① メッセージ ③ ②
  • 12. Copyright ? NIFTY Corporation All Rights Reserved. ②プッシュ通知を利用する準備(Android)
  • 13. right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） Android向けプッシュ通知には Googleアカウントが必要です
  • 14. right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） Google Developers Console へログイン後、 「プロジェクトを作成」を選択。 https://console.developers.google.com/
  • 15. right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） プロジェクト名を入力して「作成」
  • 16. right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） プロジェクト番号は後で使います 場所を覚えておいてください プロジェクト番号の確認
  • 17. right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） 左上のメニューを選択→「API Manager」を選択
  • 18. right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） 「認証情報」をクリック
  • 19. right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） 「認証情報を追加」 →「APIキー」 →「サーバーキー」をクリック
  • 20. right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） サーバーIPアドレスは空欄のまま、「作成」してください
  • 21. right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） GoogleのAPIを利用するための APIキーが生成されました APIキー 「OK」をクリックで閉じる
  • 22. right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） 次に、GCMを有効にします。 「概要」を選択、 「Cloud Messaging for Android」 をクリック
  • 23. right ? NIFTY Corporation All Rights Reserved. * ②プッシュ通知を利用する準備（Android） Google Cloud Messaging for Androidの APIを有効にします。
  • 24. Copyright ? NIFTY Corporation All Rights Reserved. ③プッシュ通知を利用する準備(iOS)
  • 25. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） iOS向けプッシュ通知には Apple Developer Program（有償） への登録が必要です https://developer.apple.com/jp/programs/ ※以降の手順はMonacaのビルド設定が完了している前提で進めます 【Monacaで設定】http://docs.monaca.mobi/cur/ja/manual/build/ios/build_ios/ 【Xcodeから移行】http://docs.monaca.mobi/cur/ja/manual/build/ios/import_export/
  • 26. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） https://developer.apple.com/membercenter/ Apple開発者ページのメンバーセンターへログイン後、 「Certificates, Identifiers & Profiles」を選択。
  • 27. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 「Identifiers」を選択。
  • 28. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 新しいAppIDを作ります。 ※既存のものを使う場合はこの手順は不要です ※ワイルドカードなIDは使えません 「iOS Apps」になっている ことを確認しましょう！
  • 29. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 新しいAppIDを作ります。 アプリの説明 (ascii文字で入力するのが無難です） (例) Push Notification Hands On
  • 30. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 新しいAppIDを作ります。 「Explicit App ID」を選択 「Bundle ID」を入力 プッシュ通知を利用する場合、Wildcard App IDは使えません
  • 31. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 新しいAppIDを作ります。 「Push Notifications」に チェックを入れる 「Continue」をクリック
  • 32. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 新しいAppIDが作られました。 「Push Notifications」が Enabledまたは Configurableになっている ことを確認しましょう！ Configurableの場合は 次のステップを実施すると Enabledに切り替わります。
  • 33. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） APNs用の証明書を作ります。 「Certificates」の 「All」を選択
  • 34. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） APNs用の証明書を作ります。 「Apple Push Notification service SSL (Sandbox)」を 選択して「Continue」をクリック Monacaでデバッグビルドをする場合
  • 35. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） 先ほど作成したApp IDを選択してください APNs用の証明書を作ります。
  • 36. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） APNs用の証明書を作ります。 CSRファイルは、 アプリビルド用証明書を 作成した際と同じものを 使ってください。 ※無くした場合は、CSRファイルを 作り直してアプリビルド用の証明書も 作成し直してください ※MonacaでCSRファイルを作成済みの 場合はMonacaクラウドIDEから エクスポートして利用してください
  • 37. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） CSRファイルを選択してください APNs用の証明書を作ります。
  • 38. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） APNs用の証明書が作成されました。 ダウンロードしてください
  • 39. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 左メニューの Provisioning Profilesの Allを選択 Provisioning Profilesの ページへ遷移後に、 右上の「＋」を選択
  • 40. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 デバッグビルドする場合は Developmentを選択 アドホックビルドする場合は Ad Hocを選択
  • 41. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 今回使うAppIDを選択
  • 42. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 今回使うビルド用証明書を選択
  • 43. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 動作確認で使う端末を選択 ※端末登録していない場合はdeviceから要登録
  • 44. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） Monacaで秘密鍵とCSRを作成した方は、 Monacaにログインしてプロジェクトを開いてください。 「設定＞iOSビルド設定」を開きデベロッパー証明書をエクスポートします。 ※macのキーチェーンアクセスで秘密鍵、CSRを作成した方は不要です
  • 45. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルを作成します。 プロファイルの名前を入力
  • 46. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） プロビジョニングプロファイルが作成されました。 ダウンロードしてください
  • 47. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） ここまでの作業で 以下の２つのファイルが出来ればOKです。 プロビジョニング プロファイル APNs用 証明書(.cer)
  • 48. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） ダウンロードした APNs用証明書をダブルクリックしてください。 APNs用 証明書
  • 49. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） キーチェーンアクセスの証明書の項目に 「Apple Development iOS Push Services: **」と それに紐づく秘密鍵がインポートされたことを確認してください。
  • 50. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） キーチェーンアクセスの証明書の項目の 「Apple Development iOS Push Services: **」を 右クリックして「書き出す」を選択してください。
  • 51. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） P12形式で保存先を決めると、パスワードを求められます。 パスワードは入力しないでOKを押してください。
  • 52. right ? NIFTY Corporation All Rights Reserved. * ③プッシュ通知を利用する準備（iOS） ここまでの作業で手元に３つのファイルがあればOKです。 Appleの 開発者サイトから ダウンロードした プロビジョニング プロファイル キーチェーンアクセスから 書き出した APNs用証明書(p12) Appleの 開発者サイトから ダウンロードした APNs用 証明書(cer)
  • 53. right ? NIFTY Corporation All Rights Reserved. * チェックポイント！（プッシュ通知を使う準備） ? iOS ? APNs用の証明書(p12)が準備できていること ?デバッグビルドする場合は「APNs Development iOS」 ?アドホックビルドする場合は「APNs Production iOS」 ? プロビジョニングプロファイルが準備できている こと ? Android ? APIキーが生成できていること ?種別がサーバーアプリケーションのキーであること ?IPが任意のIPを許可であること ? Google Cloud Messaging for AndroidのAPIが、有 効化されていること
  • 54. Copyright ? NIFTY Corporation All Rights Reserved. ④mobile backendでプッシュ通知機能を 利用する準備
  • 55. right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 ログインする http://mb.cloud.nifty.com/
  • 56. right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 mBaaSをはじめて利用される方は、 アプリの新規作成画面が表示されます。 アプリ名を入力して新規作成してください。 「PushTest」 と入力してください
  • 57. right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 ※ログイン後に、この画面が出た方は… 「+新しいアプリ」 をクリックすると でてきます! 「PushTest」 と入力してください
  • 58. right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 アプリが作成されました。 ２つのキーは 後で使います OKをクリックすると 管理画面が表示されます ※後でキーを確認する方法は 次のページに掲載しています。
  • 59. right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 後でキーを確認するには… アプリ設定
  • 60. right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 後でキーを確認するには… ここにあります
  • 61. right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 データストアを確認しておく データストア
  • 62. right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 データストアを確認しておく
  • 63. right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 APNs証明書とGCMのAPIキーを mobile backendに設定します。 再びアプリ設定の 「プッシュ通知」を選択
  • 64. right ? NIFTY Corporation All Rights Reserved. * ④mobile backendでプッシュ通知機能を利用する準備 APNs証明書とGCMのAPIキーをmobile backendに設定します。 許可する Google Developer Consoleで 取得したAPIキーを入力 キーチェーンアクセスから 書き出したAPNs証明書(p12)を アップロードする
  • 65. Copyright ? NIFTY Corporation All Rights Reserved. ⑤Monacaで作ったアプリに プラグインを組み込む
  • 66. right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む Monacaにログインして 新しいプロジェクトを作ります 「開発をスタート」 をクリック
  • 67. right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む 「Monaca.ioで開発」を 選択してください
  • 68. right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む 最小限のテンプレート 「選択」 をクリック
  • 69. right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む 「プッシュ通知体験アプリ」 ※適当に書き変える 「プロジェクトを作成する」 をクリック
  • 70. right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む 今作成したプロジェクトを開きます プッシュ通知体験アプリ
  • 71. right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む 上部メニューの「設定」から、 「Cordovaプラグインの管理」を選択
  • 72. right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む リストの下の方に「NiftyMB」という プラグインがあるので「有効」にしてください 。 ↓のようになればOKです。
  • 73. right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む index.htmlを編集して配信端末(installation)の 登録処理をできるようにします。 index.htmlの headタグ内の scriptタグの 内側に追記。 installationの保存に必要な deviceTokenの取得には プラグイン内部の ネイティブコードが必要です。 ネイティブコードの準備が完了した devicereadyイベント発火後に 取得／保存の処理を行います。
  • 74. right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む index.htmlを編集して配信端末(installation)の 登録処理をできるようにします。 devicereadyイベント発火時のリスナー関数で、 NCMBプラグインのsetDeviceToken関数を呼び出します。 この関数はdeviceTokenの取得とmobile backendへの登録を行います。 ※3つの引数は次のステップで解説します
  • 75. right ? NIFTY Corporation All Rights Reserved. * ⑤Monacaで作ったアプリにプラグインを組み込む index.htmlを編集して配信端末(installation)の 登録処理をできるようにします。 前ステップで仮に記載したキーやIDの部分を適切なものに書き換えます。 mobile backendのアプリケーションキーとクライアントキーを第1-2引数に、 Google Developer Consoleのプロジェクト番号を第3引数に記載します。
  • 76. Copyright ? NIFTY Corporation All Rights Reserved. ⑥動作確認！
  • 77. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?アプリのビルド? ? ビルド設定 （for Android） ? ビルド手順 （for Android） ? ビルド設定 （for iOS） ? ビルド手順 （for iOS） ? 動作確認 ここから先は確認端末に応じて 必要な部分を実施してください。
  • 78. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド設定（for Android）? Androidの方 動作確認だけであれば特に設定は必要ありません。 ストアに提出する場合はMonacaのドキュメントを 参考にしてください。
  • 79. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for Android）? 上部メニューの「ビルド」から、 「Androidアプリのビルド」を選択
  • 80. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for Android）? デバッグビルドを選択
  • 81. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for Android）? 少々お待ちください…
  • 82. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for Android）? 任意の方法で端末へ 転送してください
  • 83. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド設定（for iOS）? ? mobile backendに設定したAPNs証明書が DevelopmentかProductionかを確認して、適切なビル ドを行ってください ? Developmentの場合はデバッグビルド ? Productionの場合はアドホックビルド ? ビルド用の証明書と秘密鍵の組み合わせが正しくな るよう設定してください ? MonacaのiOSアプリ設定のAppIDはAPNs証明書と一 致させてください ? プロビジョニングプロファイルのAppIDはAPNs証明 書と一致させてください iOSの方 ビルドに関する設定が必要です。
  • 84. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド設定（for iOS）? iOSの方 ビルドに関する設定が必要です。 上部メニューの「設定」から、 「iOSアプリ設定」を選択
  • 85. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド設定（for iOS）? iOSの方 ビルドに関する設定が必要です。 App IDに、前半で作成した 証明書に設定したものと同じ IDを設定してください。
  • 86. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? 上部メニューの「ビルド」から 、 「iOSアプリのビルド」を選択
  • 87. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? デバッグビルドを選択
  • 88. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? プロビジョニングプロフ ァイルをアップロード
  • 89. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? 少々お待ち下さい…
  • 90. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? クリックして ダウンロード してください
  • 91. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?ビルド手順（for iOS）? ? iTunes経由 ? Xcode経由 ? http://docs.monaca.mobi/cur/ja/manual/deploy/non_market_deploy/ ? DeployGate経由（OTA） ? https://deploygate.com/ 任意の方法で端末へ転送してください Monacaにドキュメントがあります
  • 92. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?動作確認? 端末上のアプリを起動してください。 ※アプリでプッシュ通知の許可を求められた場合は許可してください ※mobile backendの管理画面上で「データストア＞installationクラス」に オブジェクトが増えていれば端末登録成功です ※端末登録が上手くいかない場合は、アプリを再起動してみてください
  • 93. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?動作確認? プッシュ通知の「＋新しいプッシュ通知」を選択。
  • 94. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?動作確認? メッセージに 送りたい文字列を 入力
  • 95. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?動作確認? Android端末に配信する iOS端末に配信する プッシュ通知を作成して 少々お待ちください…
  • 96. right ? NIFTY Corporation All Rights Reserved. * ⑥動作確認 ?動作確認? mobile backend上のプッシュ通知の 配信ステータスが「配信済み」になり 、 端末にプッシュ通知が届きます。
  • 97. right ? NIFTY Corporation All Rights Reserved. *
About
? 2025 狠狠撸