すでにプロジェクトにWatch Appのターゲットにある場合はこの手順でGlanceを作成していきます。

Glance用のClassを作成します。

Watch Appのグループを右クリック> New File… をクリックします。

Cococa Touch Classを選択してNext 

Class: 適当なクラス名（GlanceController）、Subclass of:WKInterfaceControllerにしてNext

GlanceControllerがWatchKit Extensionに作成されます。

Storyboard上にGlance Interface Controllerが存在していない状態です。

StoryboardにGlance Interface Controllerを追加します。

Storyboard上のGlance Interface ControllerとGlanceControllerクラスのファイルを紐付け

Custom Class の ClassのプルダウンからGlanceControllerを選択します。

Glance起動用のSchemeを作成
簡単にGlanceを起動できるようにするために、Schemeを作成します。

Product > Scheme > Edit Scheme… >を選択します。

Duplicate SchemeボタンでSchemeを複製

“Copy of プロジェクト名"が表示されています。

“Glanceプロジェクト名"に変更します。

Runを選択しWatch Interface を変更します。

Watch Interface のプルダウンからGlance を選択しCloseします。

これでGlanceの設定は完了しました。

この状態でシミレーションでビルド実行し確認します。
Glance（グランス）が真っ黒な状態ですがクリックするとWatch Appが表示されます。

これでGlance（グランス）が設定されて動作しているのが確認出来ました。

それでは、Glance（グランス）に文字と画像が表示されるように設定していきます。

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（下部）上に設定する複数の選択できるレイアウトが表示されます。

今回は、１つの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に切り替え
の２つのみのようです。

GitHub WatchKitGlanceObj

▫️参考にしたページ

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

【WatchKit】Glanceの情報によってWKInterfaceをかえる

Apple Watchで初めて登場した新UI「Glance」について

WatchKit：視線の最初の概要 ナターシャロボット

目　次