【開発】Apple Watchの画面に現在の時間を表示する

ここではiPhone/iPad/Apple Watchの開発環境であるXcode 6.3.1 (英語版)を使って画面に現在の時間を表示するまでの手順を説明します。
なお、Xcode起動からプロジェクト作成、WatchKitの追加までの手順は「【開発】Apple Watchの画面に文字を表示する」のページと同じですので省略しています。
まず、Interface.storyboardをクリックします。すると図のような画面になります。ここで、時間を表示するためのUIを配置します。次に右側の領域で矢印で示すボタンをクリックします。表示された領域内に様々なUIが表示されますので、Dateが表示されるまでスクロールします。

DateをMain画面にドラッグ&ドロップします。

すると日付が表示されます。ここで表示される日付はダミー(実際の日付ではない)です。画面に表示したいのは日付ではなく時間なのでカスタマイズする必要があります。図の矢印で示すFormatのポップアップメニューをクリックします。

「Custom」を選択します。

図のように「hh時mm分s秒」と入力します。英語の大文字小文字にも意味がありますので、間違えないように入力します。なお、秒数のみ2桁でなく1桁にしてありますが、常に2桁で表示したい場合は「s秒」でなく「ss秒」のようにsを2つ連続して指定します。同様にhh時をh時にすると時間に応じて1桁〜2桁の表示にすることができます。

図のような画面になります。

必要に応じて日付のフォント(書体)を指定します。矢印で示すFontの部分の[T]ボタンをクリックすると文字の調整を行うポップアップが表示されます。

次に時間の表示位置などを調整します。右下の■(ハンドル)をドラッグして調整します。

あとはシミュレーターで実行して確認します。Productメニューから「Run」を選択します。

シミュレーターが起動しApple Watchの画面に現在の時間が表示されます。

24時間制の表示にしたい場合は図のようにhh時となっている部分をHH時に変更します。(大文字にすると24時間制の表示になります)

メニューに戻る