Developer's Blog

Apple Watch 向けアプリ開発で押さえておきたいポイント

Fenrir Advent Calendar 2014

こんにちは、共同開発部エンジニアの宇佐見です。Fenrir Advent Calendar 2014 の19日目の記事です。

今年取り組んだことはいろいろありましたが、改めて「2014年にグッときたコレ」をひとつ挙げるならば、やはり Apple Watch です。

今年 9 月に、iPhone 6 / 6 Plus とともに、Apple Watch が発表されました。さらに 11 月に、Apple Watch 向けアプリを開発するプラットフォーム WatchKit が登場しました。2015 年の早い時期に Apple Watch が発売される予定になっています。

フェンリルではもちろん、Apple Watch 向けアプリ開発の取り組みを進めています。この記事では、アプリ開発を考えるにあたって最初に押さえておきたいポイントを、エンジニア視点で紹介します。

WatchKit の情報源

WatchKit の登場とともに、ドキュメントなどの情報源も公開されています。

特に押さえておかなければならないのは、以下の 2 つのドキュメントです。

  • Apple Watch Human Interface Guidelines
  • Apple Watch Programming Guide

以下では、これらのドキュメントについて述べます。なお、WatchKit はまだベータ版であるため、これらのドキュメントについても変更がありうる、という点にはご留意ください(実際に、現在の最新版は公開当初から変更が入っています)。

Apple Watch Human Interface Guidelines

iOS アプリには iOS Human Interface Guidelines が、OS X アプリには OS X Human Interface Guidelines がありました。それらの Apple Watch 版がこの「Apple Watch Human Interface Guidelines」です。

これは、Apple Watch 向けアプリの開発に関わる人はみんな読んでおくべきです。特に、企画やデザインの人は読みましょう。

UI Design Basics

このセクションは、Apple Watch の基本的な情報や考え方を述べています。

いくつかポイントを挙げます。

  • WatchKit App
    • WatchKit App は単体で動作するアプリではありません。iPhone とペアになって動作します。
    • App 画面のナビゲーションは、Hierarchical と Page-based のどちらかです。組み合わせて使うことはできません。
  • Glance
    • App 画面とは別に Glance という画面を持つことができます。
    • Glance にはインタラクションはなく、タップすると WatchKit App 本体が起動します。
  • 通知
    • ローカル通知やリモート通知を受け取ることができます。通知の画面は、Short Look と Long Look の 2 段階に分かれています。
    • 通知画面(Short Look、Long Look)には、ボタンを置いてなんらかのアクションを実行することが可能です。

また、画面のレイアウトを細かく指定することはできず、一定のルールに従う必要があります。文字サイズも、フォントサイズ指定でなく Dynamic Type を使うことが推奨されています。

UI Elements

このセクションは、Watch App で使用可能な UI パーツを述べています。

  • ラベル
  • 画像
  • グループ(レイアウト用)
  • テーブル
  • ボタン
  • スイッチ
  • スライダー
  • 地図
  • 日付・時間表示
  • メニュー画面

これ以外の独自パーツを使うことはできません。

Icon and Image Design

このセクションは、アプリアイコンのサイズやデザイン指針を述べています。また、メニュー画面のアイコンについても述べられています。

Apple Watch Programming Guide

「Apple Watch Programming Guide」は Apple Watch 向けアプリのプログラマ向けのガイドです。エンジニアの人は、上述の HIG に加えてこれを読みましょう。

Overview

このセクションは、WatchKit App のアーキテクチャや開発のしかたを述べています。いくつかポイントを挙げます。

  • Apple Watch 向けアプリは、iOS アプリの Extension の一種です(WatchKit Extension)。
  • WatchKit Extension のうち、iOS 端末側にコードが、Watch 端末側に Storyboard が配置されます。
  • WatchKit App の動作時には、Watch 端末と iOS 端末が通信します。Watch 端末側にコードはなく、コードの実行は iOS 端末側で行われます。ただし、通信処理は隠蔽されており、コード上で通信処理を記述はしません。
  • WatchKit App のライフサイクルの考え方は、iOS アプリとは異なります。

WatchKit Apps

このセクションは、WatchKit App の具体的なコーディングのしかたを述べています。いくつかポイントを挙げます。

  • Storyboard で UI を作成します。
  • レイアウトはグループを活用して行います(AutoLayout とは異なります)。
  • クラスの設計・構成が iOS とは異なります。WKInterfaceController クラスがコントローラ、WKInterfaceObject のサブクラスが UI パーツです。
  • 画像データは iOS 端末から Watch 端末に送ることも可能です。必要に応じてキャッシュを活用します。

Glances

このセクションは、Glance のコーディングのしかたを述べています。

Glance も Storyboard で作成します。Storyboard 上に App 用のエントリポイントとは別に Glance 用のエントリポイントがあります。

Notifications

このセクションは、通知画面(Short Look、Long Look)のコーディングのしかたを述べています。

通知画面もやはり Storyboard で作成します。Storyboard 上に Notification category のエントリポイントがあります。通知画面は UI やアクションをカスタマイズすることができます。

Apple Watch への期待

WatchKit App は、単体で動作できなかったり、UI やコーディングに様々な制約があったり、できることが限られていることが分かります。Apple Watch に対していろいろな夢を膨らませるのはいいのですが、勝手に妄想しすぎて、実物が登場してから「期待と違う」と言ってしまうのは避けたいですね。

こう書くと、私が Apple Watch に対して否定的なことを言っているように思われるかもしれません。しかし、そうではありません。

私は Apple Watch の発売をずっと楽しみにしています。

iPhone 6 / 6 Plus が発売され、私は iPhone 6 を購入して使っています。iPhone 6 は良いものだとは思っていますが、大きな不満点がひとつあります。やはり、端末が大きくて持ちづらいのです。

確かに、画面が大きくなったのはいいことかもしれません。しかし、個人的な想いとしては、端末が大きすぎるというデメリットが、画面が大きいというメリットよりもずっと大きいです。持ちづらいせいで、iPhone 6 をポケットから取り出す頻度は、iPhone 5s を使っていたころに比べて明らかに低くなりました。

しかしながら、それをカバーしてくれるのが Apple Watch です。Apple Watch があれば、ちょっと時間を確認したり通知を確認したり、といったことのためにわざわざ iPhone 6 をポケットから取り出す必要はなくなるわけです。端末が持ちづらくても、そもそも頻繁に出し入れする必要がないなら許せる。

つまり、iPhone 6 は Apple Watch と組み合わせて使ってこそ真の姿。今の iPhone 6 は未完成形の端末であって、iPhone 6 + Apple Watch が完成形なのです。

こうして考えると、逆に、Apple Watch が様々なことを単独で行う端末である必要はありません。iPhone あっての Apple Watch でいい。iPhone を補助するための便利な外部デバイスこそ、欲しかったものなのです。

そういうわけで、Apple Watch が発売されたら即買います。あ、もちろん、WatchKit App 開発にも取り組みたいと思います。

フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

Copyright © 2018 Fenrir Inc. All rights reserved.