2015年

4月

28日

Apple Watch Glance(グランス)の作成

Apple Watch Glanceの作成

Glance(グランス):
チラッと見る機能と言われていますが、私なりの解釈ではサブメニューページとしての機能だとおもっています。アプリのトップメニュー(小さなアイコン固まり)から上にスワイプするとGlance(グランス)が表示されます。アプリ登録されているGlance(グランス)をタップするとアプリ画面が表示されます。サブメニューと言った方が理解しやすと思いますね。

今回紹介するのがこれです。


Apple Watchアプリが持っている重要な情報をチラッと見せるための機能です。
Apple Watchアプリを作るにあたり実装は必須ではなく、必要なら実装すれば良い機能です。

Xcode 6.2 以上
https://developer.apple.com/xcode/downloads/
6.2からAppleWatch開発環境(watchkit)が入っています。

iOS8.2以上 (iPhone)
8.2にバージョンアップするとアプリ「Apple Watch」が追加されるのですぐわかります。

iPhoneアプリケーション プロジェクトを生成
xcode起動後、「Create a new Xcode project」を選択します。
次にiOS -> Application -> Single View Applicationを選択します。

 

プロダクト名をWatchKitGlanceObjとします。

Watch Kit Appを追加
Watch Kitを追加します。File -> New -> Target を選択します。


AppleWatch ->WatchKit Appを選択します。


Include Glance、Include Notification Scene は、チェックを入れます。

Finishiをクリックします。

 

Activateをクリックします。


Interface.storyboardにInterface、Glance(ぱっと見る)、Notification(通知)が配置されています。

Interface、Notification(通知)という機能がありますが今回は使用しません。



Interface.storyboard上のGlance(ぱっと見る)について見ていきます。

Glance用の画面の方には、二つのGroupが予め設定されており、このGroup内に収まるようにUIを配置していきます。Groupeよりはみ出して配置をすることはできません。

Glance Interface Controller には、Upper(上部)とLower(下部)と表記されています。

 

Glance Interface Controller Upper(上部) のグループをクリックするとUpper(上部)上に設定する複数の選択できるレイアウトが表示されます。

今回は、LabelとGroup付きのレイアウトを選択します。

 

Upper(上部)が選択したレイアウトに変更されます。


Glance Interface Controller Lower(下部) のグループをクリックします。Upper(上部)と同じようにLower(下部)上に設定する複数の選択できるレイアウトが表示されます。

今回は、1つのGroupレイアウトを選択します。


Glance Interface Controller Upper(上部)Lower(下部) のレイアウトが完成しました。

Upper(上部)には、文字とLower(下部)には画像を設定していきます。


その前にGlance Interface Controller Lower(下部)に設定する画像を用意します。

WatchKit Appの Images.xcassetsにLower(下部)に貼り付ける画像をドラックします。

Apple Watch内に保持されて表示されると思います。


※注意

WatchKit AppのImages.xcassetsでないと画像は表示されませんので注意してください。


Upper(上部)の文字の設定を行います。

Label Text に「花火一覧」を入力します。


Labelの下のGroupにはLabelを配置します。


Groupに配置したLabelに「Watch notepad」と入力します。


Glance Interface Controller Lower(下部)Groupの設定を行います。

 Lower(下部)Groupには画像を貼り付けますのでBackgroundから保存している花火の画像(WatchKit AppのImages.xcassets)「img01」をプルダウン選択します。ModeをプルダウンメニューからAspect Fitを選択します。

Aspect Fit:画像のaspect比を維持し、ちょうどはいるようにします。


これで、Glance(グランス)の設定は完了です。


それでは、実際にシミレーションで確認してみましょう。

Glance - WatchKitGlanceObj WatchKit App を選択しiPhoneを選択しビルド実行します。


ビルド実行したシミレーションです。

チラッと見る機能 Glance(グランス)がこのように表示されます。

※注意
Glanceの画面ではユーザーは操作をすることは出来ません。

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

 

GitHub WatchKitGlanceObj

  

目 次