Azure Notification Hubsを使用してiOSとAndroidにPush通知を行う (1) ~導入編~

Azure Notification Hubs は、バックエンドから複数のモバイル プラットフォームに　Push通知を送信ができるサービスです。
モバイルプラットフォームのPush通知はそれぞれ異なる仕組みで行われています。iOSはAPNs(Apple Push Notification Service)、AndroidはGCM(Google Cloud Messaging),FCM(Firebase Cloud Messaging)。
バックエンドでは、Push通知を送信する為に、各プラットフォームの仕組み毎の実装が必要となります。Azure Notification Hubs は、これらを抽象化して簡単に使いやすくしているものです。

Azure Notification Hubs を使用して、iOSとAndroidへPush通知する実装ついて記述していきます。

# 導入編
まずは、iOSとAndroidのアプリとPushの設定、Notification Hubsの設定を行います。

## iOS 準備
APNs(Apple Push Notification Service)を使用する為の、Push証明書の作成を行います。
[Apple Push Notification Service]( https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/Chapters/ApplePushService.html)

### 証明書要求(CSR:CertificateSigningRequest)ファイルを作成
1. キーチェーンアクセス で、[証明書アシスタント]->[認証局に証明書を要求...]をクリック
  ![2016_09_13_16_50_23.png](https://qiita-image-store.s3.amazonaws.com/0/12177/2f39896d-7764-d7ef-6d30-b8972de38543.png)

2. [ユーザーのメールアドレス][通称]を入力、[要求の処理]は、[ディスクに保存]を選択し、[続ける]をクリック
  ![2016_09_13_16_53_00.png](https://qiita-image-store.s3.amazonaws.com/0/12177/0f1feb5c-7fc5-9e53-07a8-deda0a7308e4.png)

3. [名前]と[保存先]を確認して保存する。
  ![2016_09_13_16_55.png](https://qiita-image-store.s3.amazonaws.com/0/12177/85f94461-0822-2bd3-bbb7-4715de7bfa0e.png)

4.　証明書要求(CSR:CertificateSigningRequest)のファイルが、ディスクに保存される。
  　![2016_09_13_16_56.png](https://qiita-image-store.s3.amazonaws.com/0/12177/b12c3507-eb9a-bae9-0ed6-3ab9485dedfb.png)

### iOS アプリケーションとPush Notificationsを、Apple　Developer へ登録
1. Apple　Developer へログインする
2. [Identifiers]->[App IDs]を開き、[add]ボタンをクリック
  ![2016_09_13_16_57.png](https://qiita-image-store.s3.amazonaws.com/0/12177/8c55ac32-9b63-430c-ade9-62e8b19e7861.png)
3. アプリケーションの詳細を入力し、[Continue]をクリック
  - [App ID Description]を入力
  - [App ID Prefix]を選択
  - [App ID Suffix]->[Explicit App ID]->[Bundle ID]を入力
  - [App Services]->[Push Notifications]をチェック
  ![2016_09_13_16_59.png](https://qiita-image-store.s3.amazonaws.com/0/12177/b7b3d0ff-59dc-5304-bd37-6b262f66443b.png)
4. アプリケーションの登録内容を確認し、[Register]をクリック
  ![2016_09_13_16_60.png](https://qiita-image-store.s3.amazonaws.com/0/12177/137a7d52-405a-1179-b480-112e167e225e.png)
5. 登録結果が表示されるので、[Done]をクリック
  ![2016_09_13_17_00.png](https://qiita-image-store.s3.amazonaws.com/0/12177/da1fd132-93ef-3e24-5830-8661d35dea37.png)
6. [Identifiers]->[App IDs]にアプリケーションが追加されるので、クリックして開き、[Edit]をクリック
  ![2016_09_13_17_12.png](https://qiita-image-store.s3.amazonaws.com/0/12177/c0696f4f-ff90-8d65-b027-21d2e8a16124.png)
7. [Push Notifications]->[Development SSL Certificate]の[Create Certifivate...]をクリック
  ![2016_09_13_17_20.png](https://qiita-image-store.s3.amazonaws.com/0/12177/82586aa5-b3c9-ae7e-ced9-62f8d2be8d37.png)
8. Push Notifications用の証明書(certificate)を作成
  - [Continue]をクリック
  ![2016_09_13_17_30.png](https://qiita-image-store.s3.amazonaws.com/0/12177/29dd68f6-4a8a-3179-7104-c47701ce0c36.png)
9. 「Generate your certificate.」の画面で、CSRファイルをアップロード
  - [Choose File...]をクリック
  ![2016_09_13_17_40.png](https://qiita-image-store.s3.amazonaws.com/0/12177/e5cfa7c7-d495-6fcd-e85c-0b085457b678.png)
10. ディスクに保存していた、証明書要求(CSR:CertificateSigningRequest)のファイルをアップロード
  ![2016_09_13_17_50.png](https://qiita-image-store.s3.amazonaws.com/0/12177/9b26a68b-bae5-09da-1dd9-c5c5aa92b2c2.png)
11. Push Notifications用の証明書(certificate)を作成される。
  - [Download]をクリック
  ![2016_09_13_17_60.png](https://qiita-image-store.s3.amazonaws.com/0/12177/bfeebf8d-3909-8f04-bc43-8a41814b46cc.png)
12. ディスクに保存
  ![2016_09_13_17_70.png](https://qiita-image-store.s3.amazonaws.com/0/12177/bd5629e0-bdee-03a6-2af0-7b34ddc6a77a.png)
13. Finder上で、保存したPush Notifications用の証明書(certificate)をWクリックし、キーチェーンアクセスに追加
  ![2016_09_13_17_80.png](https://qiita-image-store.s3.amazonaws.com/0/12177/489b4c79-636d-ec94-ec1d-31f3b9f12a07.png)
14. 追加されたPush Notifications用の証明書(certificate)を右クリックメニューから[.[〜を書き出す...]をクリック
  ![2016_09_13_17_81.png](https://qiita-image-store.s3.amazonaws.com/0/12177/e5e3e43e-77b8-4937-2db7-914dc0aa405e.png)
15. 個人情報交換(.p12)形式の証明書ファイルをディスクに保存
  ![2016_09_13_17_90.png](https://qiita-image-store.s3.amazonaws.com/0/12177/9d070372-3819-2b0d-f4cc-4934ab8bb703.png)
16. 証明書ファイルにパスワードを設定
  ![2016_09_13_18_00.png](https://qiita-image-store.s3.amazonaws.com/0/12177/72b46143-d13c-80a3-d343-51057baacdf9.png)

### iOS Provisioning Profiles (Development) の登録
1. [Provisioning Profiles]->[All]を開き、[add]ボタンをクリック
  ![2016_09_13_19_00.png](https://qiita-image-store.s3.amazonaws.com/0/12177/d4f9ac8d-38bc-b011-f36a-1962b081bcc5.png)
2. [Development]->[iOS App Development]を選択し、[Continue]をクリック
  ![2016_09_13_19_10.png](https://qiita-image-store.s3.amazonaws.com/0/12177/6e4c3988-c376-1976-1839-78738cda7797.png)
3. [App ID]に、先ほど登録したアプリケーションを選択し、[Continue]をクリック
  ![2016_09_13_19_20.png](https://qiita-image-store.s3.amazonaws.com/0/12177/fce72491-4242-949b-ff77-93fbb920d90c.png)
4. Provisioning Profile に含める開発者の証明書を選択し、[Continue]をクリック
  ![2016_09_13_19_30.png](https://qiita-image-store.s3.amazonaws.com/0/12177/80ada1ad-16ac-e7d5-0a1d-faec7aefdc92.png)
5.　Provisioning Profile に含めるデバイスを選択し、[Continue]をクリック
  ![2016_09_13_19_40.png](https://qiita-image-store.s3.amazonaws.com/0/12177/57fdb2fb-7507-36a2-ca15-47f0a4d43040.png)
6. [Profile Name] を入力し、[Continue]をクリック
  ![2016_09_13_19_50.png](https://qiita-image-store.s3.amazonaws.com/0/12177/62d0c981-8504-18c0-4e00-9c705e801c2c.png)
7. Provisioning Profile が完成
  ![2016_09_13_19_60.png](https://qiita-image-store.s3.amazonaws.com/0/12177/d1c94eac-7b17-bef8-2b0a-82fabb4cc8f3.png)

## Android 準備
1. [Firebase](https://console.firebase.google.com)で、新規プロジェクトを作成
  ![2016_09_14_15_01.png](https://qiita-image-store.s3.amazonaws.com/0/12177/ca4eaad3-f65e-6a40-4da5-16b1c6fc5689.png)
2. [プロジェクト名]を入力し、[国/地域]を選択し、[プロジェクトを作成]をクリック
2. [概要]画面で、[Android アプリに Firebase を追加]をクリック
  ![2016_09_14_15_04.png](https://qiita-image-store.s3.amazonaws.com/0/12177/a0dc3161-39ed-e3c4-568e-52fc0a0a16b5.png)
3. [パッケージ名]を入力し、[アプリを追加]をクリック
  ![2016_09_14_15_05.png](https://qiita-image-store.s3.amazonaws.com/0/12177/5767c54c-f11f-4e77-99a1-815f478a9323.png)
4.　[google-services.json]ファイルをディスクに保存
  ![2016_09_14_15_11.png](https://qiita-image-store.s3.amazonaws.com/0/12177/1f64ec6a-9fb0-e4fb-800a-fd4dc533b0a6.png)
5. AndroidStudioのセットアップのチュートリアルが表示されるが、そのまま進み終了する。
6. 作成したプロジェクトの設定から、[プロジェクトの設定]をクリック
  ![2016_09_14_15_17.png](https://qiita-image-store.s3.amazonaws.com/0/12177/9633ac49-c207-748a-a6d4-69be05fbdb5b.png)
7. [クラウドメッセージ]を開き、サーバーキーを控える
  ![2016_09_14_15_19.png](https://qiita-image-store.s3.amazonaws.com/0/12177/6317626e-2fcb-df81-25ce-2830a9190ab7.png)

## Azure Notification Hubs の作成
1. [Azure ポータル](https://portal.azure.com) で、Notification Hubsを作成
  ![2016_09_14_15_21.png](https://qiita-image-store.s3.amazonaws.com/0/12177/63eaa9fe-627d-9c88-e695-f2463272425a.png)
2. [Notification Hub][namespace]を入力し、[場所]を選択し、[Resource Group]を指定し、[作成]をクリック
  ![2016_09_14_15_28.png](https://qiita-image-store.s3.amazonaws.com/0/12177/bfe4d77e-cfd2-e931-bfcf-8385b954cf67.png)
3. [リソースグループ]から、作成したリソースグループを開く
  ![2016_09_14_15_54.png](https://qiita-image-store.s3.amazonaws.com/0/12177/7825d757-acdb-99cf-2a73-9e6936aa6011.png)
4. 作成したNotification Hubをクリック
  ![2016_09_14_15_56.png](https://qiita-image-store.s3.amazonaws.com/0/12177/71b0cbcc-f7ab-aa0d-ac40-69b28faed59d.png)
5. [Settings]をクリック
  ![2016_09_14_15_57.png](https://qiita-image-store.s3.amazonaws.com/0/12177/25feae92-5ed5-b176-a301-8c7489bc4de1.png)
6. [Notification Services]をクリックし、Apple(APNS),Google(GCM)の設定を行う
  ![2016_09_14_16_00.png](https://qiita-image-store.s3.amazonaws.com/0/12177/315ffdca-d14c-5047-4547-310d9407b807.png)
7. Apple(APNS)の設定
  1. [Upload Cerification]をクリックし
    ![2016_09_14_16_02.png](https://qiita-image-store.s3.amazonaws.com/0/12177/2a737497-3e62-65d5-3d32-2181a45b3603.png)
  2. Push Notifications用の証明書（.p１２）ファイルをアップロード
    ![2016_09_14_16_04.png](https://qiita-image-store.s3.amazonaws.com/0/12177/a3f3d20d-b8b2-dd07-2ef4-c62cba7a9ba0.png)
  3. [Password]を入力、[Mode]は[Sandbox]を選択し、[Save]をクリック
    ![2016_09_14_16_06.png](https://qiita-image-store.s3.amazonaws.com/0/12177/05ac3292-5974-1fbf-eb2c-6d21502bd0a8.png)
8. Google(GCM)の設定
  1. [API Key]に、Firebaseのクラウドメッセージのサーバーキーを入力し、[Save]をクリック
    ![2016_09_14_16_09.png](https://qiita-image-store.s3.amazonaws.com/0/12177/5559e6b4-8118-63f1-b3b1-6c056dca335f.png)
9. [Access Policies]をクリックし、[DefaultFullSharedAccessSignature]の文字列を控える
  ![2016_09_14_16_12.png](https://qiita-image-store.s3.amazonaws.com/0/12177/9d2e8f89-97c8-ba3f-20f0-961950bb4eed.png)

アプリケーションとAzureの設定は以上になります。
次は、[実装編](http://qiita.com/granoeste/items/74a910ad3b9a84011c0b)になります。