SlideShare a Scribd company logo
はじめての 
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」 
機能を持つボタンとなる。 
• 1枚表示の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引数に、オブジェクトを渡すこ 
とでデータの受け渡しをおこなう。 
[self pushControllerWithName:@"placeController" context:@"Shibuya"]; 
• NSString、NSArray、NSDictionaryなど任意の 
クラスが指定可能
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 
[self presentControllerWithName:@"peopleController" context:@"Alice"]; 
• Paged Modal 
NSArray *controllerPersons = @[@"peopleController", 
@"companyController", 
@"placeController"]; 
NSArray* contexts = @[ @{@"name":@"Alice"}, 
@{@"tel":@"03-1234-5678"}, 
@"Osaka"]; 
[self presentControllerWithNames:controllerNames contexts:contexts];
WatchKitのこれから 
• WatchKitは、制限も、がっかりポイントも多 
い、まだまだ未成熟なフレームワークです。 
• 積極的にApple への Feature Requestをしましょ 
う!

More Related Content

KEY
Beginning jQuery Mobile
KEY
Really Rapid Admin Application Development
KEY
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
PDF
Wulin kungfu final
KEY
a-blog cms 勉強会 NAGOYA 20110718
KEY
New Perspectives on Performance
KEY
AJAX & jQuery - City University WAD Module
PDF
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 05)
Beginning jQuery Mobile
Really Rapid Admin Application Development
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
Wulin kungfu final
a-blog cms 勉強会 NAGOYA 20110718
New Perspectives on Performance
AJAX & jQuery - City University WAD Module
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 05)

What's hot (14)

PDF
Developing an Accessible Web
PDF
jQuery UI & Mobile - The Great Merger
KEY
Natural Language UI Testing using Behavior Driven Development with Pavlov and...
PPTX
phonegap with angular js for freshers
PDF
jQuery Keynote - Fall 2010
PDF
Ionic: The Web SDK for Develop Mobile Apps.
PDF
Beyond DOM Manipulations: Building Stateful Modules with Events and Promises
PDF
チームを加速させるRetty式開発術
PDF
Introduction to SPA with AngularJS
PDF
Into the Box 2018 Building a PWA
PDF
Smooth Animations for Web & Hybrid
PDF
jQuery Chicago 2014 - Next-generation JavaScript Testing
PDF
Ionic Framework: Let's build amazing apps. No Excuses!
PDF
Fake Your Way as a Mobile Developer Rockstar with PhoneGap
Developing an Accessible Web
jQuery UI & Mobile - The Great Merger
Natural Language UI Testing using Behavior Driven Development with Pavlov and...
phonegap with angular js for freshers
jQuery Keynote - Fall 2010
Ionic: The Web SDK for Develop Mobile Apps.
Beyond DOM Manipulations: Building Stateful Modules with Events and Promises
チームを加速させるRetty式開発術
Introduction to SPA with AngularJS
Into the Box 2018 Building a PWA
Smooth Animations for Web & Hybrid
jQuery Chicago 2014 - Next-generation JavaScript Testing
Ionic Framework: Let's build amazing apps. No Excuses!
Fake Your Way as a Mobile Developer Rockstar with PhoneGap
Ad

Similar to はじめてのWKInterfaceController (20)

PDF
Building mobile apps with PhoneGap and Backbone
PDF
Session 16 - Designing universal interface which used for iPad and iPhone
PPTX
tvOS: An Introduction for iOS Developers
PPTX
SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...
PPTX
SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions
PPTX
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
PPTX
Win8 development lessons learned jayway
PPTX
JavaScript for ASP.NET programmers (webcast) upload
PPTX
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions
PPTX
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
PDF
WKWebView in Production
PDF
Session 8 - Xcode 5 and interface builder for iOS 7 application
PDF
Better Page Object Handling with Loadable Component Pattern
PDF
jQuery Mobile Introduction
PDF
I pad uicatalog_lesson02
PDF
jQuery mobile UX
PDF
Titanium Alloy Tutorial
PDF
Accessibility - A feature you can build
PDF
Beyond Fluffy Bunny. How I leveraged WebObjects in my lean startup.
KEY
Developing Mobile HTML5 Apps with Grails
Building mobile apps with PhoneGap and Backbone
Session 16 - Designing universal interface which used for iPad and iPhone
tvOS: An Introduction for iOS Developers
SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...
SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
Win8 development lessons learned jayway
JavaScript for ASP.NET programmers (webcast) upload
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
WKWebView in Production
Session 8 - Xcode 5 and interface builder for iOS 7 application
Better Page Object Handling with Loadable Component Pattern
jQuery Mobile Introduction
I pad uicatalog_lesson02
jQuery mobile UX
Titanium Alloy Tutorial
Accessibility - A feature you can build
Beyond Fluffy Bunny. How I leveraged WebObjects in my lean startup.
Developing Mobile HTML5 Apps with Grails
Ad

More from toyship (15)

PDF
Time for Xcode Behavior
PDF
Notifications in iOS10
PDF
Universal Link
PDF
Can we live in a pure Swift world?
PDF
Swift Protocol and Selector
PDF
What's new Swift3
PDF
Xcode7時代のアプリ配布
PDF
My first tvOS
PDF
3D touch for iOS
PDF
Contents blocker on iOS9
PDF
Embedded framework and so on
PDF
App extension for iOS
PDF
サーバーからiOSアプリを変更する
PDF
Xcode bot
PDF
AVSpeechSynthesizerとロケール
Time for Xcode Behavior
Notifications in iOS10
Universal Link
Can we live in a pure Swift world?
Swift Protocol and Selector
What's new Swift3
Xcode7時代のアプリ配布
My first tvOS
3D touch for iOS
Contents blocker on iOS9
Embedded framework and so on
App extension for iOS
サーバーからiOSアプリを変更する
Xcode bot
AVSpeechSynthesizerとロケール

Recently uploaded (20)

PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PPT
Teaching material agriculture food technology
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
PPTX
A Presentation on Artificial Intelligence
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
cuic standard and advanced reporting.pdf
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Electronic commerce courselecture one. Pdf
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Empathic Computing: Creating Shared Understanding
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Encapsulation theory and applications.pdf
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Understanding_Digital_Forensics_Presentation.pptx
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
Teaching material agriculture food technology
Agricultural_Statistics_at_a_Glance_2022_0.pdf
CIFDAQ's Market Insight: SEC Turns Pro Crypto
A Presentation on Artificial Intelligence
Spectral efficient network and resource selection model in 5G networks
cuic standard and advanced reporting.pdf
20250228 LYD VKU AI Blended-Learning.pptx
MYSQL Presentation for SQL database connectivity
Electronic commerce courselecture one. Pdf
Digital-Transformation-Roadmap-for-Companies.pptx
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Empathic Computing: Creating Shared Understanding
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Encapsulation theory and applications.pdf

はじめてのWKInterfaceController