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

色見本３
必要な証明書の確認
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
コピペ用ページ
ログイン画面
この画面からログイン
をお願いします
作業に必要なコードやコマンドは
ここからコピペして使えます

色見本３
プッシュ通知の仕組み
APNs = Apple Push Notification Service とは、
サーバーからの通知をiPhoneなどの端末に転送するAppleの
プッシュ通知を送るためのサービスのこと。
①プッシュ通知許可
②デバイストークン発行
③デバイストークン登録サーバー
④プッシュ通知⑤プッシュ通知
ここに
を使います！
6

色見本３
7
アプリを作成するのに必要なツールの話
ニフティクラウドmobile backend
って何？？

色見本３
8
ニフティクラウドmobile backend
スマートフォンアプリのバックエンド機能が
開発不要になるクラウドサービス
1. mBaaS上にアプリを作成し、APNs用証明書の設定を行う
mobile
Backend
as ＝ mBaaS !!
a
Service

色見本３
プッシュ通知を送るまでの手順
2. Xcode上にSwiftアプリを作成する
3. CocoaPodsを使ってSDKをインストールする
4. Swiftでロジックを書く
5. 実機でデバッグビルドを行う
6. 動作確認！プッシュ通知を送りましょう★
9

色見本３
10
フロントエンド
やること確認 1. mBaaS上にアプリを作成し、APNs用証明書の設定を行う
バックエンド
APNs用証明書(.p12)の設定
プッシュ通知の許可設定

色見本３
11
利用登録が終わるとアプリの新規作成画面が表示されるので
アプリ名を入力して「新規作成」をクリックします
「SwiftPushApp」
と入力
https://console.mb.cloud.nifty.com/

色見本３
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 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 」で保存をします
※コピペ用ページからコピペできます

色見本３
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
エラーが
消えない
…(;_;)
他の方法に切り替えましょう！
心配
いりません！

色見本３
28
SDKを使うための初期設定（APIキーの設定・SDKの初期化）をする
ここにAPIキーを
書きます
ここに
SDKの初期化
処理を書きます
AppDelegate.swift を編集します Xcode

色見本３
29
「YOUR_NCMB_APPLICATIONKEY」
「YOUR_NCMB_CLIENTKEY」
はmobile backendのダッシュボードの
アプリケーションキー、
クライアントキーにそれぞれ書き換えて
ください！
d
必ずコピーボタンを
使ってください！
※コピペ用ページから
コピペできます。
コードを書いた後、
mBaaSのダッシュボードから
APIキーを
コピペしてください
APIキーを
設定します
AppDelegate.swift を編集します
mBaaS
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を入力する
Xcode
Apple 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クラス」を開きます
mBaaS
ここに入りました！ここに登録された端末に
プッシュ通知を送信することが
可能です

色見本３
42
mBaaS
プッシュ通知を
送りましょう！！
「メッセージ」を
記入します
「プッシュ通知」
クリックして
をクリック！
「iOS端末に配信する」
にチェックを入れる
「プッシュ通知を作成する」
をクリック
すぐにiPhoneを確認！

色見本３
43
プッシュ通知を
送りましょう！！
iPhone
無事にプッシュ通知は届きましたか？？
プッシュ通知が
受信されました★
ロック画面
スマホ起動時画面
通知画面
完了！

色見本３
まとめ
☺Swiftアプリに簡単にプッシュ通知機能を付けることができた！
他のSwiftアプリにすぐに応用可能ということがわかった！
☺プッシュ通知の仕組みがわかった！
☺ｍBaaSの使い方がわかった！
44

色見本３
45
お願い
アンケートに@nifty IDをご記入ください
mBaaSのダッシュボードhttp://mb.cloud.nifty.com/右上の
[ユーザー名]＞[アカウント設定]＞プロフィールから確認できます
アルファベット3桁＋数字5桁
★ハンズオンセミナーはいかがでしたでしょうか？
ぜひご感想をアンケートにお書きください。
また今後の「mBaaSハンズオンセミナー」で扱って
欲しいテーマなどありましたご記入ください。
★本日はご参加いただきありがとうございました！

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

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Viewers also liked

Viewers also liked (8)

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

Similar to Swiftアプリにプッシュ通知を組み込もう！ (20)

More from natsumo

More from natsumo (7)

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

Editor's Notes