【開発】Apple Watchの画面にスライダーと値を表示する

ここではiPhone/iPad/Apple Watchの開発環境であるXcode 6.3.1 (英語版)を使って画面にスライダーと値を表示するまでの手順を説明します。
なお、Xcode起動からプロジェクト作成、WatchKitの追加までの手順は「【開発】Apple Watchの画面に文字を表示する」のページと同じですので省略しています。
まず、図の矢印で示すフォルダをクリックして展開します。

Interface.storyboardのアイコンをクリックします。クリックすると図のような画面になります。

次にUI一覧からSliderを探し出します。見つかったらアイコンをInterfaceの領域までドラッグ＆ドロップします。

図のような画面になればOKです。続いてラベルをスライダーの下にドラッグ＆ドロップします。

スライダーの設定を行いますので、クリックして選択します。

次に矢印で示すスライダーの最小値や最大値などを設定します。

次に矢印で示すアシスタントエディタのボタンをクリックします。

図のような画面になります。もし、プログラムが表示されない場合は他のストーリーボード、例えばMain.storyboardをクリックしてください。その時点でコードが表示されたら、サイドInterface.storyboardをクリックすれば表示されます。それでも駄目なら一度XCodeを終了させて再度起動させてください。
コードが表示されたら、先ほど配置したスライダーのUI部品上でctrlキーを押したままマウスの左ボタンを押します。そのままマウスを移動させプログラムコードの最後の}の上の行まで移動します。移動したらマウスのボタンを離します。

すると図のようなポップアップが表示されます。Name欄は自動的に文字を入力する状態になりますので、ここに名前を入力します。ここではmySliderとしています。入力したら「Connect」ボタンをクリックします。

図のようなコードが自動的に挿入されます。

次にスライダーの値を表示するラベルも同様にctrlキーを押して処理します。

名前を入力します。ここではsliderValueとしました。入力したらConnectボタンをクリックします。

図のようになっていればOKです。

次にスライダーの値が変化した時に呼び出すメソッドを定義します。以下のように入力します。メソッド名は適当に決めても問題ありません。

@IBAction func sliderDidChange(value: Float){
sliderValue.setText("\(value)")
}

次にスライダーと先ほどのメソッドを連結します。@IBAction〜の左側にある○上でマウスのボタンを押したままSliderの部分までマウスを移動させます。移動させたらマウスを離します。するとスライダーとメソッドが関連付けられます。

動作を確認します。まずはシミュレーターで確認します。Productメニューから「Run」を選択します。

シミュレーターが起動します。

+ボタンをクリックすると値が増えます。

最大値まで増やすとこのようになります。

次に実機で確認します。あらかじめiOSでの開発に必要な証明書などのファイルは用意されているものとします。Apple Watchと連携しているiPhoneなどの端末をMacに接続します。
接続を確認したら図のポップアップメニューからiPhoneの実機を選択します。次にApple Watchのロックを解除しておきます。解除しないとエラーのダイアログが表示されます。Productメニューから「Run」を選択します。

しばらくして実機にスライダーが表示されます。

+ボタンや-ボタンをタッチするとスライダーの値が変化します。なお、デジタルクラウンを回してもスライダーの値は変化しません。