はじめてのwkinterfacecontroller
TRANSCRIPT
![Page 1: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/1.jpg)
はじめてのWKInterfaceController
2014/11/25 @TachibanaKaoru
![Page 2: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/2.jpg)
About Me
• @TachibanaKaoru
• 渋谷のgenesix (Voyage Group) で働くiOSエンジニアです
• Blog : http://www.toyship.org/
![Page 3: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/3.jpg)
前提
• この資料はAppleから一般に公開されている資料に基づいたものです
• 2014/11/25現在の状況に基づいており、今後変更される可能性もあります。
![Page 4: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/4.jpg)
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
![Page 5: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/5.jpg)
WatchKit
• Apple Watchのアプリのためのフレームワーク
• 2014/11/18 発表
![Page 6: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/6.jpg)
Watch App Interface
WatchKit App Notification Glance
![Page 7: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/7.jpg)
WatchKit App
WatchKit App Notification Glance
![Page 8: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/8.jpg)
WatchKit App
• 通常のアプリ画面
• ユーザー入力を受け付け、複数の画面を遷移することが可能。
![Page 9: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/9.jpg)
Notification
WatchKit App Notification Glance
![Page 10: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/10.jpg)
Notification
• オプショナル
• Notificationに対応するための画面。
• iOS8から導入された選択肢付きのNotificationに対応。
![Page 11: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/11.jpg)
Glance
WatchKit App Notification Glance
![Page 12: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/12.jpg)
Glance
• オプショナル
• 文字盤を上に向かってスワイプする
• ユーザー入力は基本的には不可能
![Page 13: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/13.jpg)
WKInterfaceController
• Apple Watchにおいて、一画面の描画・コントロールを司るクラス
• iOSアプリにおけるUIViewController
• このクラスを継承して、それぞれの画面のクラスを作成し、その上にUIパーツを配置します。
![Page 14: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/14.jpg)
UIパーツ• WKInterfaceControllerにのせられる画面パーツは限られており、独自UIなどは使うことができません。
![Page 15: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/15.jpg)
Label & Button• WKInterfaceLabel
• WKInterfaceButton
![Page 16: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/16.jpg)
Slider & Switch• WKInterfaceSlider
• ボタン
• WKInterfaceSwitch
• on/off Switch
![Page 17: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/17.jpg)
Image & Map• WKInterfaceImage
• WKInterfaceMap
• マップを表示するだけ
![Page 18: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/18.jpg)
Table & Timer Label• WKInterfaceTable
• WKInterfaceTimerLabel
![Page 19: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/19.jpg)
その他
• WKInterfaceGroup
• 複数の画面パーツのグルーピングを行う
• WKInterfaceSeparator
• 単なるセパレーター
![Page 20: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/20.jpg)
Menu
• 画面を長押しすると表示されるコンテキストメニュー
• WKInterfaceControllerごとに0~4個の範囲で設定することができる。
![Page 21: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/21.jpg)
Menu
• それぞれのボタンが押された際の動作はTarget-Actionで設定可。
• システムで用意されたアイコンもあるが、自分で画像を指定することも可能。
• ボタンサイズや位置の変更は不可。
![Page 22: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/22.jpg)
Menu
![Page 23: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/23.jpg)
画面レイアウト• それぞれのUIパーツの幅と高さは変更可能
• Relative to Container (親アイテムに対する比率)
• Size to fit Content (親アイテムをFillする)
• Fixed Width (ピクセル指定)
![Page 24: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/24.jpg)
画面レイアウト
• それぞれのUIパーツの位置をCGPointで指定することはできません。
• 左上から順番に並べられます。
![Page 25: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/25.jpg)
Watch Appの画面遷移• Modal
• Single Modal
• Paged Modal
• Hierarchical (Navigation)
• Page-based
![Page 26: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/26.jpg)
Modal View
• 左上にタイトルが表示され、自動的に「Close」機能を持つボタンとなる。
• 1枚表示のControllerの表示または複数枚のControllerの表示が可能。
![Page 27: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/27.jpg)
Single Mordal
• 一時的なタスク処理
• 下から上へのアニメーション
![Page 28: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/28.jpg)
Paged Mordal
• 一時的なタスク処理
• 下から上へのアニメーション
• 複数ページはSwipeで遷移
![Page 29: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/29.jpg)
Hierarchical• iOSのNavitaion Controller
• 子Controllerを一つ指定し、Pushする
![Page 30: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/30.jpg)
Hierarchical• 左上にタイトルが表示され、自動的に「Close」機能を持つボタンとなる。
![Page 31: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/31.jpg)
Page-based• iOSのUIPageViewController
• ただし、ページ数やページインスタンスは生成時に決定。動的な変更には対応しない
![Page 32: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/32.jpg)
Page-based• 左右Swipeでページ移動
![Page 33: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/33.jpg)
HierarchicalとPage-based
• HierarchicalとPage-based のページ遷移の混在は禁止されています。
![Page 34: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/34.jpg)
Controller間のデータ受け渡し• 今までのiOSアプリではObjectを指定して行っていました。
UIViewController* myViewController = [[UIViewController alloc] init]; myViewController.friends = friendsarray;
データを 渡したい
![Page 35: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/35.jpg)
Controller間のデータ受け渡し• ところが、WKInterfaceControllerではその方法が使えません。
• 例えば pushで新しいWKInterfaceControllerを生成する場合、pushはStoryboardのidentifierを指定して行います。 [self pushControllerWithName:@"placeController" context:@"Shibuya"];
![Page 36: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/36.jpg)
Controller間のデータ受け渡し• 一応 alloc + initでオブジェクトを生成することも可能ですが、これをpushする方法がありません。
• →オブジェクトを指定してメッセージが送れない。
LocalController* mycontroller = [[LocalController alloc] initWithContext:@"Shibuya"];
![Page 37: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/37.jpg)
Controller間のデータ受け渡し• そこで、context引数に、オブジェクトを渡すことでデータの受け渡しをおこなう。
• NSString、NSArray、NSDictionaryなど任意のクラスが指定可能
[self pushControllerWithName:@"placeController" context:@"Shibuya"];
![Page 38: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/38.jpg)
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; }
![Page 39: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/39.jpg)
生成• 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];
![Page 40: はじめてのWKInterfaceController](https://reader036.vdocuments.site/reader036/viewer/2022062419/55a183f31a28abe55a8b45ee/html5/thumbnails/40.jpg)
WatchKitのこれから
• WatchKitは、制限も、がっかりポイントも多い、まだまだ未成熟なフレームワークです。
• 積極的にApple への Feature Requestをしましょう!