AppleWatch対応アプリのポイントや基本実装・連携Tips～ 基本的な作り方や開発上の注意点等の押さえたい基本たち ～

自己紹介

✦ 今までの仕事履歴（本業）

石川県金沢市生まれ

本業はサーバーサイドのプログラマ ※Rails＆PHP使い

26歳～31歳：Ruby / PHPのプログラマ 23歳～25歳：Webデザイナー兼ディレクター

Objective-C歴：7ヶ月くらい Swift歴：半年弱

趣味：シルバーアクセサリー集め・スイーツ作り・開発

女子向けと食べ物系・エンタメ関連のお仕事が多い…

http://www.coffre.me/シンプルにつけられる家計簿アプリ「Coffre」の作者

✦ 酒井文也（さかい ふみや）

東京（大塚）住まいの31歳

こんな格好してますが…エンジニアです

2015年4月にApple Watchが出た

　(ここがポイント) 最初は賛否両論もあったAppleWatch & Watch OSだけど徐々に進化している模様

✦ AppleWatchとWatchOS1が発表（2014年11月）から現在まで

① Xcode6.2よりWatchKitが搭載（当時まだβ版）・開発者の間でも賛否両論はあった模様。でもApple好きはたいがい買うはず

② 2015年4月24日にAppleWatch発売＆AppleWatch対応アプリが続々と

・デバッグできない機能とかもある＆Xcodeのシミュレーター重たい問題など…

・Appleのサイトにアクセスできない問題で軽いお祭りに・メジャーなアプリが軒並みAppleWatch対応＆WatchOSの特性を生かしたアプリも

③ そして現在WatchOS1からWatchOS2へ…

・WatchOS1の時代ではできなかったことができるようになった (参考) https://developer.apple.com/watchkit/ (参考) https://developer.apple.com/library/ios/documentation/General/Conceptual/WatchKitProgrammingGuide/DesigningaWatchKitApp.html

おさえておきたい4つのController

　(ここがポイント) 現在はGlanceやNotificationの機能を活用したアプリが多いがアイデア次第で面白いアプリもつくれるかも

✦ 重要な4つのコントローラー（WatchOS2）① ExtensionDelegate

・iPhone側でいうところのAppDelegate.swiftに相当する部分

③ GlanceController（任意）

・Glance（ぱっと見る）機能を実装するためのコントローラー

④ NotificationController（任意）

② InterfaceController

・Notification（通知）機能を実装するためのコントローラー

・Watch側で操作や表示等の処理を行う画面のコントローラー・Watch対応アプリの基本となる部分・Watch対応アプリの画面を作成する際はこのクラスを継承

今回は①と②の部分を使った サンプルになります。

③と④に関してはまたの機会！

レイアウト実装の勘所

　(ここがポイント) サイズが38mmと42mmが2パターンしかないので各々のサイズのStoryBoardに配置して見た目をつくる

✦ ポイントはプログラムでラベルや画像の配置・位置指定が不可① 下記のようなメソッドはNG・CGRectMake(X座標, Y座標, 幅, 高さ) や CGSizeMake(幅, 高さ)が使えない

② 透明ボタンの配置などのiPhoneアプリでよく使う方法もNGなものがある・ボタンの上にボタンを重ねるのはNG・縦一列 or 横一列に並べる場合は「Group」要素を活用・アニメーションはWatchOS1は不可, WatchOS2はOK

③ 基本的には受取 or 表示がメイン ※set◯◯的なメソッドが多い・テキストフィールドは用意されてはいない・JSONを受け取る等の通信を介してのデータ取得はできる

・TableViewもiPhoneアプリの実装とはかなり違うので注意

・ボタンやラベル等の見た目に関連するパーツもprogrammaticallyに作れない

最初はクセがあると感じるかも しれませんが、慣れてくると結構直感的に レイアウトがつくれる印象です。

個人的に驚いたWatchOSのVer.UP

　(ここがポイント) 特にデータ連携まわりは抜本的に変わっているところもあるがUIの作り方などは基本的にはおんなじ

✦ できることが増えた! but ガラッと変わったところ① Extensionの位置が異なる・WatchOS1はiPhone側にあったが、WatchOS2はAppleWatch側に移った

② データ連携に関する実装・openParentApplicationメソッドが廃止　※データ共有・連携の実装が変わる 　→ WCSession のsendMessageなどを使います（参考）WatchOS2のサンプル　※via @shu223さん http://d.hatena.ne.jp/shu223/20150923/1442960805 https://github.com/shu223/watchOS-2-Sampler

③ 超個人的で聞き流していい話超どうでもいい話：エンジニアTypeに寄稿しました！ ※2015年3月30日 WatchOS1の時の記事 （参考）Apple Watchアプリの開発情報まとめ～できること、できないことを知ろう 【初心者向けアプリ開発3分tips】http://engineer.typemag.jp/article/ra-ios-tips08

アーキテクチャの変更＆ Watch OS1と比べてできる ことが増えています！

今回のサンプルのアーキテクチャ✦ WatchOS2でのiPhone ⇄ Watch間の送受信の方法

Watch Connectivityを使うよ

今回紹介するプラクティス

・Background TransferWatchConnectivityの機能（WatchConnectivity.frameworkにて提供される）

AppleWatch側のボタンをトリガーにしてiPhone側の処理を実行（簡単なログデータ新規登録）（実装のイメージ）「Sending and Receiving Interactive Messages」の部分を参考 http://techotopia.com/index.php/An_Introduction_to_Watch_Connectivity_in_watchOS_2

・Interactive Messaging→ ①Application Context, ②User Info Transfer, ③File Transfer

→ sendMessageメソッドを使用して辞書オブジェクト or sendMessageDataメソッドを使ってNSData型のオブジェクトを送る（iOS Appの機動状況によらず実行可能）（参考）watchOS 2 の Watch Connectivity を使ってみた via @koogawaさん [Qiita] http://qiita.com/koogawa/items/b39e1419cbbcda8efc07 [Blog] http://blog.koogawa.com/entry/2015/07/05/023459

(2015.10.14訂正) ※送り方 Watch → iPhone or iPhone → Watch 受取と送信をそれぞれ設定する感じ

Watch Connectivityの参考資料✦ 下記のスライドや資料も参考にしてみると良いと思います！

スライドや日本語のサンプル等

英語での参考資料その他

概要：http://www.kristinathai.com/watchos-2-how-to-communicate-between-devices-using-watch-connectivity/ その1：http://www.kristinathai.com/watchos-2-tutorial-using-sendmessage-for-instantaneous-data-transfer-watch-connectivity-1/ その2：http://www.kristinathai.com/watchos-2-tutorial-using-application-context-to-transfer-data-watch-connectivity-2/

・iOSとWatchOSの双方向データ送受信（Watch Connectivity）を試してみる http://lh-sd.hatenablog.com/entry/2015/10/05/195714

・Watch connectivityについて http://www.slideshare.net/motokinarita7/watch-connectivity

・watchOS2 - iPhone Appとのデータ同期について http://www.slideshare.net/TaikiHirai/watchos2-iphone-app-51977952

コードや書き方例などが載っていますのでとっても参考になりました！

では実際にサンプルを！

https://github.com/fumiyasac/goCoworkingSpaceReport

✦ おおまかな仕様や動きについて(全体)

それでは実際にDemoをご覧ください！

(ここがポイント) iPhone ⇄ Watch間の送受信を利用してトランシーバー的な操作をするイメージ

✦ こちらのURLからどうぞ！（ブランチ：for_swift_study）

①ボタンを押す

②表記が変わる

③データ登録

④Watch側も Labelが変わる

・Watch側：WatchOS Ver2・iPhone側：iOS9.0 Swift2.0・データ保存機構：parse.com

今回のシナリオ

① Watchからメッセージ送信② App側でデータ受信＆データの保存③ WatchでReplyを受け取る

全体の構成概要

Pointその1 : WCSessionDelegate

WatchConnectivityクラスをimportをしてWCSessionを使えるようにする

(ここがポイント) WCSessionDelegateの宣言とimport、そしてWCSessionの判定処理を忘れずに！

✦ まずはExtensionDelegateにWCSessionを使用するための準備

①フレームワークの準備とExtensionDelegateimport WatchKit import WatchConnectivity

class ExtensionDelegate: NSObject, WKExtensionDelegate, WCSessionDelegate {

func applicationDidFinishLaunching() { // Perform any final initialization of your application. if (WCSession.isSupported()) { let session = WCSession.defaultSession() session.delegate = self session.activateSession() } }

..以下続く

■解説参考（イメージ図がとてもわかりやすいです） via クラスメソッドさんのブログ http://dev.classmethod.jp/smartphone/watchconnectivity/ こちらはWatchOS2に新しく追加された機能

赤枠の部分の記載を忘れずに！ （これないとNGです）

作り方のポイント

Pointその2 : sendMessageメソッド

sendMessageメソッドを使ってiPhone側にメッセージ[命令]を送ってみる

(ここがポイント) replyHandlerが正常処理・errorHandlerが異常処理になる（クロージャー内に設定）

✦ Watch側でボタンが押されたらiPhoneへ送る処理を実装しよう

作り方のポイント..省略 // Send message of Test Code. (This is Test Code for 10/11) self.sendMessageLabel.setText("Adding...")

if (WCSession.defaultSession().reachable) { let message = ["command" : "checkin"]

WCSession.defaultSession().sendMessage(message, replyHandler: { (reply) -> Void in

dispatch_async(dispatch_get_main_queue(), { let messageForResult: String! = String(reply["status"]!) self.sendMessageLabel.setText(messageForResult) }) , errorHandler: { (error) -> Void in dispatch_async(dispatch_get_main_queue(), { self.sendMessageLabel.setText("Error！") }) } )

※messageが[送るもの]・reply[受け取るもの]はDictionary型で設定　※replyの内容はiPhone

①メッセージをiPhone側に送る ②成功したら表記を変更

Pointその3 : iPhone側の準備

iPhone側でもWatchConnectivityクラスをimportをしてWCSession等の下準備

(ここがポイント) WatchConnectivityクラスのインポート＆Watch側と同様の確認が必要

✦ Watch側のメッセージを受け取る下準備

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

..中略 // WatchConnectivity Check if (WCSession.isSupported()) { let session = WCSession.defaultSession() session.delegate = self session.activateSession() if session.paired != true { print("Apple Watch is not paired") } if session.watchAppInstalled != true { print("WatchKit app is not installed") } } else { print("WatchConnectivity is not supported on this device") } }

作り方のポイント

・WCSessionの確認が必要

・Watchとのペアリング状況 の諸々の確認処理

Pointその4 : iPhone側の処理

Watch側から送信されたメッセージに応じて処理を行う

(ここがポイント) メッセージの内容に応じてiPhoneアプリ側の処理ロジックの変更が可能

✦ iPhone側での表示の変更＆記録データの登録

※Parseに関しても機会があれば発表しようと思います。

//Interactive Messagingの処理 func session(session: WCSession, didReceiveMessage message: [String : AnyObject], replyHandler: ([String : AnyObject]) -> Void) { var replyValues = Dictionary<String, AnyObject>() var backMessage: String! let viewController = self.window!.rootViewController as! ViewController let operation: String = message["command"] as! String if (operation == "checkin") { backMessage = "データを追加したよ！" let date = NSDate() let history = History(historyDate: date) history.saveHistory() } else if (operation == "checkout") { backMessage = "表示をもどしたよ！" } else { backMessage = "Error!" } viewController.debugLabel.text = backMessage replyValues["status"] = backMessage replyHandler(replyValues) }

作り方のポイント

message[“command”] がcheckinならば記録データを保存

（参考） 今回のサンプルでは記録データの保存には mBaasの一種であるParseを使いました。 ※ let history = History(historyDate: date) の部分がこれにあたる

✦ 意外と色々ハマっちゃう部分が多かったのでさらっと紹介

ざっくりと公開の際の注意点

実際僕も数回リジェクトをされました…ショック… → WatchOS2でリベンジしたる！

■Provisioning ProfileはWatchOS用に必要： ・本体用だけではなくWatchOS用にも用意しないといけない

■アイコンやスクリーンショットはWatchOS用に： ・意外とWatch用のアイコンやスクリーンショットの準備を忘れてしまい 　がちなので注意

■データ連携部分は特にしっかりとDebugを： ・特に連携部分の処理がうまくいかない場合にアプリが落ちるのは致命傷 　なので気をつけるべし

■Watch OSの「Human Interface Guideline」の一読は必ず： ・UIに関しても結構注意点がある（結構細かいとこまで見てる） 例）アイコンの背景色が真っ黒は× 例）ボタンの並び数（横3つぐらいまでがリミット）等…

諦めたアプリ 「10秒虫食い算」

※現在申請中です

✦ 通知を受け取る or 処理のトリガーとして活用されることが多い

Watch OS対応アプリの紹介

① Slack（通知）

③ Camera（iPhoneのカメラアプリ）

② Nain（コミュニケーション）

■仕事でのやりとり状況の確認 ・メッセージがあるとNotificationで通知してくれる ・簡易的な返事ができる（確認したよ！的な）

■センサー情報を「コミュニケーション」のツールとして使ったアプリ ・自分や相手のステータス・位置情報（家にいる・移動中・仕事中）がチェックできる http://www.nain.jp/

■AppleWatch側のアプリでカメラのシャッターや調節等ができる ・本体の機能を発動させるためのトリガーとしての役割 ※AppleWatchに対応したカメラアプリは探してみると面白い物が見つかるかも？

※バージョンが変わるとガラリと変わるので実装の際は特に注意が必要です。

✦ WatchOSは思った以上に制約やiPhoneアプリの実装と違うことが多い

セッションのまとめ

✦ UIの作成の際はStoryBoardに配置する方法で行う

✦ InterfaceController, GlanceController, NotificationControllerの3つが主なWatch対応時の実装で大事なコントローラー

✦ iPhone ⇄ AppleWatch間のやり取りはWatchOS1と2でガラッと変わる

✦ WatchOS対応アプリを申請する際は、スクリーンショットやアイコンなどのバイナリファイル以外の準備も考慮しないといけない

ご静聴ありがとうございました！

✦ データ共有の仕組みを使う際はバージョンの確認を！（特にライブラリ）