プッシュ通知はメールとは違い、開封する手間も少なく自由度の高い使い方が出来るのが魅力ですね。
今回はMonacaを使い、iOSへのプッシュ通知の実装の流れをノンストップで記事にしました。
- はじめに
- プッシュ通知に必要なもの
- 用語の整理
- プッシュ通知の準備
- 証明書の作成
- Monaca(クライアント側)の準備
- ニフクラ mobile backend(サーバー側)の準備
- 端末にインストール
- 動作確認
- よくあるエラー
- おわりに
はじめに
プッシュ通知は配信までの流れや必要なファイル・サービスを理解すれば簡単に送る事が出来るようになるのですが、 配信までに必要なファイルが少々多いため混乱しがちです。
今回は、ブラウザから使用できるMonacaで開発したアプリに、ニフクラ mobile backendのプッシュ通知機能を実装して、実際にiOS向けにプッシュ通知を配信するまでの流れを解説いたします。
※開発環境がMonacaではない場合でもほとんど同じ流れで配信可能です。
プッシュ通知に必要なもの
プッシュ通知を実装するために必要なものはざっくり下記の2点です。
- プッシュ通知サービス
- プッシュ通知に使うファイル
プッシュ通知サービス
iOSであればAPNs(Apple Push Notification Service)というサービスを経由してプッシュ通知を配信します。
通常はサーバーを用意し、APNsに対してプッシュ通知の配信をリクエストする仕組みも開発しなければなりませんが、 ニフクラ mobile backendのようなプッシュ通知サービスを使う事で開発不要となります。
ニフクラ mobile backendであれば無料で100万通/月送る事が出来ますので、今回はこちらのサービスを使っていきます。
■ mBaaSでサーバー開発不要！ | ニフクラ mobile backend
プッシュ通知に使うファイル
プッシュ通知を送るためにはcertificate(証明書)というものを発行して使用します。
今回使用する証明書は2種類あり、開発用証明書(ビルド用)とAPNs用証明書(プッシュ通知用)と呼ばれています。
これら2つの違いは以下となります。
→ 開発者である事を証明するために使用。実機にビルドするために必要
APNs用証明書(プッシュ通知用)
→ APNsへ認証を要求するために使用。プッシュ通知を送るために必要
これらの証明書は正しく発行する必要があり、手順や参照ファイルを間違えると上手くプッシュ通知の配信が行えないので、 慎重に作成を進めていきましょう。
用語の整理
手順に沿って設定していると、何のためにファイルを作って、今何をしているのか迷子になりがちです。
そのため、分からなくなったら以下を確認しましょう。
CSRファイル(.certSigningRequest)
Appleから各種証明書 (開発用証明書 / APNs用証明書) を発行してもらうために必要なファイルです。
ビルドする際にはAppleに開発元を伝えなくてはならず、CSRファイルはそのために使用します。
Appleに後述の証明書を登録していく際に必要になります。
開発用証明書(.cer)
ビルドに必要な証明書は3種類存在し、以下が説明です。
今回はDevelopmentを作成します。
| 証明書の種類 | 説明 |
|---|---|
| Development | デバッグ用のアプリのビルドに利用 |
| AdHoc | 検証用アプリのビルドに利用 |
| Distribution | App Storeへ公開するアプリのビルドに利用 |
作成後、使用しているPCのキーチェーンに登録することで実機ビルドが可能となります。
APNs用証明書
プッシュ通知を送るために使用する証明書は2種類存在し、以下が説明です。
今回はDevelopmentを作成します。
| 証明書の種類 | 説明 |
|---|---|
| Development | 開発用のアプリに利用 |
| Production | 本番用のアプリに利用 |
App ID
アプリのIDであり、プッシュ通知を使用するアプリかどうかなどの情報をアプリと紐づけます。
後述の「Push Notifications」のチェックを忘れるとプッシュ通知が送れないので、よく確認して作成しましょう。
Bundle ID
アプリケーションを識別するためのIDであり、特定のアプリを指定して何かをする際に使用します。
設定はApp IDの作成時に行い、Monacaで登録するApp IDにはこちらを使用します。
今回はアプリにプッシュ通知の許可を設定するために使用します。
UDID (端末情報)
iPhone/iPadなどiOSの端末にそれぞれ与えられているその端末固有のIDのことです。
ビルドしたアプリを開発環境（AdHoc環境）で動かす場合、このIDを使って端末を識別します。
プロビショニングプロファイル
ビルドしたアプリを実機にインストールするために使用します。
後述の手順に関係図を添付していますが、APP ID、UDID、開発用証明書の関係性をまとめたファイルです。
p12形式のファイル
.cer形式で出力した証明書には秘密鍵が含まれていませんが、p12形式で出力した場合は証明書＋秘密鍵の情報が含まれます。
※他人が作成したp12形式の証明書を使用する場合、キーチェーンに入れる事で秘密鍵も認識されます。
今回はこのp12形式でAPNs用証明書を登録をしていきます。
プッシュ通知の準備
今回の動作確認で使った環境
・ OS: macOS Monterey 12.5.1
・ 動作確認端末: iPhone SE (第2世代)
・ Apple Developer Programへの参加（99米ドル/ 年）
・ Google Chrome
・ Monaca（無料）（アプリ開発プラットフォーム）
・ ニフクラ mobile backend（無料）（プッシュ通知ASPサービス）
プッシュ通知を行うためのファイルを用意
①CSRファイルの作成
②開発用証明書 (.cer) の作成
③APP IDの登録
④端末の登録（Apple Developer Programに登録する端末）
⑤プロビジョニングプロファイルの作成
⑥APNs用証明書 (.cer) の作成
⑦APNs用証明書 (.cer) を.p12形式で書き出す
関係図に表すとこんな感じです。
最終的には②,⑤,⑦のファイルを使いますので、順番に用意していきましょう。
証明書の作成
手順① CSRファイルの作成
※CSRファイルは初回作成後、プッシュ通知の更新や、違うアプリに使用する際にもそのまま流用可能です。
1. キーチェーンアクセスを開きます
2. 「キーチェーンアクセス」>「証明書アシスタント」>「認証局に証明書を要求」をクリックします
3. 「ユーザーのメールアドレス」を入力します（「通称」はそのまま、「CAのメールアドレス」は空欄でOK）
4. 「要求の処理」は「ディスクに保存」を選択し「鍵ペア情報を設定」にチェックを入れます
5. 「続ける」をクリックします
6. 保存先の選択が出るので任意の場所を選択し「保存」をクリックします
7. 「鍵ペア情報」画面を確認して「続ける」をクリックします
8. 「設定結果」画面が出るので「完了」をクリックします
手順② 開発用証明書の作成
※開発用証明書は初回作成後、プッシュ通知の更新や、違うアプリに使用する際にもそのまま流用可能です。
1. Apple Developer Program にログインします
2. 「Certificates, Identifiers & Profiles」をクリックします
3. 「Certificates」をクリックし、「Certificates」の隣にある「+」をクリックします
4. 「Create a New Certificate」画面が表示されるので設定していきます
5. 「iOS App Development」にチェックをいれ、右上の方の「Continue」をクリックします
6. 「Choose File」をクリックして、1.で作成した「CSRファイルの作成」を選択し、「Continue」をクリックします
7. 開発用証明書が作成されるので、「Download」をクリックして書き出しておきます
8. 開発用証明書(.cer)の作成は完了です
手順③ App ID の登録
1. 「Certificates, Identifiers & Profiles」をクリックします
2. 「Identifiers」の右の「＋」をクリックします
3. 「Register a New Identifier」が表示されるので「App IDs」にチェックをいれ、右上の方の「Continue」をクリックします
4. 「Select a type」が表示されるので「App」を選択し、右上の方の「Continue」をクリックします
5. 「Description」にアプリの概要を記入します 例） TestPushApp
6. 「Bundle ID」では「Explicit」を選択し、「Bundle ID」を入力します
※「Wildcard」を選択するとプッシュ通知が利用できないので注意！
※「Bundle ID」は アプリ側で同じものを設定します
7. 下にスクロールして「Capabilities」の「Push Notifications」にチェックを入れます
8. 「Continue」をクリックします
9. 確認画面が表示されるので「Push Notifications」にチェックが入っている事を確認して「Register」をクリックします
10. これでApp ID 作成は完了です
手順④ 端末の登録
1. 「Devices」をクリックして、「Devices」の隣にある「＋」をクリックします
2. 「Platform」は「iOS, tvOS, WatchOS」に選択します
3. 端末の「Device Name」と「Device ID(UDID)」を入力します
※「Device Name」は自由に設定できます
※「Device ID(UDID)」はXcodeを使うと確認し易いです
4. Mac に端末を接続し、Xcodeを起動します
5. 「Window」>「Devices and Simulators」をクリックします
6. 「identifier」としてUDIDが確認できます
7. 記入できたら「Continue」をクリックします
8. 次の画面で端末情報を確認して「Register」をクリックします
9. これで端末登録は完了です
手順⑤ プロビジョニングプロファイルの作成
1. 「Profiles」をクリックして、「Profiles」の隣にある「＋」をクリックします
2. 「Development」の「iOS App Development」を選択し、「Continue」をクリックします
3. 利用する App ID、開発用証明書、端末をそれぞれ紐付けていきます
4. 手順③で作成したApp IDを選択し、「Continue」をクリックします
5. 手順②で作成した（あるいは既存の） 開発用証明書 を選択し、「Continue」をクリックします
6. 手順④で登録した（Apple Developer Programに登録してある）端末を選択し、「Continue」をクリックします
7. 最後に「Provisioning Profile Name」にファイル名入力します
例） TestPushApp Provisioning Profiles
8. 紐付けを確認し「Generate」をクリックします
9. プロビショニングプロファイルが作成されるので、「Download」をクリックして書き出しておきます
10. プロビショニングプロファイルの作成は完了です
手順⑥ APNs用証明書の作成
1. 「Certificates」をクリックして、「Certificates」の隣にある「＋」をクリックします
2. 手順②で開発用証明書を作成したときとは異なり、下にスクロールし、「Service」の「Apple Push Notification service SSL (Sandbox)」をチェックに入れます
3. 「Continue」をクリックします
4. 手順③で作成した App ID を選択し、「Continue」をクリックします
5. 手順①で作成した（あるいは既存の）CSRファイルを選択し、「Continue」をクリックします
6. APNs用証明書(.cer) が作成されるので、「Download」をクリックして書き出しておきます
7. これでAPNs用証明書(.cer) の作成は完了です
手順⑦ APNs用証明書を.p12形式で書き出す
1. ⑥で作成した「APNs用証明書(.cer)」をダブルクリックしてキーチェーンアクセスを開きます
2. APNs用証明書(.cer) の左にある三角マークをクリックして開きます
3. APNs用証明書(.cer) ファイルには鍵がセットされています
4. APNs用証明書(.p12) を書き出すには、開いた状態で 鍵ではなく証明書の上で右クリック をして「～を書き出す…」をクリックします
5. ファイル名「名前」と保存先「場所」を指定して「保存」をクリックします
6. パスワードを求められますが、 何も入力しない で「OK」をクリックします
※この後、システム側にパスワードを求められる場合があります。
7. APNs用証明書(.p12) が書き出されます
8. APNs用証明書(.p12) 作成は完了です
9. ②で作成済みの「開発用証明書(.cer)」も同様にp12形式で書き出します
これですべて必要なファイルが作成できました。
Monaca(クライアント側)の準備
※Monacaへの登録、ログインは省略します。
Monaca側で行う準備は以下となります。
- プッシュ通知配信が出来るプロジェクト
- AppIDの設定、プッシュ通知用プラグインの導入
- 開発用証明書、プロビジョニングプロファイルの設定
プッシュ通知配信が出来るプロジェクトの用意
今回は以下のサンプルプロジェクトを使ってプッシュ通知を飛ばしていきましょう。
※既存プロジェクトを利用する場合は下記の「App IDの設定」へ移動してください
GitHub - NIFCLOUD-mbaas/MonacaPushApp
1. サンプルプロジェクトをzip形式でダウンロード
2. Monacaへログインしたら表示される「インポート」を選択
3. インポート形式「ZIPファイル」を選択
これでMonacaにプロジェクトがインストールされましたので、プロジェクトを開いたら下記を行います。
4. 「index.html」に、ニフクラ mobile backend側のAPIキーを入力する
App IDの設定、プッシュ通知プラグインの導入
1. 上で作成したアプリのリボンから「設定」>「iOSアプリ設定」を開きます。
2. アプリケーション情報に「App ID」を入力する欄がありますので、先ほど作成したBundle IDと一致する文字列を入力します。
3. 左側のタブから「プロジェクト」>「Cordovaプラグイン」を選択します。
4. プラグイン検索から、「NIFCloudMB」プラグインを有効にします。
開発用証明書、プロビジョニングプロファイルの設定
1. 「秘密鍵と証明書のインポート」の「インポート」をクリックして開発用証明書p12をインポートする（これをしないと、2.のボタンが押せません）
2. 「証明書とプロファイル」の「プロファイルのアップロード」をクリックしてプロビジョニングプロファイルをアップロードする
※APNs用証明書はここでは使いません。
これでMonaca側の設定は終了です。
ニフクラ mobile backend(サーバー側)の準備
※ニフクラ mobile backendへの登録、ログインは省略します。
ニフクラ mobile backend側で行う設定は以下だけです。
APNs用証明書(p12)をアップロード
- 管理画面へログインし、右上の「アプリ設定」>「プッシュ通知」>「iOSプッシュ通知(p12)」より、APNs用証明書(p12)をアップロードします。
端末にインストール
上記の手順でプッシュ通知の配信準備が整いました。
さっそくMonacaのプロジェクトをビルドし、端末にアプリをインストールしていきましょう。
1. Monacaプロジェクトのリボンから「ビルド」>「iOSアプリのビルド」を選択する
2. デバッグビルドを選択してビルド開始ボタンを押す
3. ビルドが終了するとQRコードが表示されるので、Apple Developer Programに登録済みの端末でQR読み取る
4. インストールしたアプリを開き、プッシュ通知を許可する
次に、ニフクラ mobile backendから実際にプッシュ通知を飛ばしていきましょう
動作確認
1. ニフクラ mobile backendの管理画面を開き、「プッシュ通知」のメニューに移動する
2. 「+新しいプッシュ通知」を選択する
3. タイトル、メッセージに任意の文字を入力する
4. 配信日時を「今すぐ配信」にし、「iOS端末に配信する」にチェックする
5. 「プッシュ通知を作成する」を押す
以上で先ほどインストールした端末へプッシュ通知を送る事が出来ます。
よくあるエラー
Q ：証明書をキーチェーンに登録したが、「証明書は信頼されていません」と表示されてしまう
Mac OS上に中間証明書がインストールされていない可能性があります。
■ 解消方法
1. キーチェーンアクセスで該当の証明書の情報を確認（プロパティ）
2. 発行者名、部署などを確認
3. 対応する証明書をApple PKIより手動インストール
ちなみに、今回使用する証明書に必要な中間証明書は以下となります。
■ 開発用証明書の信頼に必要
Worldwide Developer Relations - G3
■ APNs用証明書の信頼に必要
Worldwide Developer Relations - G4
おわりに
今回はMonacaとニフクラ mobile backendを使ったプッシュ通知の実装について解説いたしました。
もちろんMonacaではなく別の開発環境でもプッシュ通知を利用する事ができますし、アプリ側からプッシュ通知を配信するように設定してもご利用いただけます。
この記事がプッシュ通知実装の一助となれば幸いです。
※Android版のプッシュ通知が使いたい方は以下から実装方法をご確認いただけます。
