【swift】クーポン配信アプリを作ろう!

100
Swift mobile backend @ 20160804 (20160913 ) 1 / 100

Upload: natsumo

Post on 14-Feb-2017

41 views

Category:

Education


8 download

TRANSCRIPT

【Swift編】ニフティクラウドmobile backend レベルアップセミナー

クーポン配信アプリを作ろう!

@ニフティ株式会社

20160804作成(20160913更新)1 / 100

事前準備

ニフティクラウドmobile backendのアカウント登録がお済みでない方は、

ホームページ右上にある「無料登録」ボタンをクリックして、

アカウント登録を実施してください

2 / 100

150分でアプリ完成させます 講義形式で説明と演習を繰り返して

アプリを作成します

今回のハンズオンセミナーについて

セミナーの形式

3 / 100

今回のハンズオンセミナーについて

学ぶ内容

「mBaaS Shop List」アプリの作成を通して、アクティブユーザー率を上げる

効率的なプッシュ通知の組み込み方を学びます

4 / 100

今回のハンズオンセミナーについて

学ぶ内容

「mBaaS Shop List」アプリの作成を通して、アクティブユーザー率を上げる

効率的なプッシュ通知の組み込み方を学びます

5 / 100

今回のハンズオンセミナーについて

学ぶ内容

「mBaaS Shop List」アプリの作成を通して、アクティブユーザー率を上げる

効率的なプッシュ通知の組み込み方を学びます

6 / 100

ニフティクラウド mobile backendとは

サービス紹介

スマホアプリで汎用的に実装される機能を、クラウドサービスとして提供して

いるサービスです

通称「mBaaS」と呼びます

7 / 100

ニフティクラウド mobile backendとは

iOS SDKの特徴

SDKのインストールが必要です

今回は実装済み

参考:クイックスタート

SDKの初期化処理が必要です後で処理を実装します

NCMB.setApplicationKey("YOUR_NCMB_APPLICATIONKEY", clientKey: "YOUR_NCMB_CLIENTKEY")

8 / 100

ニフティクラウド mobile backendとは

iOS SDKの特徴

サーバへリクエスト処理には、同期処理と非同期処理があります

// 例)保存の場合

/* 同期処理 */save(nil)

/* 非同期処理 */saveInBackgroundWithBlock(nil)

同期処理と非同期処理

同期処理はその処理が完了するまで、次の処理が実行されません

非同期処理はバックグラウンドで処理を実行し、次の処理を実行します

9 / 100

ハンズオンの概要

作成するアプリについて

クーポン配信アプリをイメージした「mBaaS Shop List」アプリの作成を通して、mBaaSの機能を理解していきますmBaaSの連携部分をコーディングし、アプリを完成させ、次の内容を実現して

いきます

会員登録をするとお店情報を見ることができます

お店のお気に入り登録ができ、お気に入り登録をしたお店からプッシュ通

知で届きます

性別や都道府県限定のプッシュ通知ができます

お店からのプッシュ通知でクーポンを直接配信することができます

決まった時間に通知を出すようにプッシュ通知を仕掛けることができます

10 / 100

ハンズオンの概要

作成するアプリについて

11 / 100

ハンズオンの流れ

前半 「mBaaS Shop List」アプリを作ろう!

1. ハンズオンの準備2. 会員管理機能の作成3. Shop情報の設定4. お気に入り機能の作成

後半 プッシュ通知を送ろう!

1. プッシュ通知の準備2. プッシュ通知を送信:セグメント配信

3. プッシュ通知を送信:リッチプッシュ

4. プッシュ通知を送信:ペイロード

12 / 100

「mBaaS Shop List」アプリを作ろう!

<前半>

13 / 100

1.ハンズオンの準備

14 / 100

ハンズオンの準備

Xcodeプロジェクトをダウンロード

下記リンクをクリックして、ZIPファイルでダウンロードしてください▼

SwiftAdvancePushApp

ディレクトリにある「SwiftAdvancePushApp.xcworkspace」をダブルクリックして、Xcodeを開いてください

15 / 100

ハンズオンの準備

プロジェクトにあらかじめ実施していること

mBaaS iOS SDKのインストール

mBaaSとの連携以外の処理のコーディング

アプリのデザインをMain.storyboardで作成し、処理は画面ご

とViewControllerにコーディングしています

16 / 100

ハンズオンの準備

mBaaSの準備

mBaaSにログインしてアプリを作成します

17 / 100

ハンズオンの準備

APIキーの設定とSDKの初期化

AppDelegate.swiftを開きます

application(_:didFinishLaunchingWithOptions)メソッド内に処理を実装しま

す[一部実装済み]

// 【mBaaS】 APIキーの設定とSDKの初期化NCMB.setApplicationKey("YOUR_NCMB_APPLICATIONKEY", clientKey: "YOUR_NCMB_CLIENTKEY")

初期化処理の「YOUR_NCMB_APPLICATIONKEY」,「YOUR_NCMB_CLIENTKEY」の部

分をアプリ作成時に発行されたAPIキーに書き換えてください

APIキーは、mBaaSのダッシュボードから「アプリ設定」→「基本」にあ

ります

18 / 100

2.会員管理機能の作成

19 / 100

会員管理機能の作成

mBaaSの設定

会員管理設定の「メールアドレス/パスワード認証」を許可します

20 / 100

会員管理機能の作成

会員管理①:会員登録用メールを要求する[実装済み]

21 / 100

会員管理機能の作成

会員管理①:会員登録用メールを要求する[実装済み]

SignUpViewController.swiftを開きます

会員登録処理は以下のように実装されます

// 【mBaaS:会員管理①】会員登録用メールを要求するNCMBUser.requestAuthenticationMailInBackground(address.text) { (error: NSError!) -> Void in if error != nil {

// 会員登録用メールの要求失敗時の処理

} else {

// 会員登録用メールの要求失敗時の処理

}}

22 / 100

会員管理機能の作成

会員管理①:会員登録用メールを要求する[実装済み]

それぞれ処理を追記しています

// 会員登録用メールの要求失敗時の処理

print("エラーが発生しました:\(error!.code)")

self.statusLabel.text = "エラーが発生しました:\(error!.code)"

// 会員登録用メールの要求失敗時の処理

print("登録用メールを送信しました")

self.statusLabel.text = "登録用メールを送信しました"

// TextFieldを空にするself.address.text = ""

23 / 100

会員管理機能の作成

会員管理②:メールアドレスとパスワードでログイン

[実装済み]

24 / 100

会員管理機能の作成

会員管理②:メールアドレスとパスワードでログイン

[実装済み]

LoginViewController.swiftを開きます

ログイン処理は以下のように実装されます

// 【mBaaS:会員管理②】メールアドレスとパスワードでログインNCMBUser.logInWithMailAddressInBackground(address.text, password: password.text) { (user: NCMBUser if error != nil {

// ログイン失敗時の処理

}else{

// ログイン成功時の処理

}}

25 / 100

会員管理機能の作成

会員管理②:メールアドレスとパスワードでログイン

[実装済み]

それぞれ処理を追記しています

// ログイン失敗時の処理

print("ログインに失敗しました:\(error.code)")

self.statusLabel.text = "ログインに失敗しました:\(error.code)"

// ログイン成功時の処理

print("ログインに成功しました:\(user.objectId)")

// AppDelegateにユーザー情報を保持self.appDelegate.current_user = user as NCMBUser

// TextFieldを空にするself.cleanTextField()

// statusLabelを空にするself.statusLabel.text = ""

// 画面遷移self.performSegueWithIdentifier("login", sender: self)

26 / 100

会員管理機能の作成

動作確認(1)ログインをしてみましょう

ここではシュミレーターでビルドし、動作確認を行います

ログイン画面で「会員登録」をタップします

会員登録画面でメールアドレスを入力し「登録メールを送信」をタップします

ログを確認してください

エラーコード一覧

27 / 100

会員管理機能の作成

動作確認(1)ログインをしてみましょう

会員登録メールが届くので、パスワード設定します

28 / 100

会員管理機能の作成

動作確認(1)ログインをしてみましょう

再びログイン画面に戻り「メールアドレス」と「パスワード」でログインしま

ログを確認してください

mBaaSのダッシュボードを確認してください

会員管理にユーザーが登録されました

エラーコード一覧

29 / 100

会員管理機能の作成

会員管理③:ユーザー情報更新

30 / 100

会員管理機能の作成

会員管理③:ユーザー情報更新

TopViewController.swiftを開きます

初回のみ表示されるユーザー情報登録画面に入力した情報をmBaaSのユーザー

情報に追加する処理を実装します

コメントの下にコードを追記していきます

// 【mBaaS:会員管理③】ユーザー情報更新

かなり下の方にあります

31 / 100

会員管理機能の作成

会員管理③:ユーザー情報更新

// 【mBaaS:会員管理③】ユーザー情報更新

// ログイン中のユーザーを取得let user = NCMBUser.currentUser()

// ユーザー情報を設定user.setObject(self.nickname.text, forKey: "nickname")user.setObject(self.GENDER_CONFIG[self.genderSegCon.selectedSegmentIndex], forKey: "gender")user.setObject(self.prefecture.text, forKey: "prefecture")user.setObject([] as Array<String>, forKey: "favorite")

// user情報の更新user.saveInBackgroundWithBlock({(error: NSError!) -> Void in if error != nil {

// 更新失敗時の処理

} else {

// 更新成功時の処理

}})

32 / 100

会員管理機能の作成

会員管理③:ユーザー情報更新

それぞれ処理を追記します

// 更新失敗時の処理

print("ユーザー情報更新に失敗しました:\(error.code)")

self.viewLabel.text = "登録に失敗しました(更新):\(error.code)"

// 更新成功時の処理

print("ユーザー情報更新に成功しました")

// AppDelegateに保持していたユーザー情報の更新self.appDelegate.current_user = user as NCMBUser

// 【mBaaS:プッシュ通知③】installationにユーザー情報を紐づける

/*****後でここに処理を記述します*****/

// 画面を閉じるself.registerView.hidden = true

// ニックネーム表示用ラベルの更新

self.nicknameLabel.text = "\(self.appDelegate.current_user.objectForKey("nickname"))さん、こんにちは!"

// 画面更新self.checkShop()

33 / 100

3.Shop情報の設定

34 / 100

Shop情報の設定

mBaaSにShop情報を用意する(データストア)

ニフティクラウド mobile backendのダッシュボードから「データストア」を開

き、「+作成▼」ボタンをクリックし、「インポート」をクリックします

クラス名に「Shop」と入力しますダウンロードしたサンプルプロジェクトにあるSettingフォルダ内の「Shop.json」を選択してアップロードします

35 / 100

Shop情報の設定

mBaaSにShop情報を用意する(データストア)

こんな感じでインポートされます

36 / 100

Shop情報の設定

mBaaSにShop情報を用意する(ファイルストア)

ニフティクラウド mobile backendのダッシュボードから「ファイルストア」を

開き、「↑アップロード」ボタンをクリックします

ダウンロードしたサンプルプロジェクトにあるSettingフォルダ内の「icon」「Shop」「Sale」内にあるファイルをすべてをアップロードします

37 / 100

Shop情報の設定

mBaaSにShop情報を用意する(ファイルストア)

こんな感じでアップロードされます

38 / 100

Shop情報の設定

データストア:「Shop」クラスのデータを取得

TopViewController.swiftを開きます

インポートしたShopクラスのデータを取得する処理を実装します

// 【mBaaS:データストア】「Shop」クラスのデータを取得

// 「Shop」クラスのクエリを作成let query = NCMBQuery(className: "Shop")

// データストアを検索query.findObjectsInBackgroundWithBlock({ (objects: Array!, error: NSError!) -> Void in if error != nil {

// 検索失敗時の処理

} else {

// 検索成功時の処理

}})

39 / 100

Shop情報の設定

データストア:「Shop」クラスのデータを取得

それぞれ処理を追記します

// 検索失敗時の処理

print("検索に失敗しました:\(error.code)")

// 検索成功時の処理

print("検索に成功しました")

// AppDelegateに「Shop」クラスの情報を保持self.appDelegate.shopList = objects as! Array

// テーブルの更新self.shopTableView.reloadData()

40 / 100

Shop情報の設定

ファイルストア①:icon画像の取得

41 / 100

Shop情報の設定

ファイルストア①:icon画像の取得

CustomCell.swiftを開きます

CustomCell.swiftはテーブルのセルを作成するファイルです

トップ画面に各ショップのアイコンをmBaaSから取得して表示する処理を実装します

// 【mBaaS:ファイルストア①】icon画像の取得

// 取得した「Shop」クラスデータからicon名を取得let imageName = object.objectForKey("icon_image") as! String

// ファイル名を設定let imageFile = NCMBFile.fileWithName(imageName, data: nil)

// ファイルを検索imageFile.getDataInBackgroundWithBlock { (data: NSData!, error: NSError!) -> Void in if error != nil {

// ファイル取得失敗時の処理

} else {

// ファイル取得成功時の処理

}}

42 / 100

Shop情報の設定

ファイルストア①:icon画像の取得

それぞれ処理を追記します

// ファイル取得失敗時の処理

print("icon画像の取得に失敗しました:\(error.code)")

// ファイル取得成功時の処理

print("icon画像の取得に成功しました")

// icon画像を設定self.iconImageView_top.image = UIImage.init(data: data)

43 / 100

Shop情報の設定

ファイルストア②:Shop画像の取得

44 / 100

Shop情報の設定

ファイルストア②:Shop画像の取得[実装済み]

ShopViewController.swiftを開きます

Shop画面に各ショップの画像をmBaaSから取得して表示する処理も同様に実装できます

// 【mBaaS:ファイルストア②】Shop画像の取得

// 取得した「Shop」クラスデータからshop画面用の画像名を取得let imageName = appDelegate.shopList[shopIndex].objectForKey("shop_image") as! String

// ファイル名を設定let imageFile = NCMBFile.fileWithName(imageName, data: nil)

// ファイルを検索imageFile.getDataInBackgroundWithBlock { (data: NSData!, error: NSError!) -> Void in if error != nil {

// ファイル取得失敗時の処理

/* 省略 */ } else {

// ファイル取得成功時の処理

/* 省略 */ }}

45 / 100

Shop情報の設定

動作確認(2)会員情報登録とShop情報表示

再びシュミレーターでビルドし、動作確認を行います

ログイン後初回のみ、ユーザー情報登録画面が表示されます

入力し「登録」をタップします

このとき、会員情報が更新されますので、mBaaSのダッシュボードを確認

してみましょう

ログを確認してください

エラーコード一覧

46 / 100

Shop情報の設定

動作確認(2)会員情報登録とShop情報表示

トップ画面に「icon画像」「Shop名」「カテゴリ」が表示されます

Shopを1つ選んでタップしますmBaaSに登録されているimageにアクセスし、Shopページ(画像)が表示

されます

会員ページをタップします

ユーザー情報が表示されます

エラーコード一覧

47 / 100

4.お気に入り機能の作成

48 / 100

お気に入り機能の作成

お気に入り機能について

お気に入り機能は好きなShopをお気に入りとして保存できる機能です「お気に入り」画面ではSwitchと「登録」ボタンで設定します

「Shop」画面では右上のハートマークをタップすることでShop単位で設定できます(♥…ON,♡…OFF)

49 / 100

お気に入り機能の作成

会員管理④:ユーザー情報の更新[実装済み]

FavoriteViewController.swiftを開きます

お気に入り画面からfavoriteデータの更新処理はユーザー情報の登録と同様にし

て実装できます

// 【mBaaS:会員管理④】ユーザー情報の更新

// ログイン中のユーザーを取得let user = NCMBUser.currentUser()

// favoriteに更新された値を設定user.setObject(appDelegate.favoriteObjectIdTemporaryArray, forKey: "favorite")

// ユーザー情報を更新user.saveInBackgroundWithBlock { (error: NSError!) -> Void in if error != nil {

// 更新に失敗した場合の処理

/* 省略 */ } else {

// 更新に成功した場合の処理

/* 省略 */ }}

50 / 100

お気に入り機能の作成

会員管理⑤:ユーザー情報の更新[実装済み]

ShopViewController.swiftを開きます

Shop画面からもfavoriteデータの更新処理はユーザー情報の登録と同様にして

実装できます

// 【mBaaS:会員管理⑤】ユーザー情報の更新

// ログイン中のユーザーを取得let user = NCMBUser.currentUser()

// 更新された値を設定user.setObject(favoriteObjectIdArray, forKey: "favorite")

// ユーザー情報を更新user.saveInBackgroundWithBlock { (error: NSError!) -> Void in if error != nil {

// 更新に失敗した場合の処理

/* 省略 */ } else {

// 更新に成功した場合の処理

/* 省略 */ }}

51 / 100

お気に入り機能の作成

動作確認(3)お気に入り情報登録・更新

再びシュミレーターでビルドし、動作確認を行います

ログイン後トップ画面下の「お気に入り」をタップします

お気に入り画面からお気に入り登録をしてみましょう

各Shop画面からも同様に登録してみましょうログを確認してください

エラーコード一覧

52 / 100

プッシュ通知を送ろう!<後半>

53 / 100

1.プッシュ通知の準備

54 / 100

プッシュ通知の準備

このあとのデバッグについて

以下の用意が必要です

デバッグ用の実機

プッシュ通知用証明書(p12形式)証明書の取得がまだの場合は下記をご参照ください

【サンプル】アプリにプッシュ通知を組み込もう!

55 / 100

プッシュ通知の準備

mBaaSの設定

プッシュ通知の許可とAPNsの証明書(p12形式)のアップロードを行います

56 / 100

プッシュ通知の準備

プッシュ通知①:デバイストークンの取得

AppDelegate.swiftを開きます

application(_:didFinishLaunchingWithOptions)メソッド内のSDKの初期化を実装した部分の直ぐ下に処理を実装します

// 【mBaaS:プッシュ通知①】デバイストークンの取得

// デバイストークンの要求if (NSFoundationVersionNumber > NSFoundationVersionNumber_iOS_7_1){

/** iOS8以上 **/

//通知のタイプを設定したsettingを用意 let type : UIUserNotificationType = [.Alert, .Badge, .Sound] let setting = UIUserNotificationSettings(forTypes: type, categories: nil)

//通知のタイプを設定 application.registerUserNotificationSettings(setting)

//DevoceTokenを要求 application.registerForRemoteNotifications()}else{

/** iOS8未満 **/ let type : UIRemoteNotificationType = [.Alert, .Badge, .Sound] UIApplication.sharedApplication().registerForRemoteNotificationTypes(type)}

57 / 100

プッシュ通知の準備

プッシュ通知②:デバイストークンの取得後に呼び出され

るメソッド

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

application(_:didFinishLaunchingWithOptions)メソッド下(外)に次のメソッドを実装します

// 【mBaaS:プッシュ通知②】デバイストークンの取得後に呼び出されるメソッドfunc application(application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: NSData)

// 端末情報を扱うNCMBInstallationのインスタンスを作成 let installation = NCMBInstallation.currentInstallation()

// デバイストークンの設定 installation.setDeviceTokenFromData(deviceToken)

// 端末情報をデータストアに登録 installation.saveInBackgroundWithBlock { (error: NSError!) -> Void in if error != nil {

// 端末情報の登録に失敗した時の処理

}else{

// 端末情報の登録に成功した時の処理

} }} 58 / 100

プッシュ通知の準備

プッシュ通知②:デバイストークンの取得後に呼び出され

るメソッド

それぞれ処理を追記します

// 端末情報の登録に失敗した時の処理

print("デバイストークン取得に失敗しました:\(error.code)")

// 端末情報の登録に成功した時の処理

print("デバイストークン取得に成功しました")

59 / 100

2.プッシュ通知を送信セグメント配信

60 / 100

プッシュ通知を送信:セグメント配信

プッシュ通知③:installationにユーザー情報を紐づける

TopViewController.swiftを開きます

「【mBaaS:会員管理③】ユーザー情報更新」の更新成功時の処理内にセグメ

ント配信のために必要なユーザー情報をinstallationに紐付けるための処理を実装します

上記コメントや処理を一度削除します

// 【mBaaS:プッシュ通知③】installationにユーザー情報を紐づける

// 【mBaaS:プッシュ通知③】installationにユーザー情報を紐づける

/*****後でここに処理を記述します*****/

// 画面を閉じるself.registerView.hidden = true

// ニックネーム表示用ラベルの更新

self.nicknameLabel.text = "\(self.appDelegate.current_user.objectForKey("nickname"))さん、こんにちは!"

// 画面更新self.checkShop()

61 / 100

プッシュ通知を送信:セグメント配信

プッシュ通知③:installationにユーザー情報を紐づける

次のように追記します

// 【mBaaS:プッシュ通知③】installationにユーザー情報を紐づける

// 使用中端末のinstallation取得let installation: NCMBInstallation? = NCMBInstallation.currentInstallation()if installation != nil {

// ユーザー情報を設定 installation!.setObject(self.nickname.text, forKey: "nickname") installation!.setObject(self.GENDER_CONFIG[self.genderSegCon.selectedSegmentIndex], forKey: installation!.setObject([] as Array<String>, forKey: "favorite") installation!.saveInBackgroundWithBlock({ (error: NSError!) -> Void in if error != nil {

// installation更新失敗時の処理

} else {

// installation更新成功時の処理

} })}

62 / 100

プッシュ通知を送信:セグメント配信

プッシュ通知③:installationにユーザー情報を紐づける

それぞれ処理を追記します

// installation更新失敗時の処理

print("installation更新(ユーザー登録)に失敗しました:\(error.code)")

// installation更新成功時の処理

print("installation更新(ユーザー登録)に成功しました")

// 画面を閉じるself.registerView.hidden = true

// ニックネーム表示用ラベルの更新

self.nicknameLabel.text = "\(self.appDelegate.current_user.objectForKey("nickname"))さん、こんにちは!"

// 画面更新self.checkShop()

63 / 100

プッシュ通知を送信:セグメント配信

プッシュ通知④:installationにユーザー情報を紐づける

[実装済み]

FavoriteViewController.swift開きます

同様に、お気に入り画面でお気に入り情報が更新されるたびに、installation情報を書き換えられます

// 【mBaaS:プッシュ通知④】installationにユーザー情報を紐づけるlet installation: NCMBInstallation? = NCMBInstallation.currentInstallation()if installation != nil {

// お気に入り情報を設定 installation!.setObject(self.appDelegate.favoriteObjectIdTemporaryArray, forKey: "favorite"

// installation情報の更新 installation!.saveInBackgroundWithBlock({ (error: NSError!) -> Void in if error != nil {

// installation更新失敗時の処理 } else {

// installation更新成功時の処理 } })}

64 / 100

プッシュ通知を送信:セグメント配信

プッシュ通知⑤:installationにユーザー情報を紐づける

[実装済み]

ShopViewController.swift開きます

同様に、Shop画面でもお気に入り情報が更新されるたびに、installation情報を書き換えるます

// 【mBaaS:プッシュ通知⑤】installationにユーザー情報を紐づけるlet installation: NCMBInstallation? = NCMBInstallation.currentInstallation()if installation != nil {

// お気に入り情報を設定 installation!.setObject(favoriteObjectIdArray, forKey: "favorite")

// installation情報の更新 installation!.saveInBackgroundWithBlock({ (error: NSError!) -> Void in if error != nil {

// installation更新失敗時の処理 } else {

// installation更新成功時の処理 } })}

65 / 100

プッシュ通知を送信:セグメント配信

動作確認の準備

もう一度会員情報登録画面を表示するため、mBaaSの会員管理画面で「クラス

の編集」をクリックします

「nickname」にチェックを入れて上の「削除」ボタンで削除します

66 / 100

プッシュ通知を送信:セグメント配信

動作確認の準備

実機でアプリをビルドします

プッシュ通知の許可をして、ログを確認します

端末側でプッシュ通知が許可されました

デバイストークン取得に成功しました

デバイストークンの取得に成功したら、mBaaSダッシュボードで確認します

エラーコード一覧

67 / 100

プッシュ通知を送信:セグメント配信

動作確認の準備

ログインをし、再びユーザー登録をします

このとき、installationが更新されますのでダッシュボードを確認します

ログを確認してください

エラーコード一覧

68 / 100

プッシュ通知を送信:セグメント配信

動作確認(4)セグメント配信

shopBをお気に入り登録しているユーザーに絞り込んでプッシュ通知を配信してみ

ましょう!

あらかじめshopBをお気に入りに設定しておきます(アプリ側)mBaaSのダッシュボードからShopクラスのデータを開き、shopBの「objectId」をコピーします

69 / 100

プッシュ通知を送信:セグメント配信

動作確認(4)セグメント配信

プッシュ通知を作成します

メッセージを入力します

例:ShopBセール開催中!

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

「配信端末」を設定します

70 / 100

プッシュ通知を送信:セグメント配信

動作確認(4)セグメント配信

「installationクラスからの絞込み」を選択します

絞り込み設定をします

ここでコピーしたShopBのobjectIdを貼り付けます

71 / 100

プッシュ通知を送信:セグメント配信

動作確認(4)セグメント配信

「1端末に向けて送信されます」と表示されればOKです「プッシュ通知を作成する」をクリックします

少し待つと配信されます→端末を確認!

72 / 100

プッシュ通知を送信:セグメント配信

動作確認(4)セグメント配信[おまけ]

いろいろなパターンで送ってみましょう!

別のショップを絞り込み

性別で絞込み

ShopAをお気に入り登録かつ女性で絞込みShopDをお気に入り登録かつ東京都で絞込みand more...

73 / 100

2.プッシュ通知を送信リッチプッシュ

74 / 100

プッシュ通知を送信:リッチプッシュ

リッチプッシュについて

プッシュ通知登録時にURLを指定することで、開封時にWebビューを表示でき

る機能です

プッシュ通知開封でアプリが起動するときに表示されます

アプリ起動中には表示されませんので動作確認にはアプリを閉じておく必

要があります(仕様)

75 / 100

プッシュ通知を送信:リッチプッシュ

リッチプッシュについて

今回はShopのセール画像を「公開ファイル」機能を利用して配信します

76 / 100

プッシュ通知を送信:リッチプッシュ

公開ファイルとは

「公開ファイル」機能とは、ファイルストアに保存した画像をリンクでアクセ

スできるようにする機能です

ファイルストアに登録した画像を「公開ファイル」として公開することが可能

です

77 / 100

プッシュ通知を送信:リッチプッシュ

公開ファイル設定

mBaaSのダッシュボードで、公開ファイル設定「HTTPでの取得」を有効にし

ます

78 / 100

プッシュ通知を送信:リッチプッシュ

公開ファイルURL確認方法

ファイルストアで確認できます

今回は「ShopD_sale.png」の公開ファイルURLを使用してみますURLをコピーします

79 / 100

プッシュ通知を送信:リッチプッシュ

公開ファイルURL確認方法

ブラウザでリンクをたたいて表示されることを確認してください

80 / 100

プッシュ通知を送信:リッチプッシュ

プッシュ通知⑥:リッチプッシュ通知を表示させる処理

AppDelegate.swiftを開きます

application(_:didFinishLaunchingWithOptions)メソッド内、【プッシュ通知

①】デバイストークンの取得の下に処理を実装します

if let remoteNotification = launchOptions?[UIApplicationLaunchOptionsRemoteNotificationKey] as

// 【mBaaS:プッシュ通知⑥】リッチプッシュ通知を表示させる処理

/* ここに書きます */

// 【mBaaS:プッシュ通知⑧】アプリが起動されたときにプッシュ通知からデータを取得する

}

81 / 100

プッシュ通知を送信:リッチプッシュ

プッシュ通知⑥:リッチプッシュ通知を表示させる処理

次のように追記します

// 【mBaaS:プッシュ通知⑥】リッチプッシュ通知を表示させる処理NCMBPush.handleRichPush(remoteNotification as [NSObject : AnyObject])

82 / 100

プッシュ通知を送信:リッチプッシュ

動作確認(5)リッチプッシュ

実機でアプリをビルドします

起動し、下記ログを確認したらアプリを完全に閉じます

端末側でプッシュ通知が許可されました

デバイストークン取得に成功しました

83 / 100

プッシュ通知を送信:リッチプッシュ

動作確認(5)リッチプッシュ

プッシュ通知を作成します

メッセージを入力します

URL欄にコピーした公開ファイルURLを貼り付けますそのまま送信してみましょう

84 / 100

プッシュ通知を送信:リッチプッシュ

動作確認(5)リッチプッシュ

しばらくするとプッシュ通知が届きます

プッシュ通知を開くとWebView画面が現れ、公開ファイルが表示されます

85 / 100

2.プッシュ通知を送信ペイロード

86 / 100

プッシュ通知を送信:ペイロード

ペイロードについて

プッシュ通知にはJSON形式で任意のデータを含めることができ、通知を受信

した時に、そのデータを受け取って処理を行うことができる機能です

データ取得の条件

アプリの起動中にプッシュ通知を受信してデータを取得

プッシュ通知受信後、アプリを起動時にデータを取得

今回は、配信時間とメッセージのデータを設定し、時限式でローカルプッシュ

を表示させる内容を実装します

プッシュ通知に設定するJSON形式のデータの例

{"deliveryTime":"2016-09-13 17:00:00", "message":"タイムセールスタート!"}

87 / 100

プッシュ通知を送信:ペイロード

プッシュ通知⑦:アプリが起動中にプッシュ通知からデー

タを取得する

AppDelegate.swiftを開きます

application(_:didFinishLaunchingWithOptions)メソッド外に次のメソッドを

実装します

// 【mBaaS:プッシュ通知⑦】アプリが起動中にプッシュ通知からデータを取得するfunc application(application: UIApplication, didReceiveRemoteNotification userInfo: [NSObject : AnyObject])

// プッシュ通知情報の取得 let deliveryTime = userInfo["deliveryTime"] as! String let message = userInfo["message"] as! String

// 値を取得した後の処理 if !deliveryTime.isEmpty && !message.isEmpty {

print("ペイロードを取得しました:deliveryTime[\(deliveryTime)],message[\(message)]")

// ローカルプッシュ配信 localNotificationDeliver(deliveryTime, message: message) }}

88 / 100

プッシュ通知を送信:ペイロード

プッシュ通知⑧:アプリが起動されたときにプッシュ通知

からデータを取得する

AppDelegate.swiftを開きます

application(_:didFinishLaunchingWithOptions)メソッド内、【mBaaS:プッ

シュ通知⑥】リッチプッシュ通知を表示させる処理の下に処理を実装します

// 【mBaaS:プッシュ通知⑧】アプリが起動されたときにプッシュ通知からデータを取得する

// プッシュ通知情報の取得if let deliveryTime = remoteNotification.objectForKey("deliveryTime") as? String { if let message = remoteNotification.objectForKey("message") as? String {

// ローカルプッシュ配信 localNotificationDeliver(deliveryTime, message: message) }}

89 / 100

プッシュ通知を送信:ペイロード

参考:ローカルプッシュ[実装済み]

// LocalNotification配信func localNotificationDeliver (deliveryTime: String, message: String) {

// 配信時間(String→NSDate)を設定 let formatter = NSDateFormatter() formatter.dateFormat = "yyyy-MM-dd HH:mm:ss" let deliveryTime = formatter.dateFromString(deliveryTime)

// ローカルプッシュを作成 LocalNotificationManager.scheduleLocalNotificationAtData(deliveryTime!, alertBody: message, userInfo: }

90 / 100

プッシュ通知を送信:ペイロード

動作確認(6)ペイロード(アプリ起動時)

実機でアプリをビルドします

起動し、下記ログを確認します

端末側でプッシュ通知が許可されました

デバイストークン取得に成功しました

そのままアプリを起動した状態にします

91 / 100

プッシュ通知を送信:ペイロード

動作確認(6)ペイロード(アプリ起動時)

プッシュ通知に設定するJSON形式のデータを作成します

JSONデータに設定する時間は、今から5分以上未来の時間に変更してく

ださい

JSONデータに設定するメッセージは、自由に変更してください

{"deliveryTime":"2016-09-13 17:00:00", "message":"タイムセールスタート!"}

作成したらコピーをしておいてください

92 / 100

プッシュ通知を送信:ペイロード

動作確認(6)ペイロード(アプリ起動時)

プッシュ通知を作成します

メッセージを入力が無い場合、サイレントプッシュとして送られます

「JSON」に作成したJSONデータを貼り付けます

93 / 100

プッシュ通知を送信:ペイロード

動作確認(6)ペイロード(アプリ起動時)

プッシュ通知を送信します

プッシュ通知を受信(サイレント)すると次のログが表示されます

ペイロードを取得しました:deliveryTime[2016-09-13 17:00:00],message[タイムセールスタート!]

指定時間にプッシュ通知が表示されることを確認してください

エラーコード一覧

94 / 100

プッシュ通知を送信:ペイロード

動作確認(6)ペイロード(非起動時)

アプリを完全に閉じます

再びプッシュ通知を作成します

95 / 100

プッシュ通知を送信:ペイロード

動作確認(6)ペイロード(非起動時)

アプリが起動していないので、サイレントプッシュでは気付いてもらえません

アプリを起動してもらう内容でプッシュ通知を作成します

メッセージ  例)明日PM5時よりタイムセールを行います!

JSON形式のデータを貼り付けます

JSONデータ作成  例)翌日のPM5時を設定

{"deliveryTime":"2016-09-13 17:00:00", "message":"タイムセールスタート!"}

時間は今から5分以上未来の時間に変更してください

96 / 100

プッシュ通知を送信:ペイロード

動作確認(6)ペイロード(非起動時)

プッシュ通知を受信したら、プッシュ通知からアプリを起動します

起動時にデータを取得します

1度起動してあればアプリは閉じてもOKです指定時間にプッシュ通知が表示されることを確認してください

97 / 100

まとめ

98 / 100

まとめ

学んだこと

mBaaSの各機能を使用してアプリ作成方法を学んだ!

会員管理機能

データストア

ファイルストア

プッシュ通知

プッシュ通知の活用方法がわかった!

セグメント配信

リッチプッシュ

ペイロード

99 / 100

参考

開催中のセミナーのご案内

随時新しいセミナーを実施していきますのでぜひチェックしてください!

ハンズオン内容が実装された完全版プロジェクト

SwiftAdvancePushApp【完成版】

コードはGitHubに公開していますmaster:完成版seminar_version:セミナー版

100 / 100