Firebase Cloud MessagingをつかってiOSアプリにプッシュ通知を送ろう（前編）

## Firebase Cloud Messagingをつかってみた

iOSアプリにプッシュ通知を送りたいので、Firebase Cloud Messagingをつかってみました。
プッシュ通知用の証明書が必要なので手順は多いですが、予想以上に簡単でびっくりしました。

この記事では、Firebaseにアプリを登録をして、プッシュ通知を送るところまでを紹介します。
「プッシュ通知を実装したいけどサーバーとかよくわからないし」というかたや、「お試しでプッシュ通知を実装してみようかな」というかたのご参考になれば幸いです。

この記事は、こちら↓のFirebase公式ドキュメントを参考にして書いています。
[iOS での Firebase Cloud Messaging クライアント アプリの設定  |  Firebase](https://firebase.google.com/docs/cloud-messaging/ios/client?hl=ja)

公式ドキュメントはとてもわかりやすくて参考になるので、ぜひあわせてご覧ください。

## Xcodeプロジェクトの作成とFirebaseへのプロジェクト登録

まずはXcodeでプロジェクトを作成します。
プロジェクトの作成手順はいつも通りで構いませんが、今回はお試しなのでSngle View Appを選択します。

<img width="1512" alt="001.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/f914cb48-90a7-0a25-5f1b-6900a82cb34f.png">


Firebaseにアプリを登録するときに、プロジェクトに登録したBundle Identifierが必要なのでコピーしておいてください。

ブラウザーで [FirebaseのConsole](https://console.firebase.google.com/?hl=ja) を開いて、「プロジェクトを追加」をクリックします。

![002.png](https://qiita-image-store.s3.amazonaws.com/0/38924/7ae1e3c5-27d5-b156-0874-8bd6c6d06121.png)


プロジェクトの追加画面が表示されるので、プロジェクト名に任意の名前を入力します。今回はFirebaseのテストをするので、「FirebaseTest」にしました。
アナリティクスと課金の地域は「日本」にして、規約などを確認したらチェックを入れて、「プロジェクトを作成」をクリックします。

![003.png](https://qiita-image-store.s3.amazonaws.com/0/38924/071319af-83a2-e8d9-5706-edfda8c22415.png)


Firebaseの概要画面が表示されるので、「iOSアプリにFirebaseを追加」をクリックします。

![004.png](https://qiita-image-store.s3.amazonaws.com/0/38924/9cc7911a-b288-0740-06ea-a7310ee7ef9a.png)


iOSアプリにFirebaseを追加画面が表示されるので、必要な内容を入力していきます。

まずは、アプリを登録します。
さきほどコピーしたBundle Identifierを「iOSバンドルID」にペーストします。アプリのニックネームは省略できますが、今回は「FirebaseTest」と入れておきます。App Store IDは空白のままでかまいません。

![005-01.png](https://qiita-image-store.s3.amazonaws.com/0/38924/dc0b9c8a-3926-d9a6-ee01-def8282ba08a.png)


次に、設定ファイルをダウンロードします。
「GoogleService-Info.plistをダウンロード」をクリックすると、ダウンロードがはじまります。

![006.png](https://qiita-image-store.s3.amazonaws.com/0/38924/dcc2ea22-b660-4d43-a74c-16c66d65e50b.png)
<img width="956" alt="007.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/d0b1c6c7-1897-195f-18e9-957e04899ce0.png">


ダウンロードしたファイルを、Xcodeプロジェクトのルートにコピーして、ターゲットに追加します。

<img width="504" alt="008.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/c114992b-1994-e307-de27-aba379b2dfdc.png">


「次へ」ボタンを押すと、Firebase SDKの追加が表示されます。

![009.png](https://qiita-image-store.s3.amazonaws.com/0/38924/9aa46f85-60f9-b4a3-8f3b-9c4198ccf6d1.png)


ターミナルを開いて、Xcodeのプロジェクトフォルダに移動して、

```
pod init
```

を実行します。
XcodeのプロジェクトフォルダにPodfileが作成されているので、エディターで開きます。

<img width="956" alt="010.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/93c8ee0a-b377-9704-7a3c-ab225f299911.png">


Podfileに以下の2行を追加します。

```
  pod 'Firebase/Core'
  pod 'Firebase/Messaging'
```

<img width="812" alt="011.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/77bba4f2-86de-70a9-39c7-026212451860.png">


ターミナルで

```
pod install
```

を実行します。
FirebaseでつかうSDKがインストールされて「FirebaseTest.xcworkspace」が作成されます。

<img width="956" alt="012.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/38ab2746-bde6-ad5c-99d0-8c016232f097.png">


「次へ」ボタンを押すと、初期化コードの追加画面が表示されます。
Firebase SDKを初期化するためのコードをプロジェクトに追加しましょう。

コードが書いている行の右端にある四角がふたつ重なったボタンをクリックすると、コードをコピーできます。
さきほど作成された「FirebaseTest.xcworkspace」をダブルクリックしてプロジェクトを開いて、AppDelegate.swiftを選択します。

![013.png](https://qiita-image-store.s3.amazonaws.com/0/38924/720fd54c-cece-ed0a-4124-fc78d0d3ff77.png)


さきほどコピーしたコードを貼りつけます（2行あるのでご注意ください）。

```
import Firebase
```

```
FirebaseApp.configure()
```

<img width="1512" alt="014.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/7b0bcf0d-2da8-5bc1-f2af-86e8d2c3ebd5.png">


コードを貼りつけたら、Firebaseの管理画面で「次へ」ボタンを押してから、Xcodeでシミュレーターを実行します。
無事にFirebaseと通信ができたら、「Firebase がアプリに正常に追加されました」と表示されます。やったね！

![015.png](https://qiita-image-store.s3.amazonaws.com/0/38924/f49a0356-125a-6929-96a3-1f759d96d546.png)


「コンソールに進む」ボタンをクリックして、コンソール画面に進みましょう。

![016.png](https://qiita-image-store.s3.amazonaws.com/0/38924/4fbaf0c1-cd7d-65d8-5543-2a94d141da94.png)


これで、Xcodeプロジェクトの作成とFirebaseへのプロジェクト登録が終わりです。

## 証明書の作成

プッシュ通知用の証明書を作成します。
手順が多いので、ひとつずつ内容を確認しながら進めていきましょう。

### 証明書要求（CSRファイル）を作成

まずは、証明書要求（CSRファイル）を作成します。
キーチェーンアクセスを起動して、メニューからキーチェーンアクセス -> 証明書アシスタント -> 認証局に証明書を要求を選択します。

<img width="615" alt="017.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/821c8e17-9552-99c6-8632-2767e1b8781f.png">


証明書アシスタント画面が表示されるので、「ユーザーのメールアドレス」を入力します。「通称」は初期値のまま、「CAのメールアドレス」は空白でかまいません。
要求の種類は、「ディスクに保存」を選択して、「鍵ペア情報を指定」にチェックを入れます。

<img width="728" alt="018.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/5930dbd5-bf49-be36-7ead-ba60eca77972.png">


鍵ペア情報画面が表示されるので、「鍵のサイズ」は2048ビットで、「アルゴリズム」がRSAになっていることを確認して続けるボタンをクリックします。

<img width="728" alt="019.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/a1148cbc-603c-e501-362c-7b9002443e86.png">


設定結果画面が表示されるので、「Finderに表示」ボタンをクリックして、保存したCSRファイルを表示します（あとでつかいます）。

<img width="728" alt="020.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/61054ab3-8710-b8cf-2d6b-074a2f0a6308.png">


### 開発用証明書を作成

次に、CSRファイルから、開発者用証明書を作成します。
Apple Developerサイトにログインして「Certificates, Identifiers & Profiles」をクリックします。
画面左の「Certificates」のなかにある「All」をクリックしてから、右上の+ボタンをクリックしてあたらしい証明書を作成します。

![021.png](https://qiita-image-store.s3.amazonaws.com/0/38924/278874a8-5daa-a7bd-68d7-d5e44fe6b5c4.png)


Add iOS Certificate画面が表示されるので、「iOS App Development」を選択して「Continue」ボタンをクリックします。

![022.png](https://qiita-image-store.s3.amazonaws.com/0/38924/47281ff2-6fb8-00ac-9597-c1c05a530888.png)
![023.png](https://qiita-image-store.s3.amazonaws.com/0/38924/e7132d47-b675-4a4f-d495-8080d1b1be07.png)


About Creating a Certificate Signing Request (CSR)画面が表示されるので、内容を確認して「Continue」ボタンをクリックします。

![024.png](https://qiita-image-store.s3.amazonaws.com/0/38924/0fe78811-bf32-45ff-75ca-b83d0c83aa9e.png)


Generate your certificate画面が表示されるので、「Choose File」ボタンをクリックして、さきほど作成したCSRファイルを選択します。

![025.png](https://qiita-image-store.s3.amazonaws.com/0/38924/df760501-3e70-565c-76bf-2ac6298d187a.png)


選択できたら、「Continue」ボタンをクリックします。

![026.png](https://qiita-image-store.s3.amazonaws.com/0/38924/5628ee95-74ca-95f8-017b-da4387254135.png)


開発者証明書が作成されたので、「Download」ボタンをクリックして、証明書をダウンロードします。ダウンロードが終わったら、「Done」ボタンをクリックします。

![027.png](https://qiita-image-store.s3.amazonaws.com/0/38924/f4fb23fd-94a1-e82f-c77a-47924f8b4159.png)


### App IDを作成

プッシュ通知を受信するアプリのIDを作成します。
Apple Developerサイトにログインして「Certificates, Identifiers & Profiles」をクリックします。
画面左の「Identifiers」のなかにある「App IDs」をクリックしてから、右上の+ボタンをクリックしてあたらしいApp IDを作成します。

![028.png](https://qiita-image-store.s3.amazonaws.com/0/38924/52225eee-7a40-b088-26eb-272bd2a8a93c.png)


Register iOS App IDs画面が表示されるので、App ID Descriptionにアプリ名を入力します。今回は「FirebaseTest」にします。

![029.png](https://qiita-image-store.s3.amazonaws.com/0/38924/9eb11a5b-48f5-fe6e-f21a-8ef76677a501.png)


App ID Suffixの「Explicit App ID」を選択して、「Bundle ID」にXcodeのBundle Identifierを入力します。

![030.png](https://qiita-image-store.s3.amazonaws.com/0/38924/6be44108-0df2-e17f-036c-23e2aee22ed5.png)


最後に、App Servicesの「Push Notifications」にチェックを入れて、「Continue」ボタンをクリックします。

![031.png](https://qiita-image-store.s3.amazonaws.com/0/38924/67e1acf6-0dd8-5d4b-53a7-e91f2141b571.png)


設定内容が表示されるので、内容を確認して、「Register」ボタンをクリックします。

![032.png](https://qiita-image-store.s3.amazonaws.com/0/38924/0f4fdc43-8540-37a6-91f3-13edd93e896a.png)
![033.png](https://qiita-image-store.s3.amazonaws.com/0/38924/a63b091b-482e-8ce2-deeb-b46631c4f433.png)


登録が完了したら、「Done」ボタンをクリックします。

![034.png](https://qiita-image-store.s3.amazonaws.com/0/38924/ce3f17de-a0eb-75b3-8daf-c820f42e6f72.png)


### 端末を登録

プッシュ通知を受信する端末を登録しましょう。お手元にiOS端末をご用意ください。
Apple Developerサイトにログインして「Certificates, Identifiers & Profiles」をクリックします。
画面左の「Devices」のなかにある「All」をクリックしてから、右上の+ボタンをクリックしてあたらしい端末を作成します。

![035.png](https://qiita-image-store.s3.amazonaws.com/0/38924/0db30df1-9401-f50f-f2c6-0c14eb747189.png)


Registering a New Device or Multiple Devices画面が表示されるので、「Register Device」を選択します。

![036.png](https://qiita-image-store.s3.amazonaws.com/0/38924/edbc22a9-d9b1-98e2-9604-e17724318bdf.png)


「Name」に任意の端末名を入力して、「UDID」に端末のUDIDを入力したら、「Continue」ボタンをクリックします。

![037.png](https://qiita-image-store.s3.amazonaws.com/0/38924/e02ea35a-5715-0a38-44dd-ca9be44093db.png)


### プロビジョニングプロファイルを作成

プッシュ通知を受信するアプリ用のプロビジョニングプロファイルを作成します。
Apple Developerサイトにログインして「Certificates, Identifiers & Profiles」をクリックします。
画面左の「Provisioning Profiles」のなかにある「All」をクリックしてから、右上の+ボタンをクリックしてあたらしいプロビジョニングプロファイルを作成します。

![038.png](https://qiita-image-store.s3.amazonaws.com/0/38924/cab78b7f-7703-7f07-895b-912a9a5f09bf.png)


Add iOS Provisioning Profiles画面が表示されるので、「iOS App Development」を選択して、「Continue」ボタンをクリックします。

![039.png](https://qiita-image-store.s3.amazonaws.com/0/38924/d0e5159b-5d94-9f45-edd9-3686704fae29.png)
![040.png](https://qiita-image-store.s3.amazonaws.com/0/38924/4504a124-5eee-6eae-e579-375ef59a5f8a.png)


Select App ID画面が表示されるので、さきほど登録したApp IDを選択します。

![041.png](https://qiita-image-store.s3.amazonaws.com/0/38924/2f077ce4-95c5-1f80-178a-90abb25fdc58.png)


さきほど登録した開発者証明書にチェックを入れます。

![042.png](https://qiita-image-store.s3.amazonaws.com/0/38924/14d443a6-342a-f93e-8eec-0b76c3457558.png)


さきほど登録した端末にチェックを入れます。

![043.png](https://qiita-image-store.s3.amazonaws.com/0/38924/3d1ca0da-ccac-d8a7-38a8-b7f6921c660f.png)


Name this profile and generate画面が表示されるので、「Profile Name」にプロビジョニングプロファイルの名前を入力して、「Continue」ボタンをクリックします。

![044.png](https://qiita-image-store.s3.amazonaws.com/0/38924/88284d2f-6d75-1901-8dc5-7cddf108ea2f.png)


プロファイルのダウンロード画面が表示されるので、「Download」ボタンをクリックしてダウンロードします。ダウンロードが終わったら、「Done」ボタンをクリックします。

![045.png](https://qiita-image-store.s3.amazonaws.com/0/38924/d2d52b92-e1d3-0d94-e87d-b9bab2d7d001.png)
<img width="956" alt="046.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/8a0ca703-9980-1554-88de-d282ba403dd3.png">


### APNs証明書を作成

プッシュ通知用のAPNs（Apple Push Notification Service）証明書を作成します。
Apple Developerサイトにログインして「Certificates, Identifiers & Profiles」をクリックします。
画面左の「Certificates」のなかにある「All」をクリックしてから、右上の+ボタンをクリックしてあたらしい証明書を作成します。
Add iOS Certificate画面が表示されるので、「Apple Push Notification service SSL (Sandbox)」を選択して「Continue」ボタンをクリックします。

![047.png](https://qiita-image-store.s3.amazonaws.com/0/38924/2e748eb7-115d-cb22-a4dc-5e306efdce25.png)

Which App ID would you like to use?画面が表示されるので、さきほど作成したApp IDを選択します。

![048.png](https://qiita-image-store.s3.amazonaws.com/0/38924/d21af4c1-6e3b-483f-04f6-1d097fdc1bb0.png)


About Creating a Certificate Signing Request (CSR)画面が表示されるので、内容を確認して「Continue」ボタンをクリックします。

![049.png](https://qiita-image-store.s3.amazonaws.com/0/38924/27d4c83f-3775-661f-4195-7c92baa817d4.png)


Generate your certificate画面が表示されるので、「Choose File」ボタンをクリックして、さきほど作成したCSRファイルを選択して、「Continue」ボタンをクリックします。

![050.png](https://qiita-image-store.s3.amazonaws.com/0/38924/ddb80d97-55d5-b247-601b-4c20f3913320.png)


プッシュ通知用のAPNs証明書が作成されたので、「Download」ボタンをクリックして、証明書をダウンロードします。ダウンロードが終わったら、「Done」ボタンをクリックします。

![051.png](https://qiita-image-store.s3.amazonaws.com/0/38924/f26ae7bf-7a4b-2125-fac5-fee5c596c404.png)


ダウンロードした証明書をダブルクリックして、キーチェーンアクセスに登録します。

<img width="956" alt="052.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/6bc34096-e598-f1a2-c259-d9be53b8c58a.png">


キーチェーンアクセスを開いて、APNs用証明書「Apple Development iOS Push Services……」を選択します。

<img width="989" alt="053.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/d402d242-9b77-9f2a-63fd-84ea7d77fcb2.png">


証明書を右クリックして、「"Apple Development iOS Push Services……"を書き出す」をクリックします。

![054.png](https://qiita-image-store.s3.amazonaws.com/0/38924/3cb1ec22-02d9-f267-758d-e40b3991ea46.png)


名前を入力して、保存場所を選択してから、「保存」ボタンをクリックします。今回は「プッシュ通知証明書」という名前にします。

![055.png](https://qiita-image-store.s3.amazonaws.com/0/38924/f8a0a4a7-d580-cb74-b07c-59e886bc6d2b.png)


パスワードを入力して「OK」ボタンをクリックします（このパスワードは、あとで必要になるので、パスワード管理ツールなどに保存しておいてください）。

<img width="556" alt="056.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/aa29d2a1-7ac8-e0c3-8d4c-aceb82331158.png">


さきほど指定した保存場所に、「プッシュ通知証明書.p12」が作成されました。

これで証明書の作成が終わりです。
いやー、長かったですね。おつかれさまでした。

## つづく

画像をアップしようとするとエラーになるので、ここから先は[後編](https://qiita.com/toshi586014/items/627176dcf461365b2c31#_reference-f6fa2dff7f89cd6df8f3)で紹介します。