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.

【2】swiftアプリにプッシュ通知を組み込もう!

1,826 views

Published on

swiftアプリにプッシュ通知を組み込むための資料 実践編

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

【2】swiftアプリにプッシュ通知を組み込もう!

  1. 1. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved ニフティ株式会社 1 Swiftアプリに プッシュ通知を組み込もう! 2016/04/18作成
  2. 2. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 準備するもの • ニフティクラウドmobile backendの会員登録  上記リンクより事前に登録(無料)とログインをお願いします。 • Mac OS X 10.10(Yosemite)以上 • Xcode7以上  Ver. 7.2.1で動作確認しています。 • iPhone  Xcodeのバージョンと対応するバージョンにする必要があります。  iPhone6(Ver. 9.2.1)で動作確認しています。  PC接続用にUSBケーブルが必要です。 • 開発者用証明書(.cer) • APNs用証明書(.p12) • プロビショニングプロファイル  取得方法は事前準備資料に掲載しています。 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 作業に必要な画面の準備 • ニフティクラウドmobile backendへログイン https://console.mb.cloud.nifty.com/ • コードのコピペ用画面(GitHub) https://goo.gl/Liyq9d 5 コピペ用ページ ログイン画面 この画面からログイン をお願いします 作業に必要なコードやコマンドは ここからコピペして使えます
  6. 6. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 プッシュ通知を送るまでの手順 1. mBaaS上にアプリを作成し、APNs用証明書の設定を行う 2. Xcode上にSwiftアプリを作成する 3. CocoaPodsを使ってiOS SDKをインストールする 4. Swiftでロジックを書く 5. 実機でデバッグビルドを行う 6. 動作確認!プッシュ通知を送りましょう★ 6
  7. 7. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 プッシュ通知の仕組み APNs = Apple Push Notification Service とは、 サーバーからの通知をiPhoneなどの端末に転送するAppleの プッシュ通知を送るためのサービスのこと。 ①プッシュ通知許可 ②デバイストークン発行 ③デバイストークン登録 サーバー ④プッシュ通知⑤プッシュ通知 ここに を使います! 7
  8. 8. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 アプリを作成するのに必要なツールの話 ニフティクラウドmobile backend って何??
  9. 9. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ニフティクラウドmobile backend スマートフォンアプリのバックエンド機能が 開発不要になるクラウドサービス 1. mBaaS上にアプリを作成し、APNs用証明書の設定を行う mobile Backend as = mBaaS !! a Service
  10. 10. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 mBaaSのセットアップ、 Swiftアプリを作成して mBaaSのSDKの導入 をしていきます プッシュ通知を送るまでの流れ 10 証明書 ~準備編~
  11. 11. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 1. mBaaS上にアプリを作成し、APNs用証明書の設定を行う 11 利用登録が終わるとアプリの新規作成画面が表示されるので アプリ名を入力して新規作成します 「SwiftPushApp」 と入力してください 「新規作成」をクリックします
  12. 12. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 1. mBaaS上にアプリを作成し、APNs用証明書の設定を行う 12 ※ログイン後に、この画面が出た方は… 「+新しいアプリ」 をクリックすると でてきます!
  13. 13. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 アプリが作成されました! 2つのキーは 後で使います 「OK」をクリックすると ダッシュボードが表示されます 1. mBaaS上にアプリを作成し、APNs用証明書の設定を行う 13
  14. 14. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 後でAPIキーを確認するには… 「アプリ設定」 を選択 mBaaS ダッシュボード ここにあります 1. mBaaS上にアプリを作成し、APNs用証明書の設定を行う 14
  15. 15. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 証明書(.p12)を設定します 「プッシュ通知」 を選択 プッシュ通知の許可と 証明書(.p12) のアップロードを 行います これでmBaaS側の準備はOKです! mBaaS ダッシュボード 1. mBaaS上にアプリを作成し、APNs用証明書の設定を行う
  16. 16. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 2. Xcode上にSwiftアプリを作成する 16 今回は新規でアプリを作成し、プッシュ通知を組み込みます Xcodeを起動し、新しいプロジェクトを作成します Project... 次の画面で適当なディレクトリを選択して 「Create」をクリックします Next Next 「SwiftPushApp」 Swift Xcode
  17. 17. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 2. Xcode上にSwiftアプリを作成する 17 開発環境が 開きます 確認したら閉じます Swiftアプリが作成されました Xcode
  18. 18. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 3. CocoaPodsを使ってiOS SDKをインストールする 18 ターミナルを立ち上げます ① さっき作成したプロジェクト 「SwiftPushApp.xcodeproj」と同じディレクトリ に移動します $ cd [ディレクトリ] $ ls ② 正しくディレクトリ移動できているか確認します。 「SwiftPushApp.xcodeproj」があればOK! 例) $ cd /Users/******/Documents/push/SwiftPushApp
  19. 19. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 3. CocoaPodsを使ってiOS SDKをインストールする $ sudo gem install cocoapods $ sudo gem update --system $ pod setup $ pod --version ③ CocoaPodsを 「はじめて使う場合」→ CocoaPodsをインストール 「既にインストールしている場合」 →CocoaPodsのバージョンアップ ④ セットアップをする ⑤ バージョン(0.39.0)確認をします。 バージョンが表示されればOK! 19 ※コピペ用ページが使用できます
  20. 20. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 3. CocoaPodsを使ってiOS SDKをインストールする 20 ⑥ Podfile(インストールするライブラリを指定するファイル) を作成します $ pod init 「SwiftPushApp.xcodeproj」の ディレクトリを開いて Podfileが出来ていることを確認します
  21. 21. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 3. CocoaPodsを使ってiOS SDKをインストールする 21 ⑦ Podfileを編集します Podfileを開いて下記のコードに書き換えます # Uncomment this line to define a global platform for your project platform :ios, '8.0' # Uncomment this line if you're using Swift use_frameworks! target 'SwiftPushApp' do pod 'NCMB', :git => 'https://github.com/NIFTYCloud-mbaas/ncmb_ios.git' end Podfile ファイルを更新したら「Command + s 」で保存をします ※コピペ用ページからコピペできます
  22. 22. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 3. CocoaPodsを使ってiOS SDKをインストールする 22 ⑧ Podfileに書いた内容をインストールします $ pod install --no-repo-update Podfileと同じディレクトリに 「SwiftPushApp.xcworkspace」 が作成されていればOK!! ダブルクリックしてXcodeを開きます ターミナルはここまで! 閉じてOK! SDKがインストールされました ※少し処理が早くなるようなコマンドになっています
  23. 23. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 4. Swiftでロジックを書く 23 CocoaPodsを使ってインストールした iOS SDKを読み込みます AppDelegate.swiftを編集します import NCMB AppDelegate.swift ファイルを更新したら「Command + s 」で保存をします 上記内容を ここに追記します Xcode ※コピペ用ページからコピペできます
  24. 24. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 4. Swiftでロジックを書く 24 iOS SDKを使うための初期設定(APIキーの設定・SDKの初期化)をします ①ここにAPIキー を書きます ②ここに SDKの初期化 処理を書きます AppDelegate.swift を編集します Xcode
  25. 25. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 4. Swiftでロジックを書く 25 「YOUR_NCMB_APPLICATIONKEY」 「YOUR_NCMB_CLIENTKEY」 はmobile backendのダッシュボードの アプリケーションキー、 クライアントキーにそれぞれに書き換え てください! d 必ずコピーボタンを 使ってください! ※コピペ用ページから コピペできます。 コードを書いた後、 mBaaSのダッシュボードから APIキーを コピペしてください ①APIキーを 設定します AppDelegate.swift を編集します mBaaS ダッシュボード Xcode
  26. 26. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 4. Swiftでロジックを書く 26 application: didFinishLaunchingWithOptionsメソッド に②SDKの初期化を書きます この2つを書けばmBaaSの他の機能もすぐ使えます AppDelegate.swift を編集します ※コピペ用ページから コピペできます 完了! Xcode
  27. 27. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 この作業+Swiftアプリ を作成します ~準備編~ 証明書 プッシュ通知を送るまでの流れ(作業内容確認) 27 デバイストークンの取得 するロジックの実装 +実機でビルドをします
  28. 28. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 4. Swiftでロジックを書く 28 次はこのメソッドの 下に書きます SDKの初期化 の下に書きます AppDelegate.swiftを編集します プッシュ通知に関するコードの実装 application:didFinishLaunchingWithOptionsメソッド内で デバイストークンの要求をAPNsに対して行います Xcode ※コピペ用ページから コピペしてください
  29. 29. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 4. Swiftでロジックを書く 29 デバイストークンが取得された後に呼び出される didRegisterForRemoteNotificationsWithDeviceTokenメソッドを追記します 「Command + s 」で保存をします ※コピペ用ページから コピペしてください さっき記述した メソッドの 下に書きます Xcode
  30. 30. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 4. Swiftでロジックを書く 30 せっかくなので… このままだと何も表示されないただ白い画面のアプリなので、画面に文字を書きましょう。 「Label」を選択して Viewに ドラッグ&ドロップします Xcode おまけ 「Main.storyboard」 を開きます
  31. 31. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 4. Swiftでロジックを書く 31 表示する文字の編集 文字のサイズや太さ などの編集 ダブルクリック 編集できます 文字の色の編集 文字の行数の編集 適当に変えてみましょう! こんな感じにで OKです! おまけ Xcode
  32. 32. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 5. 実機でデバッグビルドを行う 32 開発用証明書とプロビショニングプロファイルの設定 プロジェクトを選択 >「Build Settings」を選択 >「Code Signing」を表示します • 「Code Signing Identity」で「Automatic」を選択します • 「Provisioning Profile」で作成したプロビショニングプロファイルを選択します 開発用証明書 が自動的に入ります Xcode
  33. 33. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 5. 実機でデバッグビルドを行う 33 証明書の設定 プロジェクトを選択 >「General」を選択 >「Identity」を表示します • 「Bundle Identifier」にAppID作成時に入力したBundleIDを入力します Xcode Apple Developer Program
  34. 34. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 5. 実機でデバッグビルドを行う 34 iPhoneをMacにつなぐ • 左上のDevice選択欄から、つないだiPhoneを選択する。 プロジェクトを実行する 完了! Xcode 実行のボタンを クリック! ここをクリック 接続したiPhoneを 選択します
  35. 35. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 この作業+Swiftアプリ を作成します ~準備編~ 証明書 プッシュ通知を送るまでの流れ(作業内容確認) 35 デバイストークンの取得 するロジックの実装 +実機でビルドをします アプリの起動+動作確認 をします
  36. 36. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 6. 動作確認!プッシュ通知を送りましょう 36 アプリを起動します! 初回起動時には プッシュ通知許可の アラートが出るので 「OK」を タップします iPhone 起動されたら デバイストークンの 取得完了です! タップして 起動!! ちゃんと取得されたか 確認しましょう アプリを一度閉じます
  37. 37. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 6. 動作確認!プッシュ通知を送りましょう 37 デバイストークンが取得されたことを確認しましょう! mBaaSのデータストアの中にあるinsallationクラスを開きます。 mBaaS ダッシュボード ここに入りました!
  38. 38. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 6. 動作確認!プッシュ通知を送りましょう 38 mBaaS ダッシュボード プッシュ通知を 送りましょう!! 「メッセージ」を 記入します 「プッシュ通知」 クリックして をクリック! 「iOS端末に配信する」 にチェックを入れる 「プッシュ通知を作成する」 をクリック すぐにiPhoneを確認!
  39. 39. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 6. 動作確認!プッシュ通知を送りましょう 39 プッシュ通知を 送りましょう!! iPhone 無事にプッシュ通知は届きましたか?? プッシュ通知が 受信されました★ ロック画面 起動時 通知
  40. 40. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 まとめ ☺Swiftアプリに簡単にプッシュ通知機能を付けることができた! 他のSwiftアプリにすぐに応用可能ということがわかった! ☺プッシュ通知の仕組みがわかった! ☺mBaaSの使い方がわかった! 40 ★ハンズオンセミナーはいかがでしたでしょうか? ぜひご感想をアンケートにお書きください。 また今後の「Swift×mBaaSハンズオンセミナー」で扱って 欲しいテーマなどありましたご記入ください。 ★本日はご参加いただきありがとうございました!
  41. 41. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 お願い アンケートに@nifty IDをご記入ください mBaaSのダッシュボードhttp://mb.cloud.nifty.com/右上の [ユーザー名]>[アカウント設定]>プロフィールから確認できます アルファベット3桁+数字5桁
  42. 42. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved

×