WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

WatchKitのstoryboardでApple Watchの画面を作ってみた

エンジニアブログ担当の近藤です。

前回の「HelloWorld編」に引き続き、今回はAppleWatchの画面を作ってみましょう。
いくつかのUI部品の簡単な使い方を紹介していこうと思います。

プロジェクト作成

前回の記事を参考にXcode 6.2 betaでプロジェクトを作成してください。
Watch KitでApple Watchアプリを作ってみる(Hello World編)

Apple Watchアプリで使えるUI

interface.storyboardを開くとApple Watchアプリの画面を編集する画面が開きます。
画面右側のObject LibraryからUIをドラッグ&ドロップで配置していくのは前回紹介しましたが、使えるUIは下記のようにたくさん用意されています。
UIのオブジェクトはWKInterfaceObjectというクラスで管理されています。
UIKitで言うところのUIViewクラスのようなものです。
それぞれが下記のようにWKInterfaceObjectのサブクラスで構成されています。
またWatchKitのUIオブジェクトはUIKitのUIオブジェクトと同じようにIBActionでメソッドとひも付けたり、IBOutletで変数にひも付けをする事ができます。
各クラスのメソッドやプロパティ等の詳細はリファレンスを参照してください。

スクリーンショット 2015-02-18 20.33.43

UI クラス名
Table(テーブル) WKInterfaceTable
Image(画像) WKInterfaceImage
Separater(区切り線) WKInterfaceSeparator
Button(ボタン) WKInterfaceButton
Switch(スイッチ) WKInterfaceSlider
Slider(スライダー) WKInterfaceSlider
Label(ラベル) WKInterfaceLabel
Date(日時表示ラベル) WKInterfaceDate
Timer(タイマー表示ラベル) WKInterfaceTimer
Map(地図) WKInterfaceMap

画面遷移をやってみる

画面を複数作成して画面遷移をやってみましょう。
Watch Kitでの画面遷移はUIKitと同じようにPushとModalによる遷移です。
Object Libraryの一番上の「Interface Controller」がApple Watchのひとつの画面になります。
UIKitでのViewControllerと思えば良いでしょう。
storyboardにドラッグ&ドロップで配置しましょう。
スクリーンショット 2015-02-18 20.47.21

ボタンを配置してボタンをタップしたら次の画面へ遷移するようにします。
1個目の画面(Main→ が付いてる方)にボタンを配置して、「次の画面へ」など好きなようにボタンの文字を変えましょう。
UIKitでアプリを作っていたときと同じように「Control」ボタンを押しながら次の画面へドラッグします。
すると、画面遷移方法を「push」か「modal」を選ぶ事ができます。
今回は「push」を選びましょう。
スクリーンショット 2015-02-18 20.50.30
これで「次の画面へ」ボタンを押したときに画面遷移します。
早速実行してみましょう

【1個目の画面】
iOS Simulator Screen Shot - Apple Watch 2015.02.18 21.09.22
ボタンをタップすると次の画面へ遷移します。

【2個目の画面】
iOS Simulator Screen Shot - Apple Watch 2015.02.18 21.08.55
2個目の画面ではUIKitのUINavigationControllerのように画面左上に戻るボタンが配置されており、これをたっぷすることで1個目の画面に戻る事ができます。
いろいろUIKitに似ている部分がありますね。

各画面にメニューをつけてみる

ここまではUIKitでも見かけるよくある機能でしたが、つぎはApple Watch独自のUIを触ってみましょう。
InterfaceControllerには↓の画像のような「メニュー」をつける事ができます。
context_menu_2x
メニューは各画面毎に最大4つのボタン(Menu Item)を設置する事ができ、AppleWatchのシミュレータの画面を長押しすると表示されます。
Menu ItemからIBActionでメソッドを呼び出して何らかの操作をする事ができます。
メニューのドキュメントはこちら

では、画面にメニューを配置してみましょう。
スクリーンショット 2015-02-19 19.25.40
画像のように、まずObject Libraryから「Menu」をInterfaceControllerに配置します。
これでメニューをその画面で利用する事ができるようになります。
次にメニューを複数配置するためには「Menu Item」ドラッグ&ドロップして「Menu」の中に追加します。
4つ配置してみましょう。

先ほど配置したMenu Itemを選択し、ボタンのタイプを選択できます。
画像のようにたくさん用意されています。好きなものを選んで、どんな種類のボタンがあるのか試してみてください。
スクリーンショット 2015-02-19 19.39.13

4つともボタンのタイプを選択したら実行してみましょう。
Apple Watchのシミュレータが起動したら画面を長押ししてみましょう。
メニュー画面が開いてメニューのボタンが表示されます。
IBActionを設定していないのでメニューのボタンを押しても何も起きませんが、このメニューのボタンを使っていろんなアプリの操作ができるようになります。
iOS Simulator Screen Shot - Apple Watch 2015.02.19 19.46.17

今回はWatchKitのごく一部の機能使ってをApple Watchの画面の実装してみました。
基本的な画面の作り方はUIKitの時とだいたい同じような感覚で作り込んでいく事ができる様です。
WatchKitをどんどん調べていく事で、Apple Watchがどんな製品なのか見えてくるかもしれないですね。
ティムクックがApple Watchは4月に発売する名言したと言われていますが、日本での発売が今から楽しみですね。