生涯未熟

生涯未熟

プログラミングをちょこちょこと。

WatchKitを色々弄ってみた

AppleWatchのSDKであるWatchKitがついに公開されましたね!

という訳で今回はそのWatchKitを色々いじってみたいと思います。

ちなみにObjective-CではなくSwiftでやってます。



前準備

まずは、Xcode6.2-betaをインストールしましょう。
以下からダウンロードできます。
https://developer.apple.com/xcode/downloads/

AppleWatchシミュレータ起動まで

Xcodeを立ち上げ、iPhoneアプリを作成。

f:id:syossan:20141124004237p:plain

f:id:syossan:20141124004325p:plain

その後、File → New → Target → Watch Appを選択。

選択後、下記画像のようにWatch Appを選択する。

f:id:syossan:20141124004755p:plain

次に、iPhoneシミュレータを起動し、下記のApple Watchを選択。

f:id:syossan:20141124004906p:plain

Xcodeに戻り、Apple WatchをRunすれば一先ずはApple Watchのシミュレータの起動まで完了。

Apple Watchのテストアプリを作ってみる

さて、それではここからApple Watchのアプリを作ってみましょう。
まだまだ分からないことがたっぷりなので、とりあえずサンプルコードが色々と落ちてる
テーブルを表示し、ラベルをタップすると画面遷移するアプリを作ってみます。

どんなことするの?

WatchKit Extensionの中にswiftファイルをいくつか作成し、storyboardをいじるだけです。
最終的なファイル構成は以下のようになります。

f:id:syossan:20141124011901p:plain


では、ひとつずつやっていきましょう!

InterfaceControllerをいじる!

まずは、InterfaceController.swiftとstoryboardをいじっていきましょう。

storyboardにはデフォルトでInterfaceControllerがあると思いますが、そこにTableとTableの中にLabelを追加します。

f:id:syossan:20141124012548p:plain

f:id:syossan:20141124012553p:plain

追加したら以下の様な構成になります。

f:id:syossan:20141124012726p:plain


次に、InterfaceController.swiftをいじります。


gist986c4d193494cb6a0fa0


@IBOutletの部分はstoryboardからCtr+ドラッグ&ドロップで追加するのが吉っぽいです。

Tableのクラスを作る!

次に、Tableのクラスを作成します。

StringTableRowController.swift

gist74e8e624176dc1f42867


こちらもstoryboardから@IBOutletを追加しましょー。

で、このControllerを作成した後にstoryboardのTableをいじります。

Table Row ControllerとなっているところのCustom Classを変更します。

f:id:syossan:20141124020515p:plain

画面遷移先の画面を作る!

最後に画面遷移先の画面を作りましょう。

まずは、storyboardにDetailControllerを作成します。
追加の方法は以下の画面のInterfaceControllerをstoryboard上にドラッグ&ドロップするだけです。

f:id:syossan:20141124020835p:plain

DetailControllerが設置出来たら、中にLabelを一つ追加しましょう。

f:id:syossan:20141124021224p:plain


次に、DetailController.swiftを作成します。


gistf8b9d445eb5352d13dda


作成後、storyboardに戻りDetailControllerのCustom Classをいじります。

f:id:syossan:20141124021340p:plain

また、今回はIdentiferの項目を変更します。
これをしておかないと、pushControllerWithNameが反応せず画面遷移してくれないので注意です。

f:id:syossan:20141124021423p:plain


さて!これで完成です!
あとは実行してみて正常に動くか確認してみましょう。

f:id:syossan:20141124021635p:plain

試しにItem1をタップしてみましょう。

f:id:syossan:20141124021707p:plain


こう表示されたらOKです!

後記

現在WatchKitの情報が少なく、参考になるコードが色々落ちててもここまで動かすのに苦労しました・・・
DetailControllerのIdentiferの変更に気付くのにだいぶ時間がかかりましたが、コードとstoryboardが密接な関係にあるんだなーと気付くことが出来ました。

また、何か出来ましたら記事書いていきます!

神参考URL


1分でつくれるAppleWatch対応アプリ & WatchKit 全API解説 - Qiita


Xcode - Apple Watchのアプリを開発してみた - Qiita


WatchKit: Let’s Create a Table