カテゴリー別アーカイブ: iOS

Apple WatchのSDK「Watch Kit」が発表されたので要点をまとめてみました

WatchKit

こんにちは。

ようやくApple Watch用のSDK、WatchKitが発表されましたね。
Apple Watchで動作するアプリケーションは、WatchKit App(WatchKitアプリ)と呼ばれるようです。

私たちのアプリ「PROPELa」も、Apple Watch発売にあわせて動作するようにしたいと思っていますので、AppleのデベロッパーサイトでNDA無しに公開されている動画を元に、要点を日本語でまとめてみたいと思います。正確な情報はdeveloper.apple.comから英語で手に入りますので、この記事に興味を持った方はそちらを参照して下さい。

それでは要点に入ります。

Apple Watchでは大きく分けて、3種類の情報の見せ方がある

  • WatchKitアプリの通常起動(Apple Watchホームスクリーンからマニュアルで起動)
  • ちら見(Glance)
  • お知らせ(Notification)

WatchKitアプリではIn-Depth UXを使う

WatchKit App

  • ドリルダウンのような階層型とスワイプによるページングの2種類のうち、どちらか一方を選んで使います。

「ちら見」機能(Glances)は、見るだけが基本

Glance

  • オプションで「ちら見(Glance)」を使うこともできます。
  • ここでは、小さくまとめた、明示的情報を見せます。
  • テンプレートベースのUIになります。
  • リードオンリーで、ここでタップするとWatchアプリを起動します。

お知らせ(Notifications)にはShort-LookとLong-Look、2つの状態がある

Notifications

  • カスタムUIを備えた、お知らせ(Notification)も作成できます。
  • LocalもしくはRemoteの情報を表示します。
  • トランジションやアクションボタンを設定できます。
  • 静的な画面が必ず必要です。
  • シミュレータでJSONを使うことで挙動チェックが可能です。

WatchKit Appは、それ単独では動かない

Communication between a Watch app and WatchKit extension

  • WatchKitアプリはiPhoneアプリと強調して動作します。
  • WatchKitアプリ単体にはUI部分だけを含み、プログラムはホストとなるiOSアプリが持ちます。
  • UIの状態更新はiPhone側から行うことになります。

ホストiOSアプリをWatchKit Extensionで拡張する

  • 各スクリーン毎にUIに紐付けられたコントローラーが必要です。
  • UIはストーリーボードで作成する。UI要素の管理はoutlet経由でコードから行います。
  • ユーザーのアクションそれぞれがUI要素と対応するようにtarget-actionデザインパターンを使います。

WatchKit Frameworkについて

  • UI要素は「ラベル」「ボタン」「イメージ」「スイッチ」「スライダー」の他に、特殊なものとして、視覚的に要素を区切る「セパレータ」およびラベルの特殊型で動的に更新される「日付とタイマー」があります。
  • iOSとは違い、WatchKitではオブジェクトは左上から右下へ向かって自動的に配置されます。
  • レイアウトのため、UI要素を垂直もしくは水平方向にグループ化できます。グループはネストすることもできます。
  • マージンやスペースの調整ができます。
  • 背景色や背景画像の変更が可能です。
  • ダイナミックコンテンツのためにテーブルを使えます。テーブルの行はテキストや画像などの複数の型の表示をサポートしています。
  • 地図はインタラクティブではないスナップショットですが、動的に設定されます。
  • 地図にはピンや画像など5つまでの注が付けられます。
  • 地図をタップすると「マップ」アプリが起動します。
  • アプリ画面の長押しでコンテキストメニューを表示し、規定サイズのボタンを4つまで出すことが出来ます。

どうでしょうか。画面サイズが小さいこともあり、iOSアプリと違って、UI、アプリケーションロジックともに、「制約を上手く使っていく」という開発プロセスになりそうです。
なお、2015年、つまり来年の末にはApple Watchネイティブの開発も出来るようになるとのことですので、その頃にはまた違ったUIもあり得るようになるのかもしれません。

この記事を共有するShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedInShare on Tumblr