はじめてのWKInterfaceController

2014/11/25 @TachibanaKaoru

About Me

• @TachibanaKaoru

• 渋谷のgenesix (Voyage Group) で働くiOSエンジニアです

• Blog : http://www.toyship.org/

前提

• この資料はAppleから一般に公開されている資料に基づいたものです

• 2014/11/25現在の状況に基づいており、今後変更される可能性もあります。

Reference• WatchKit Programming Guide

• https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/WatchKitProgrammingGuide/index.html

• WatchKit Framework Reference • https://developer.apple.com/library/prerelease/ios/documentation/WatchKit/

Reference/WatchKit_framework/index.html

• Apple Watch Human Interface Guidelines • https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/

Conceptual/WatchHumanInterfaceGuidelines/index.html

• Getting Started with WatchKit • http://devstreaming.apple.com/videos/watch/Getting_Started_With_Watchkit/

Getting_Started_With_Watchkit.m3u8

WatchKit

• Apple Watchのアプリのためのフレームワーク

• 2014/11/18 発表

Watch App Interface

WatchKit App Notification Glance

WatchKit App

WatchKit App Notification Glance

WatchKit App

• 通常のアプリ画面

• ユーザー入力を受け付け、複数の画面を遷移することが可能。

Notification

WatchKit App Notification Glance

Notification

• オプショナル

• Notificationに対応するための画面。

• iOS8から導入された選択肢付きのNotificationに対応。

Glance

WatchKit App Notification Glance

Glance

• オプショナル

• 文字盤を上に向かってスワイプする

• ユーザー入力は基本的には不可能

WKInterfaceController

• Apple Watchにおいて、一画面の描画・コントロールを司るクラス

• iOSアプリにおけるUIViewController

• このクラスを継承して、それぞれの画面のクラスを作成し、その上にUIパーツを配置します。

UIパーツ• WKInterfaceControllerにのせられる画面パーツは限られており、独自UIなどは使うことができません。

Label & Button• WKInterfaceLabel

• WKInterfaceButton

Slider & Switch• WKInterfaceSlider

• ボタン

• WKInterfaceSwitch

• on/off Switch

Image & Map• WKInterfaceImage

• WKInterfaceMap

• マップを表示するだけ

Table & Timer Label• WKInterfaceTable

• WKInterfaceTimerLabel

その他

• WKInterfaceGroup

• 複数の画面パーツのグルーピングを行う

• WKInterfaceSeparator

• 単なるセパレーター

Menu

• 画面を長押しすると表示されるコンテキストメニュー

• WKInterfaceControllerごとに0~4個の範囲で設定することができる。

Menu

• それぞれのボタンが押された際の動作はTarget-Actionで設定可。

• システムで用意されたアイコンもあるが、自分で画像を指定することも可能。

• ボタンサイズや位置の変更は不可。

Menu

画面レイアウト• それぞれのUIパーツの幅と高さは変更可能

• Relative to Container （親アイテムに対する比率）

• Size to fit Content （親アイテムをFillする）

• Fixed Width （ピクセル指定）

画面レイアウト

• それぞれのUIパーツの位置をCGPointで指定することはできません。

• 左上から順番に並べられます。

Watch Appの画面遷移• Modal

• Single Modal

• Paged Modal

• Hierarchical (Navigation)

• Page-based

Modal View

• 左上にタイトルが表示され、自動的に「Close」機能を持つボタンとなる。

• １枚表示のControllerの表示または複数枚のControllerの表示が可能。

Single Mordal

• 一時的なタスク処理

• 下から上へのアニメーション

Paged Mordal

• 一時的なタスク処理

• 下から上へのアニメーション

• 複数ページはSwipeで遷移

Hierarchical• iOSのNavitaion Controller

• 子Controllerを一つ指定し、Pushする

Hierarchical• 左上にタイトルが表示され、自動的に「Close」機能を持つボタンとなる。

Page-based• iOSのUIPageViewController

• ただし、ページ数やページインスタンスは生成時に決定。動的な変更には対応しない

Page-based• 左右Swipeでページ移動

HierarchicalとPage-based

• HierarchicalとPage-based のページ遷移の混在は禁止されています。

Controller間のデータ受け渡し• 今までのiOSアプリではObjectを指定して行っていました。

UIViewController* myViewController = [[UIViewController alloc] init]; myViewController.friends = friendsarray;

データを 渡したい

Controller間のデータ受け渡し• ところが、WKInterfaceControllerではその方法が使えません。

• 例えば pushで新しいWKInterfaceControllerを生成する場合、pushはStoryboardのidentifierを指定して行います。 [self pushControllerWithName:@"placeController" context:@"Shibuya"];

Controller間のデータ受け渡し• 一応 alloc + initでオブジェクトを生成することも可能ですが、これをpushする方法がありません。

• →オブジェクトを指定してメッセージが送れない。

LocalController* mycontroller = [[LocalController alloc] initWithContext:@"Shibuya"];

Controller間のデータ受け渡し• そこで、context引数に、オブジェクトを渡すことでデータの受け渡しをおこなう。

• NSString、NSArray、NSDictionaryなど任意のクラスが指定可能

[self pushControllerWithName:@"placeController" context:@"Shibuya"];

Controller間のデータ受け渡し• 受け側のWKInterfaceControllerのinitWithContextで引数の処理を行います

- (instancetype)initWithContext:(id)context { self = [super initWithContext:context]; if (self) { 　 NSDictionary* myDict = context; NSString* name = [myDict valueForKey:@"name"]; [self.centerLabel setText:[NSString stringWithFormat:@"Name:%@", name]]; } return self; }

生成• Modalの場合も同様です。

• Single Modal

• Paged Modal

[self presentControllerWithName:@"peopleController" context:@"Alice"];

NSArray *controllerPersons = @[@"peopleController", @"companyController", @"placeController"]; NSArray* contexts = @[ @{@"name":@"Alice"}, @{@"tel":@"03-1234-5678"}, @"Osaka"]; [self presentControllerWithNames:controllerNames contexts:contexts];

WatchKitのこれから

• WatchKitは、制限も、がっかりポイントも多い、まだまだ未成熟なフレームワークです。

• 積極的にApple への Feature Requestをしましょう！