エンジニア

WatchKitでGlanceを使ったアプリを作ってみよう

投稿日:2015年4月15日 更新日:

エンジニアブログ担当の近藤です。
4月24日についに発売されるApple Watchの予約が先日始まりました。
Apple信者のみなさんはもちろん予約しましたよね!?

今回はApple Watchネタの第3弾。
Glanceを使ったアプリを作ってみましょう。

Apple Watchアプリの3大機能

Apple Watchアプリの機能は多く分けて3つの機能があります。

WatchKit App:
Apple Watchアプリのメインの機能です。
WatchKitの各種機能を駆使してアプリを作っていきます。
前回までの記事で紹介した内容はWatchKit Appです。

Notification:
アプリが受け取った通知をApple Watchで受け取ることができます。
通知を受け取った時に表示する画面やどのような振る舞いをするかを作り込んでいきます。

Glance:
チラッと見る機能。今回紹介するのがこれです。
Apple Watchアプリが持っている重要な情報をチラッと見せるための機能です。
Apple Watchアプリを作るにあたり実装は必須ではなく、必要なら実装すれば良い機能です。
ググってみるとiOSの通知センターのような機能と説明されているものを見かけます。
↓の画像のようにTwitterアプリのGlanceの場合は最近のツイートが表示されていたりするようです。

Glanceについて

glances
・Glanceの画面内ではユーザーが操作できることはなく、タップすることで対応したWatch Appに遷移します
・GlanceはApple Watchアプリごとに1個ずつ実装することが可能です。
・1画面に収まっている必要があります。
・スワイプすることで、他のWatch AppのGlanceに遷移します。
など、実装する前にいくつか制約や知っておくべきことがありあます。

例によって英語ですが、詳細はWatch Kitの「Apple Watch Human Interface Guidelines」を参照してください。

実装

前回の記事を参考にプロジェクトを作ってください。
Glanceに対応したアプリを作る場合、Apple WatchのTargetを追加するときに「Include Glance Scene」にチェックを入れておきましょう。
これでGlanceに対応したstoryboardが作成されます。

スクリーンショット 2015-04-14 2.01.54

「Interface.storyboard」を開くと、Watch App用の画面とGlance用の画面が表示されています。
Glance用の画面の方には、二つのGroupが予め設定されており、このGroup内に収まるようにUIを配置していきます。
Groupeよりはみ出して配置をすることはできません。
スクリーンショット 2015-04-14 2.07.33

Watch AppとGlanceの画面の違いがわかりやすいように、適当にLabelや背景を配置してみましょう。
スクリーンショット 2015-04-14 2.10.24

※注意
Glanceの画面ではユーザーは操作をすることができないと書きましたが、GlanceのstoryboardにButtonやSwitchを配置してビルドをすると、ビルドエラーとなります。
Glanceで許可される操作は
・Glance画面でタップ→WatchAppへ遷移
・Glance画面で横にスワイプ→別のアプリのGlanceに切り替え
の2つのみのようです。

実行

スクリーンショット 2015-04-14 2.11.38
↑のように、実行するときはGlanceのTargetを選択して実行します。

Simulatorが立ち上がると、Glanceの画面を表示した状態で立ち上がってきます。
Glanceの画面をタップすると、WatchAppが起動し画面に表示されます。

iOS Simulator Screen Shot - Apple Watch 2015.04.14 2.20.30 → iOS Simulator Screen Shot - Apple Watch 2015.04.14 2.20.39

今回はGlanceの機能を簡単に紹介してみました。
次回このブログを書くときにはおそらくApple Watchが手元にあるはずですので、NotificationでiOSアプリからの通知を受け取ったりする部分の動作も実際に紹介できるかもしれないですね。
発売が今からとっても楽しみです!

採用情報

ワンダープラネットでは、一緒に働く仲間を幅広い職種で募集しております。

-エンジニア
-, , ,

© WonderPlanet Inc.