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 Transfer
WatchConnectivityの機能(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を使用するための準備
①フレームワークの準備とExtensionDelegate
import 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対応アプリを申請する際は、スクリーンショットやアイコンなど
のバイナリファイル以外の準備も考慮しないといけない
ご静聴ありがとうございました!
✦
データ共有の仕組みを使う際はバージョンの確認を!(特にライブラリ)

Apple watch対応アプリのポイントや基本実装・連携tips