cordova + ionicでプッシュ通知(iOS)の1から9!

2016年03月18日
cordova_logo_normal_dark のコピー

ね、眠いです。。。眠いですけどこれは記憶が新鮮なうちに記録しておかないと、また絶対はまるので、がんばって残します。

ionic で本格的なアプリケーションを作っているとぶつかる問題に プッシュ通知 があります。 プッシュ通知 自体は難しくないんですけど、Appleの証明書やProvision Profileあたりが結構ややこしくて迷子になりやすいです。(現に私も迷子になりました。。。)参考サイトはたくさんあるのですが、 ionic に絞ったものがなかなか見つからず、見本が無かったので苦戦しました。なので今後の自分の為にもキャプチャと一緒にやり方を載せます! 1から9 と言っているのは、 プッシュ通知 の実装にはあまり着目しません。 GitHub 上のサンプルコードをほとんどそのまま使います。苦戦するのは結局Appleの証明書、Provision Profile周りなので、そこの内容を重点的に抑えます。

サンプルプロジェクトの作成

今回のデモ用にサンプルプロジェクトを作って起動確認しましょう。

Apple Dev Centerでのあれこれ

認証局証明書要求用のファイル作成

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

005_証明書要求

証明書情報を入力します。

010_証明書アシスタント

  • ユーザのメールアドレス:なんでもOKみたいですけど、開発者登録しているアドレスにする人が多いみたいです
  • 通称:あとから見てもわかるような名前にしておきましょう!
  • 要求の処理:ディスクに保存しておきます

完了すると、キーチェーンアクセスの に先ほど 通称 で書いた名前の 公開鍵秘密鍵 が増えているのが確認できると思います。

020_キーチェーンアクセス

それでは、 秘密鍵 をエクスポートしておきましょう!

030_秘密鍵エクスポート

秘密鍵 はとーっても大事なので、保護するためにパスワードをかけておきます。この記事で作るアプリはサンプルなのでパスワードは pushnotificationstarter としています。本来はちゃんとわかりにくい、秘密のパスワードにしておいてくださいね。

040_秘密鍵保護パスワード

App ID生成

それでは Apple Developer Member Center でApp IDを生成します。

050_Register_-_iOS_App_IDs_-_Apple_Developer

執筆時点での Member Center は↑のような画面です。

  • App ID Description:任意のApp ID決めます
  • App ID Suffix | Explicit App ID:任意のBundle IDを決めます

下に行って Push Notification のチェックも忘れずに!

060_Register_-_iOS_App_IDs_-_Apple_Developer

そして登録します!

070_Register_-_iOS_App_IDs_-_Apple_Developer

↓のようにApp IDが生成されたのが確認できると思います。

080_iOS_App_IDs_-_Apple_Developer

ここをクリックするの↓のような画面が出てきます。プッシュ通知は有効だけど、まだ設定が必要(Configurable)な状態であることがわかります。

090_iOS_App_IDs_-_Apple_Developer

Edit をクリックして編集しましょう!

証明書の作成

今回は開発用に証明書を作りたいだけ(Development SSL Certificate)なので↓の Create Certificate をクリック!

100_Settings_-_iOS_App_IDs_-_Apple_Developer

↓のように、「証明書の発行には証明書要求用のファイルが必要だよ!」って書かれてます。これが先ほどの「認証局証明書要求用のファイル作成」で作ったファイルのことです。

110_Add_-_iOS_Certificates_-_Apple_Developer

さっそくファイルを選びましょう。

120_Add_-_iOS_Certificates_-_Apple_Developer

130_ファイルのアップロード_と_Add_-_iOS_Certificates_-_Apple_Developer

140_Add_-_iOS_Certificates_-_Apple_Developer
↑これで証明書が作れる! Continue で次へ進みましょう!

150_Add_-_iOS_Certificates_-_Apple_Developer
2ヶ月間有効な証明書が用意されたので、ダウンロードしてバックアップをちゃんとしておきましょう。

Provisioning Profileの作成

Provisioning Profile メニューから「+」で新しい Provisioning Profile を作ります。

200_iOS_Provisioning_Profiles_-_Apple_Developer

210_Add_-_iOS_Provisioning_Profiles_-_Apple_Developer

  • Development:iOS App Development

先ほど作ったAppIDを選択します
220_Add_-_iOS_Provisioning_Profiles_-_Apple_Developer

対象となる証明書を選びます。
230_Add_-_iOS_Provisioning_Profiles_-_Apple_Developer

対象となるデバイスを選びます。
240_Add_-_iOS_Provisioning_Profiles_-_Apple_Developer

Provisioning Profileの名前を決めます
250_Add_-_iOS_Provisioning_Profiles_-_Apple_Developer

完成したらダウンロードして ダブルクリック してXCODEに盛り込みましょう!
260_Add_-_iOS_Provisioning_Profiles_-_Apple_Developer

 APNS繋がるかテスト

PEMファイルの作成

飽々するような手続きはいったんここで終了!それではAPNS(Appleのプッシュ通知用サーバー)に繋がるか試してみる為に、 PEMファイル を生成しましょう!(PHPのダミープログラムを使ってプッシュ通知を行うので、↓のような PEMファイル を作ります。

telnetでsandboxに繋がるか確認

↑みたいな表示になればAppleのAPNSに通信できていることは確認。これがエラーになる場合は Firewall とかの設定を見直し!では、次はちゃんと証明書と秘密鍵つきで通信しましょう!

無事に接続確認完了!

実装

ようやく実装しますよ!!!まずは ngCordova を取得しましょう。( bowerのことは知っているものとして説明はしません!)

取得できた ngCordovascript タグに追加します。

そして、 angular.module の依存モジュールに ngCordova を追加します。

今回のサンプルに必要な cordova のプラグインを一通りインストールします。特に重要なのが PushPlugin です!

controllers.jsGitHubPushNotificationSample からほぼ丸パクリで作ります!
↓の中身にはほとんど触れません。(プッシュ通知のAPIは cordova のドキュメントを見ればわかるはずなので)

services.js も同じく!

あとは、 index.htmlAppCtrl を追加しておきましょう。

さらに config.xmlwidget id に上の手順で作成した Bundle ID を設定します。

さてさて、クライマックスです!XCodeのプロジェクトを作って、実機にインストール!

デバイストークン取得

↑のコードに従っていれば、起動と同時にデバイストークンを console に出力しているので、それをチェックしましょう。

Safariの開発者ツールで実機に接続します。
300_デバッガ

デバイストークンが表示されていなかったら ⌘R でリロードしましょう!↓のようにデバイストークンが表示されるはずです。

310_Web_インスペクタ_—_kip5_—_push-notification-starter_—_index_html

push通知テスト

SimplePush という簡単なプッシュ通知をAPNSに送れるサンプルプログラムがあるので、ダウンロードします。

上の手順で作った ck.pem ファイルを↓の場所に入れておきましょう!

320_SimplePush

あとは、先ほど手に入れたデバイストークンと、秘密鍵保護用のパスワードを入力して、サンプルプログラムは完成。

330_simplepush_php_-_push-notification-starter

それでは、テストでプッシュ通知を送信してみましょう!(要ローカルで php インストール)

↑のメッセージが出ていれば APNS への送信成功です。実機で↓のように確認できていれば、証明書周りの手続きは全部正常に行えていることになります!あとは、どうやって実装するか、ようやくそこだけ考えれるようになります。

IMG_4937

IMG_4938

IMG_4942

IMG_4941

IMG_4940

IMG_4939

おつかれさまでした!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です