AWS SNS と Cordova を使って iOS10 で Push通知 最短手順

# はじめに
とにかく最も簡単に、Push通知を出す手順をまとめる(iOS10版)

## 参考サイト
 - [Apache CordvaによるPush通知の実装 iOS版](http://blog.hrendoh.com/apache-cordva-introduction-and-push-notification/)
 - [iOSアプリのプロビジョニング周りを図にしてみる](http://qiita.com/fujisan3/items/d037e3c40a0acc46f618)

# 前提条件

 - [Apple Developer Program](https://developer.apple.com/programs/jp/) に加入済みで、Admins の一員であること  
https://developer.apple.com/account/#/people/
![DevCenterAdmin.png](https://qiita-image-store.s3.amazonaws.com/0/69410/edaaa772-84c8-616c-ff09-4160d9e74b39.png)

 - [AWS コンソール](https://ap-northeast-1.console.aws.amazon.com/console/home?region=ap-northeast-1) へのログイン、SNS の操作が可能なこと
![AWS_CONSOLE_SNS.png](https://qiita-image-store.s3.amazonaws.com/0/69410/b02551cc-876f-74f9-3d80-ff282c51167a.png)
 - macOS Sierra / Xcode8 がインストール済みであること
![macOS10Siera.png](https://qiita-image-store.s3.amazonaws.com/0/69410/06ae0d8d-6a7e-6afc-15fd-38d29651874a.png)
![Xcode8.png](https://qiita-image-store.s3.amazonaws.com/0/69410/a36a8fd6-a1ad-c528-6276-56c46f369e00.png)

# 手順

## 証明書

 1. CSR (証明書署名要求) を作成

    Mac で「キーチェーンアクセス」を起動し、「証明書アシスタント」から「認証局に証明書を要求」を選択します。

    ![スクリーンショット 2016-09-25 14.59.52.png](https://qiita-image-store.s3.amazonaws.com/0/69410/9383de1b-b644-0ee4-d8c1-838d0a9ffdae.png)

     「Apple Developer Program」に登録されているアカウント(メールアドレス)を指定します。
また、「通称」には分かり易い任意の名前をつけますが**日本語はダメ**です(以降のAWSでエラーになるため)。
「ディスクに保存」します。あとで二回使用します。
![スクリーンショット_2016-09-25_11_47_08.png](https://qiita-image-store.s3.amazonaws.com/0/69410/a54a824e-0fcb-a875-daac-1bd0e7921157.png)



 1. App ID を作成
App ID を作成します。
**「Explicit App ID」を選択**し、明示的に Bundle ID を指定します。(ワイルドカードは不可)
**「Push Notifications」 にチェック**します。
https://developer.apple.com/account/ios/identifier/bundle
![AppID.png](https://qiita-image-store.s3.amazonaws.com/0/69410/2887d7c6-3fb3-164c-35a1-a82ed76f2f8f.png)

 1. 実機の開発機登録
まず、UDID を調べるために、デバイスとMacを接続し、iTunesを起動します。
![UDID取得.png](https://qiita-image-store.s3.amazonaws.com/0/69410/51db2aec-a682-51e6-8afd-ad1a23a32e77.png)
入手したUDIDを、Devicesに登録します。
https://developer.apple.com/account/ios/device/
![Devices.png](https://qiita-image-store.s3.amazonaws.com/0/69410/60bed5ac-5186-ed39-1997-91f38d8c9e35.png)

 1. 証明書作成
今回は、以下の二種類の証明書が必要です。

   1. iOSアプリを作成するための証明書(iOS App Development)  
   2. Push通知をするための証明書(Apple Push Notification service SSL)

    https://developer.apple.com/account/ios/certificate/
![Certificate作成.png](https://qiita-image-store.s3.amazonaws.com/0/69410/110e8663-63de-a523-af6e-7442a3636342.png)

    それぞれ、Development(開発用) と Production(本番用) があります。
本記事では Development(開発用) を扱います。 

    上記で生成した 
       - CSR(証明書署名要求)
       - App ID
       - Device
    を指定すると、証明書が生成されます。

    証明書はMacにダウンロードし、キーチェーンアクセスに登録 (ダブルクリックでOK) しておきます。

 1. Push通知用証明書のエクスポート(P12形式)
再びキーチェーンアクセスを起動し、上記で取り込んだPush通知用証明書を選択し、右クリックして「書き出す」を選択します。
![P12Export.png](https://qiita-image-store.s3.amazonaws.com/0/69410/8f1f294a-d0e9-f8f5-3497-0bafddc205a7.png)
「P12形式」を選択して保存します。(以降AWS設定で使用します)
![p12エクスポート2.png](https://qiita-image-store.s3.amazonaws.com/0/69410/370526e0-6da5-a941-a6af-30c63c064188.png)

## cordova

 1. [cordova 本体 インストール](https://cordova.apache.org/docs/ja/latest/guide/cli/#コルドバ-cli-のインストール)

    ```
$ npm install -g cordova
```
 1. [アプリ作成](https://cordova.apache.org/docs/ja/latest/guide/cli/#アプリを作成します。)
    create コマンド
     - 第一引数 : ディレクトリ名称
     - 第二引数 : App ID 【重要】 (証明書の Bundle ID と一致のこと)
     - 第三引数 : 表示名称

    ```
$ cordova create CordovaPushNotification jp.co.xxxxxxxx.CordovaPushNotification CordovaPushNotification
$ cd CordovaPushNotification
```

 1. [iOS プラットフォーム 追加](https://cordova.apache.org/docs/ja/latest/guide/cli/#プラットフォームを追加します。)

    ```
$ cordova platform add ios
```

 1. [プラグイン 追加](https://cordova.apache.org/docs/ja/latest/guide/cli/#プラグイン機能を追加します。)
SENDER_ID は Android用ですが、ここで指定しておかないとエラーになる。何でも良い。

    ```
$ cordova plugin add cordova-plugin-console --save
$ cordova plugin add phonegap-plugin-push --variable SENDER_ID=XXXXXXXX --save
```
  プラグインについての詳細は、[プラットフォームのサポート](https://cordova.apache.org/docs/ja/latest/guide/support/index.html)を参照して下さい。

 1. プログラム修正
  www/js/index.js に以下の二箇所を追記します

    ```index.js
        onDeviceReady: function() {
            this.receivedEvent('deviceready');
            this.initPushNotification();         // ← これ追加
        },
```
    ```index.js
        // Initialize push notification
        initPushNotification: function(){
            var push = PushNotification.init({
                "ios": {"alert": "true", "badge": "true", "sound": "true"} } );

            push.on('registration', function(data) {
                // data.registrationId
                console.log(data);
            });

            push.on('notification', function(data) {
                // data.message,
                // data.title,
                // data.count,
                // data.sound,
                // data.image,
                // data.additionalData
            });

            push.on('error', function(e) {
                // e.message
            });
        }
```
    - 起動直後に、Push通知が使用可能であれば、'registration' が呼ばれる
    - Push通知を受信時、'notification' が呼ばれる




 1. Xcode 起動

    ```
$ cordova build ios
$ open platforms/ios/CordovaPushNotification.xcodeproj
```

## Xcode

bundle ID が正しければ、適切な証明書を自動で選択してくれているはずです。

以下 4箇所を Xcode上で設定します。

 1. 自動でワーニングをフィックスしてくれるので、「Perform Changes」を押下。
![スクリーンショット_2016-09-25_10_12_50.png](https://qiita-image-store.s3.amazonaws.com/0/69410/a8acf597-e6a3-f492-529a-3a69402e786f.png)

 1. 「development team」の設定が必要です。
![スクリーンショット_2016-09-25_10_13_30.png](https://qiita-image-store.s3.amazonaws.com/0/69410/6b26df17-a369-36f0-58db-1d8ebc9d9d25.png)

 1. Capabilitiesで 「Push Notification」をONにします。
![スクリーンショット_2016-09-25_10_14_25.png](https://qiita-image-store.s3.amazonaws.com/0/69410/80458374-e425-ffd6-21c7-b91a500d4c5b.png)

 1. Capabilitiesで 「Background Modes」の「Background Fetch」と「Remote Notifications」をONにします。
![backgroundMode.png](https://qiita-image-store.s3.amazonaws.com/0/69410/e191dca9-7346-f405-12c4-3e5d580e5287.png)

実機で実行し、**Push通知用のID(registration ID)**が取得できていれば成功です。
この値は以下で使用しますので、メモしておいて下さい。
![スクリーンショット_2016-09-25_10_14_53.png](https://qiita-image-store.s3.amazonaws.com/0/69410/37504f3f-0141-68eb-7a55-50237fb96423.png)


## AWS SNS
 1. AWS コンソールにログインし、SNS を選択します。
 2. Applications を選択し、「Create Platform application」を押下します。
![SNS_Application作成.png](https://qiita-image-store.s3.amazonaws.com/0/69410/1f154bac-db1f-0e26-767f-ac6c34c0f266.png)
 3. Push通知用証明書を設定します

    1. 「Push notification platform」では、「Apple production」と「Apple development」がありますが、先に作成した証明書と同じ方(ここではdevelopment)を選択します。間違わないように。
    2. 「Push certificate type」では、「iOS push certificate」を選択。
    3. 「Choose file」で、先に作成した**証明書をP12形式で書き出したファイル**を指定します。
    4. パスワードを入力し、「Load credentials from file」を押下すれば、「Certificate」と「Private key」が自動で読み込まれます。
![P12選択.png](https://qiita-image-store.s3.amazonaws.com/0/69410/5cdd970f-c10c-d437-18e5-f2f5b0b06270.png)
 1. Endpointを作成します
作成したApplicationのARNをクリックすると、Endpoints登録画面に進みます。
![endpoint作成.png](https://qiita-image-store.s3.amazonaws.com/0/69410/71140c84-7f4d-008b-fa38-69805182167b.png)
先にメモした**Push通知用のID(registration ID)**を「Device token」に設定します。
「User data」は任意の値を格納できます。
![endpoint作成2.png](https://qiita-image-store.s3.amazonaws.com/0/69410/a0da16fd-385d-ef28-c7de-d4e541b14a03.png)
 1. Push通知の実行
作成したEndpointを選択して、「Publish to endpoint」を押下
![push1.png](https://qiita-image-store.s3.amazonaws.com/0/69410/9e60c04c-2d65-e69c-82da-88d1425ee596.png)
適当にメッセージを書いて、「Publish message」を押下すると、、、
![push2.png](https://qiita-image-store.s3.amazonaws.com/0/69410/fa42cecc-00d2-27f3-21b1-ec7d812199a0.png)
 1. キタ～
(アプリは閉じた状態にしておく)
![IMG_3192.PNG](https://qiita-image-store.s3.amazonaws.com/0/69410/daeed020-c31b-277a-6012-f3551e74b1a5.png)


#おわりに
 - AWS SNS と Cordova を使って Push通知 の雛形を作成しました。
 - ちゃんとしたアプリにするためには、ログイン後に「Device token」をサーバに送信し、ログインユーザとの関連を管理して、SNSに登録する必要があります。
 - 今後は、Cognito との連携を調査していきます。