2014/11/25

AppleWatch Tutorial

AppleWatch
https://www.apple.com/jp/watch/features/

ついに最近、デベロッパー向けにwatchkitが発表されました。
AppleWatchアプリのチュートリアルで、
今回は絵文字を拡大表示させるサンプルをやります。




以下、簡素化した20のステップ。
ソースはこちらです。
https://gist.github.com/manchan/1e9cfae322f87583a2f7

  1. 新規プロジェクトのシングルページアプリケーションで作成。言語はswift
  2. プロジェクトパネル、General > Targets > Add Targetにより、iOS > Apple Watch > Watch Appを選択
  3. Watchkit extensionとWatch appが追加される
  4. watchのデフォルトの画面をシミュレーターで確認する際は、「~Watch App」にターゲットを変更。デバイスはなんでもよい。
  5. ビルド実行でシミュレータが立ち上がるが、無視。
  6. シミュレータメニューのHardware > External Displays > Apple Watch - 38mm またはApple Watch - 42mmを選択し、再度ビルド実行、watch画面が立ち上がり確認可能。
  7. はじめにInterface.storyboardのInterface Controller Sceneにて, tableを追加、table内にlabelを追加
  8. tableをInterfaceController.swiftにnameをtableとしてoutlet接続
  9. 新規ファイルを追加より、EmojiRow.swiftを追加
  10. Interface.storyboard, Interface Controller SceneにてtableのクラスをEmojiRowに設定
  11. table内のlabelをEmojiRow.swiftにemojiRowLabelとしてoutlet接続
  12. ここまででtableのラベルの内容を定義してforループを回せば同じ内容が表示される。
    詳細はInterfaceController.swiftを確認
  13. tableの要素をひとつ押した際に、詳細の画面に遷移させたいので、
    新規ファイル,ZoomEmojiController.swiftを追加する。
  14. Storyboardにて、新規画面の追加をする、右サイドパネルよりInterface Controllerを追加する
  15. ClassをZoomEmojiControllerとし、ModuleはEmojiWatch_WatchKit_Extensionとする
  16. IdentifierをZoomEmojiControllerとする, これによりtableのひとつの要素を押した際に遷移するcontrollerの識別が可能となる。
  17. labelをふたつ追加し、それぞれ、zoomEmojiLabel、definitionLabelをZoomEmojiController.swiftにoutlet接続する
  18. tableの一要素押下の処理をdidSelectRowAtIndexより指定、
    詳細はInterfaceController.swiftを確認
  19. ZoomEmojiController.swiftのコンストラクターメソッド内にて、
    contextを受け取り、fontサイズなどを指定後、それぞれのlabelに代入する。
  20. ビルドして実行、シミュレーターにて、配列に定義した絵文字が拡大表示、テキストが表示されていればOK

Finish!

Apple Watch Tutorial - Learn How to Make a Simple Apple Watch App
http://vimeo.com/112249657

上記動画を参考にしています。

以下ソースです。






次回はglanceやnotificationのサンプルを作りたいと思います。
AppleWatchのお仕事お待ちしております!