FirebaseでMonacaアプリのPush通知を実装する。(前編)

目次

  1. CSRファイル作成【Monaca】
  2. CERファイル作成【iOS Dev Center】
  3. p12作成【iOS Dev Center】
  4. Firebase console設定【Firebase】

1

1.CSRファイル【Monaca】

クラウドベースのスマホアプリ開発プラットフォームMonacaにログインして、新規プロジェクトを作成します。

 

今回も前回同様「Onsen UI V2 Angular 1 Minimum」を選択しました。

前回のFirebase記事:FirebaseでMonacaアプリ作ってみた

monaca.mobi-ja-dashboardiPad

・アプリに関する情報を入力します。

Monaca クラウド IDE のメニューから、 設定>iOS アプリ設定>を選択します。

アプリケーション名 アプリの名前を入力します。マーケット上などで表示されます。
App ID アプリを識別する一意の ID です。
逆ドメイン形式を推奨します ( mobi.monaca.appname など )。
英数字とピリオドのみ使用できます ( ピリオドは最低限 1 つ使用 )。
各節 ( 各レベルのドメイン ) はピリオドで区切り、各節の先頭には英字を使用します。
バージョン アプリのバージョン番号です。
iTune Connect 経由で、アプリをアップロードするとき ( 配布する場合 ) に必要となります。
3 つの節を、それぞれドットで区切ります ( 例 : 1.10.2 )。
各節の数字には、[0-99] を使用します。

※Monaca 上でのアプリ設定では、App ID に、アスタリスク (*) は使用できません。

※使用した場合、ビルドが失敗します。また、この App ID には、iOS DevCenter で登録した/する Explicit App ID と同じものを使用します。

設定後、 保存する をクリックします。

 

・iOS のビルド設定

Monaca クラウド IDE のメニューから、 設定 > iOS ビルド設定 を選択します。
既存の秘密鍵をインポートする場合には、その秘密鍵に関連付けされた証明書も Monaca へアップロードする必要があります。

秘密鍵の作成後、その秘密鍵に関連付けされたCSRファイルも同時に作成されます。
次に、エクスポート ボタンをクリックして、このCSRファイルをダウンロードします。
このファイルは、後ほど、iOS Dev Center で証明書を発行するときに使用します。

216 36

 

下記のURLにある手順を参考にしてください。
https://docs.monaca.io/ja/manual/build/ios/build_ios/#create-cer
 →[ステップ 1 : Monaca 上での iOS アプリ設定>iOS のビルド設定]参照

今回は下記の名前のCSRファイル作成しました。
CertificateSigningRequest.certSigningRequest


2

2.CERファイル作成【iOS Dev Center】

Apple Developer Accountにアクセスしてログインしてください。
Apple Developer Account

・「Edit」をクリック

2.1

・「Push Notifications」のチェックボックスを入れてDevelopmentの「Create Certificate」をクリック

2.2

・「Choose File」からMonacaで作成したCSRファイルをアップロード

2.3

・「Download」からCERファイルをダウンロード

2.4

・「Push Notifications」のDevelopmentが有効になりました。

2.5

・Distributionも同じ作業を行い、DevelopmentとDistributionを有効にする。

両方有効にしておく。

※DevelopmentとDistribution違い について
Development:ローカル(有線)で端末入れたアプリにプッシュ通知するための証明書
Distribution :TestFlightやリリースされたアプリにプッシュ通知するための証明書
2.7

・2つのCERファイルが作成される。

2.8
3

3.p12作成【iOS Dev Center】

・下記のURLにある手順で.p12 ファイル作成してください。
https://docs.monaca.io/ja/manual/build/ios/import_export/
 →[Xcode から Monaca クラウド IDE へのビルド設定のエクスポート]参照

ここまでで、証明書一式が揃う(CSR、CER、P12)

3.1
4

4.Firebase console設定【Firebase】

Firebaseにアクセスしてログインしてください。
Firebase
※アカウントない方はgoogleアカウント作成してください。(無料)

・プロジェクト作成

4.1

・アプリ作成

4.2

・バンドルID入力 アプリを追加>続行>続行>終了

4.3

・アプリ>設定

4.4

・証明書をアップロード>アップロード>[証明書選択]>開く

4.5

以上で証明書の準備が終了です。
次はMonacaで実装して、プッシュ通知をFirebaseから送ってみましょう。

 

FirebaseでMonacaアプリのPush通知を実装する。(後編)

2017.03.31

ABOUTこの記事をかいた人

主に、WEBサイトやスマホアプリの構築に従事。2016年、株式会社ヘッドウォータース入社。/ UI / UX / Angular / Monaca / React / Firebase /