swiftアプリにプッシュ通知を組み込もう！

Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved

ニフティ株式会社

1

Swiftアプリにプッシュ通知を組み込もう！

20160616更新

Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved

色見本３

準備するもの

•ニフティクラウドmobile backendの会員登録右記リンクより事前に登録（無料）をお願いします。（ http://mb.cloud.nifty.com ）

• Mac OS X 10.10.5(Yosemite)以上• Xcode Ver. 7以上

Ver. 7.2.1で動作確認しています。

• iPhone バージョンはXcodeのバージョンと対応させる必要があります。

iPhone6（Ver. 8.2）で動作確認しています。

PC接続用にLightningケーブルが必要です。

•開発者用証明書(.cer)• APNs用証明書(.p12)•プロビショニングプロファイル

上記３点の取得方法は事前準備資料（ http://goo.gl/ZRj9tB ）に掲載しています。

2

※上記環境にとらわれず、いずれも最新バージョンをご用意いただくことをお勧めします※上記以下の環境では動作しない可能性があります

http://mb.cloud.nifty.com/

http://goo.gl/ZRj9tB


色見本３

必要な証明書の確認

3

※事前準備範囲

②開発用証明書(.cer)の作成※初回利用時のみ作成します

⑤プロビショニング

プロファイルの作成

⑥APNs用証明書(.cer)の作成

⑦APNs用証明書(.p12)の作成

App ID

③AppIDの作成・Bundle IDの登録

④端末の登録・UUIDの登録

参照

書き出し

に設定

①CSRファイルの作成※初回利用時のみ作成します

参照

参照

参照参

照

3

Xcode


色見本３

必要な証明書の確認

4

デスクトップの保存用フォルダ内の確認

プロビショニングプロファイル

APNs用証明書(.cer)

APNs用証明書(.p12)

開発ビルド用証明書

CSRファイル

初回の場合はこちらもここに…

＋

※事前準備範囲

この３点を使用します！


色見本３

作業に必要な画面の準備

•ニフティクラウドmobile backendへログインhttps://console.mb.cloud.nifty.com/

•コードのコピペ用画面(GitHub)https://goo.gl/LKxvae

5

コピペ用ページ

ログイン画面

この画面からログインをお願いします

作業に必要なコードやコマンドはここからコピペして使えます

https://console.mb.cloud.nifty.com/

https://goo.gl/LKxvae


色見本３

プッシュ通知の仕組み

APNs = Apple Push Notification Service とは、サーバーからの通知をiPhoneなどの端末に転送するAppleのプッシュ通知を送るためのサービスのこと。

①プッシュ通知許可

②デバイストークン発行

③デバイストークン登録サーバー

④プッシュ通知⑤プッシュ通知

ここに

を使います！

6

https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/Chapters/ApplePushService.html


色見本３

7

アプリを作成するのに必要なツールの話

ニフティクラウドmobile backend

って何？？


色見本３

8

ニフティクラウドmobile backend

スマートフォンアプリのバックエンド機能が

開発不要になるクラウドサービス

1. mBaaS上にアプリを作成し、APNs用証明書の設定を行う

mobileBackend

as ＝ mBaaS !!aService


色見本３

プッシュ通知を送るまでの手順


2. Xcode上にSwiftアプリを作成する

3. CocoaPodsを使ってSDKをインストールする

4. Swiftでロジックを書く

5. 実機でデバッグビルドを行う

6. 動作確認！プッシュ通知を送りましょう★

9


色見本３

10

フロントエンド

やること確認 1. mBaaS上にアプリを作成し、APNs用証明書の設定を行う

バックエンド

APNs用証明書(.p12)の設定プッシュ通知の許可設定


色見本３


11

利用登録が終わるとアプリの新規作成画面が表示されるのでアプリ名を入力して「新規作成」をクリックします

「SwiftPushApp」と入力




色見本３


12

※ログイン後に、この画面が出た方は…

「+新しいアプリ」をクリックするとでてきます!


色見本３

アプリが作成されました！

２つのキーは

後で使います！

「OK」をクリックするとダッシュボードが表示されます


13


色見本３

後でAPIキーを確認するには…

「アプリ設定」を選択

mBaaSダッシュボード

ここにあります


14


色見本３

15

証明書(.p12)を設定します

「プッシュ通知」を選択

プッシュ通知の許可と証明書（.p12）のアップロードを行います

これでmBaaS側の準備はOKです！mBaaS

ダッシュボード



色見本３

16


やること確認 2. Xcode上にSwiftアプリを作成する

バックエンド


Xcodeアプリ


色見本３

２. Xcode上にSwiftアプリを作成する

17

今回は新規でアプリを作成し、プッシュ通知を組み込みます！Xcodeを起動し、新しいプロジェクトを作成する

Project...

次の画面で適当なディレクトリを選択して

「Create」をクリックします

Next

Next

「SwiftPushApp」

Swift

Xcode


色見本３

２. Xcode上にSwiftアプリを作成する

18

開発環境が開きます

確認したら閉じます

Swiftアプリが作成されました

Xcode


色見本３

19


やること確認 3. CocoaPodsを使ってSDKをインストールする

バックエンド


Xcodeアプリ

SDKの導入


色見本３


20

ターミナルを起動します

① ディレクトリを移動するさっき作成したプロジェクト

「SwiftPushApp.xcodeproj」と同じディレクトリ

に移動します$ cd [ディレクトリ]

$ ls

② ディレクトリに確認をする

「SwiftPushApp.xcodeproj」があればOK!

例） $ cd /Users/******/Documents/push/SwiftPushApp


色見本３


$ sudo gem install cocoapods

$ pod setup

$ pod --version

③ CocoaPodsを

「はじめて使う場合」→ CocoaPodsをインストールその後④へ

「既にインストールしている場合」→④へ

④ セットアップをする

⑤ バージョンを確認する

バージョンが表示されればOK！

21

※コピペ用ページが使用できます


色見本３


22

⑥ Podfile（インストールするライブラリを指定するファイル）の作成

$ pod init

「SwiftPushApp.xcodeproj」のディレクトリを開いて

Podfileが出来ていることを確認します


色見本３


23

⑦ Podfileの編集Podfileを開いて下記のコードに書き換える

# Uncomment this line to define a global platform for your projectplatform :ios, '8.0'# Uncomment this line if you're using Swiftuse_frameworks!

target 'SwiftPushApp' dopod 'NCMB', :git => 'https://github.com/NIFTYCloud-mbaas/ncmb_ios.git'

end

Podfile

ファイルを更新したら「Command + s 」で保存をします

※コピペ用ページからコピペできます


色見本３


24

⑧ Podfileに書いた内容をインストールする

$ pod install --no-repo-update

Podfileと同じディレクトリに

「SwiftPushApp.xcworkspace」が作成されていればOK！！

上記ファイルをダブルクリックしてXcodeを開く

ターミナルはここまで！閉じてOK！

SDKがインストールされました

※少し処理が早くなるようなコマンドになっています

完了！


色見本３

25

フロントエンドバックエンド

やること確認 4. Swiftでロジックを書く

Swift

連携

APIキーの設定

SDKの導入


読み込み

Xcodeアプリ


色見本３


26

AppDelegate.swiftを編集します

CocoaPodsを使ってインストールした

SDKを読み込みますimport NCMB

AppDelegate.swift

ファイルを更新したら「Command + s 」で保存をします

上記内容をここに追記します

Xcode



色見本３

失敗してしまった場合は...

【確認】実行しておきましょう

27

※ビルドが上手く行かない場合は別の方法を用意しています

http://goo.gl/T7SW3p

ここをクリック

成功すればOK適当な

シュミレーターでOK

エラーが消えない…(;_;)

他の方法に切り替えましょう！

心配いりません！

http://goo.gl/T7SW3p


色見本３


28

SDKを使うための初期設定（APIキーの設定・SDKの初期化）をする

ここにAPIキーを書きます

ここにSDKの初期化処理を書きます

AppDelegate.swift を編集します Xcode


色見本３


29

「YOUR_NCMB_APPLICATIONKEY」「YOUR_NCMB_CLIENTKEY」はmobile backendのダッシュボードのアプリケーションキー、クライアントキーにそれぞれ書き換えてください！

d

必ずコピーボタンを使ってください！

※コピペ用ページからコピペできます。コードを書いた後、mBaaSのダッシュボードからAPIキーをコピペしてください

APIキーを

設定します

AppDelegate.swift を編集します


Xcode


色見本３


30

application:didFinishLaunchingWithOptionsメソッド

にSDKの初期化を書きます

この２つを書けばmBaaSの他の機能もすぐ使えます

AppDelegate.swift を編集します


Xcode


色見本３


31

次はこのメソッドの下に書きます

SDKの初期化の下に書きます

続けてAppDelegate.swiftを編集します

プッシュ通知に関するコードの実装application:didFinishLaunchingWithOptionsメソッド内でデバイストークンの要求をAPNsに対して行います

Xcode

※コピペ用ページからコピペしてください


色見本３


32

プッシュ通知に関するコードの実装デバイストークンが取得された後に呼び出されるdidRegisterForRemoteNotificationsWithDeviceTokenメソッドを追記して、mBaaSに取得したデバイストークンを保存します

「Command + s 」で保存をします※コピペ用ページからコピペしてください

さっき記述したメソッドの下に書きます

Xcode


色見本３


33

せっかくなので…

このままだと何も表示されないただ白い画面のアプリなので、画面に文字を書きましょう

「Label」を選択してViewに

ドラッグ&ドロップします

Xcode

おまけ

「Main.storyboard」を開きます


色見本３


34

表示する文字の編集

文字のサイズや太さなどの編集

ダブルクリック

編集できます

文字の色の編集

文字の行数の編集

適当に変えてみましょう！

こんな感じにでOKです！

おまけ

Xcode


色見本３

35


やること確認 5. 実機でデバッグビルドを行う

Swift

プッシュ通知の許可

デバイストークンの取得ビルドして初回起動すると…

デバイストークンの登録

連携

APIキーの設定

SDKの導入


読み込み

開発用証明書(.cer)プロビジョニングプロファイルの設定

Bundle ID の設定

Xcodeアプリ


色見本３


36

開発用証明書(.cer)とプロビショニングプロファイルの設定プロジェクトを選択＞「Build Settings」を選択＞「Code Signing」を表示する• 「Code Signing Identity」で「Automatic」を選択する• 「Provisioning Profile」で作成したプロビショニングプロファイルを選択する

開発用証明書が自動的に入ります

Xcode


色見本３


37

証明書の設定プロジェクトを選択＞「General」を選択＞「Identity」を表示する

• 「Bundle Identifier」にAppID作成時に入力したBundleIDを入力する

XcodeApple Developer Program


色見本３


38

iPhoneをMacにつなぐ• LightningケーブルでMacにiPhoneをつなぐ• 左上のDevice選択欄から、つないだiPhoneを選択する

プロジェクトを実行すします完了！

Xcode

実行のボタン「」をクリック！

ここをクリック

接続したiPhoneを選択します


色見本３

39


やること確認 6. 動作確認！プッシュ通知を送りましょう

Swift

プッシュ通知の許可

デバイストークンの取得

デバイストークンの登録

連携

APIキーの設定

SDKの導入


読み込み

開発用証明書(.cer)プロビジョニングプロファイルの設定

Bundle ID の設定

コントロールパネルからプッシュ通知を配信

プッシュ通知配信！！

Xcodeアプリ


色見本３

6. 動作確認！プッシュ通知を送りましょう

40

アプリを起動します！

初回起動時にはプッシュ通知許可のアラートが出るので必ず「OK」を

タップ

iPhone

起動されたら

デバイストークンの取得完了です！

タップして起動！！

ちゃんと取得されたか確認しましょう

アプリを一度閉じます


色見本３


41

デバイストークンが取得されたことを確認する

mBaaSのデータストアの中にある「installationクラス」を開きます


ここに入りました！ここに登録された端末にプッシュ通知を送信することが

可能です


色見本３


42

mBaaSダッシュボードプッシュ通知を

送りましょう！！「メッセージ」を

記入します

「プッシュ通知」クリックして

をクリック！

「iOS端末に配信する」にチェックを入れる

「プッシュ通知を作成する」をクリック

すぐにiPhoneを確認！


色見本３


43

プッシュ通知を送りましょう！！

iPhone

無事にプッシュ通知は届きましたか？？

プッシュ通知が受信されました★

ロック画面

スマホ起動時画面

通知画面

完了！


色見本３

まとめ

☺Swiftアプリに簡単にプッシュ通知機能を付けることができた！

他のSwiftアプリにすぐに応用可能ということがわかった！

☺プッシュ通知の仕組みがわかった！

☺ｍBaaSの使い方がわかった！

44


色見本３

45

お願い

アンケートに@nifty IDをご記入ください

mBaaSのダッシュボードhttp://mb.cloud.nifty.com/右上の[ユーザー名]＞[アカウント設定]＞プロフィールから確認できます

アルファベット3桁＋数字5桁

★ハンズオンセミナーはいかがでしたでしょうか？ぜひご感想をアンケートにお書きください。また今後の「mBaaSハンズオンセミナー」で扱って欲しいテーマなどありましたご記入ください。★本日はご参加いただきありがとうございました！

http://mb.cloud.nifty.com/

swiftアプリにプッシュ通知を組み込もう！

Education