Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

【0】swiftアプリにプッシュ通知を組み込もう! 宿題編-

1,727 views

Published on

swiftアプリでプッシュ通知を配信するための資料(宿題編)

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

【0】swiftアプリにプッシュ通知を組み込もう! 宿題編-

  1. 1. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved ニフティ株式会社 1 Swiftアプリに プッシュ通知を組み込もう! ~事前準備資料~ ・プッシュ通知に必要な証明書の作り方
  2. 2. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 準備するもの • Mac OS X 10.10(Yosemite)以上 • Xcode7以上 Ver. 7.2.1で動作確認しています。 • iPhone Xcodeのバージョンと対応するバージョンにする必要があります。 iPhone6(Ver. 9.2.1)で動作確認しています。 PC接続用にUSBケーブルが必要です。 •Apple Developer Programの登録(有償) 証明書取得の内容には必須となります。 2
  3. 3. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ②開発用証明書(.cer)の作成 ※初回利用時のみ ⑤プロビショニング プロファイルの作成 ⑥APNs用証明書(.cer)の作成 ⑦APNs用証明書(.p12)の作成 App ID ③AppIDの作成 ・Bundle IDの登録 準備の流れと作成するもの ④端末の登録 ・UUIDの登録 参照 書 き 出 し Xcode に設定 ①~⑦の順で 作業していきます ①CSRファイルの作成 ※初回利用時のみ 参照 参照 参 照参 照 3
  4. 4. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 作った証明書の管理は… 4 保存用フォルダをデスクトップに 作っておきましょう ここに保存して いきます! ⑤プロビショニング プロファイル ⑥APNs用証明書(.cer) ⑦APNs用証明書(.p12) ②開発ビルド用証明書 ①CSRファイル 初回の場合はこちらもここに… +
  5. 5. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ①CSRファイルの作成 ※初回利用時のみ(既に作成済みの場合は不要です) 5
  6. 6. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ①CSRファイルの作成 6 キーチェーンアクセス「キーチェーンアクセス」を開いて、メニューバーの 「キーチェーンアクセス」>「証明書アシスタント」>をクリックします まず 「ディスクに保存」 にチェックを入れる アドレス を入力 そのまま 無記入 チェック する 「続きける」 をクリック ※初回利用時のみ(既に作成済みの場合は不要です)
  7. 7. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ①CSRファイルの作成 7 「鍵ペア情報」を確認して 「続ける」をクリックし、 「設定結果」が出るので 「完了」をクリックします デスクトップ のフォルダに保存します Desktopを指定フォルダに変更するか、 Desktopに保存してから移動します ※初回利用時のみ(既に作成済みの場合は不要です)
  8. 8. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ②開発用証明書の作成 ※初回利用時のみ(既に作成済みの場合は不要です) 8
  9. 9. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ②開発用証明書の作成 9 Apple Developer Programのメンバーセンター にログインします 「Certificates, Identifiers & Profiles」 をクリックApple Developer Program ※初回利用時のみ(既に作成済みの場合は不要です)
  10. 10. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ②開発用証明書の作成 10 ※初回利用時のみ(既に作成済みの場合は不要です) 「Certificates」>「All」をクリックして、 「iOS App Development」にチェックをいれます 下の方にある 「Continue」 をクリック Apple Developer Program
  11. 11. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 「Choose File…」 をクリックしてCSRファイルを選択 「Continue」 をクリック ②開発用証明書の作成 11 ※初回利用時のみ(既に作成済みの場合は不要です) Apple Developer Program
  12. 12. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 Apple Developer Program Download 「Done」 をクリック デスクトップ のフォルダに保存します ②開発用証明書の作成 12 ※初回利用時のみ(既に作成済みの場合は不要です) iOS Development.cer
  13. 13. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ③AppIDの作成 13
  14. 14. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ③AppIDの作成 14 Apple Developer Programのメンバーセンター にログインします 「Certificates, Identifiers & Profiles」 をクリック Apple Developer Program ※②で起動済みの場合はとばします。
  15. 15. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ③AppIDの作成 15 新しいAppIDを作ります ※既存のものを使う場合はこの手順は不要です 「Identigiers」 の「AppIDs」 をクリック Apple Developer Program
  16. 16. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 「+」 をクリック Apple Developer Program ③AppIDの作成 16
  17. 17. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ③AppIDの作成 17 App ID Descriptionに アプリの概要を入力します Apple Developer Program アプリと同じ名前にしておきます 「SwiftPushApp」と入力します
  18. 18. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 画面を↓にスクロールします Xcode 「Explicit App ID」 チェックを入れます あとで使います ※控えておいて下さい! Apple Developer Program Bundle ID は… ③AppIDの作成 18 注意:WildcardAppIDでは プッシュ通知を 送ることはできません! 「Bundle ID」 を入力します
  19. 19. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 さらに画面を↓にスクロールします 「Continue」 をクリックします Apple Developer Program 「Push Notifications」 にチェックを入れます ③AppIDの作成 19 忘れやすいので注意!
  20. 20. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 「Push Notifications」が Configurableになっている ことを確認しましょう! 「Register」 をクリックします Apple Developer Program ③AppIDの作成 20
  21. 21. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ④端末の登録 21
  22. 22. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ④端末の登録 22 Apple Developer Program左側の「Devices」>「All」をクリックします 「+」 をクリック
  23. 23. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ④端末の登録 23 「Register Device」 にチェックを入れる Apple Developer Program Nameを入力 UDIDは…
  24. 24. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ④端末の登録 24 iPhoneをMacに USBで接続します ダブルクリック ここをコピーします 「Window」> 「Devices」 をクリックします 接続後、 を 立ち上げます Xcode Xcode
  25. 25. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ④端末の登録 25 「Continue」 をクリックする Xcode Apple Developer Program UDID:に貼り付け
  26. 26. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ④端末の登録 26 確認 「Done」 をクリック Apple Developer Program 「Register」 をクリックします
  27. 27. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ④端末の登録 27 Apple Developer Program 一覧に登録された ことを確認します
  28. 28. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑤プロビショニングプロファイルの作成 28
  29. 29. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑤プロビショニングプロファイルの作成 29 Apple Developer Program左側の「Provisioning Profiles」>「All」 をクリックします 「+」 をクリック
  30. 30. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑤プロビショニングプロファイルの作成 30 Apple Developer Program 「iOS App Development」 をクリック 「AppID」 を選択する AppIDの紐付け
  31. 31. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑤プロビショニングプロファイルの作成 31 Apple Developer Program 端末の紐付け開発用証明書 の紐付け 「登録した端末」 を選択する 「開発用証明書」 を選択する
  32. 32. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑤プロビショニングプロファイルの作成 32 Apple Developer Program ファイルの名前を入力 紐付けの確認 「Continue」 をクリックする
  33. 33. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑤プロビショニングプロファイルの作成 33 Apple Developer Program Download 「Done」 をクリック デスクトップ のフォルダに保存します ※一度ダブルクリック をしておきます!
  34. 34. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑥APNs用証明書(.cer)の作成 34
  35. 35. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑥APNs用証明書(.cer)の作成 35 Apple Developer Program左側の「Certificates」>「All」をクリックします 「Apple Push Notification service SSL (Sandbox)」 をクリック 下の方の 「Continue」 をクリック
  36. 36. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑥APNs用証明書(.cer)の作成 36 「Continue」 をクリック 「AppID」 を選択する Apple Developer Program 「Continue」 をクリック
  37. 37. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑥APNs用証明書(.cer)の作成 37 「Choose File…」 をクリックしてCSRファイルを選択 「Continue」 をクリック Apple Developer Program
  38. 38. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑥APNs用証明書(.cer)の作成 38 Apple Developer Program Download 「Done」 をクリック デスクトップ のフォルダに保存します
  39. 39. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑦APNs用証明書(.p12)の作成 39
  40. 40. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑦APNs用証明書(.p12)の作成 40 キーチェーンアクセス 作成した「APNs用証明書(.cer)」をダブルクリックで開きます cerファイルには鍵がセットになっています 鍵ではなく 「証明書」 で右クリック します
  41. 41. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑦APNs用証明書(.p12)の作成 41 「”---”を書き出す…」 をクリック 注意:p.12形式で保存先を決めると、 パスワードを求められますが、 パスワードは入力しない でOKを押してください。 キーチェーンアクセス
  42. 42. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ⑦APNs用証明書(.p12)の作成 42 書き出し デスクトップ のフォルダに保存します 「パスワード」を 入力して「許可」 をクリック キーチェーンアクセス
  43. 43. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 デスクトップのフォルダーの中身 43 ~準備編~ 完了!! 開発ビルド用証明書 CSRファイル ※初回利用時のみ ※初回利用時のみ
  44. 44. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved いよいよ プッシュを組み込みます! 続きはセミナーで!

×