【開発】ボタンがタッチされたらグループの背景色を変更する

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

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

次にUI一覧にあるGroupをドラッグ&ドロップします。

図のような画面になればOKです。必要に応じてグループのサイズを調整します。□(ハンドル)をドラッグしてサイズを調整できます。

UI一覧からButton(ボタン)をドラッグ&ドロップします。

ボタンが配置されます。ここではボタンの文字などは変更せず、そのまま利用します。

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

コードが表示されたら、先ほど配置したグループのUI部品上でctrlキーを押したままマウスの左ボタンを押します。そのままマウスを移動させプログラムコードの最後の}の上の行まで移動します。移動したらマウスのボタンを離します。

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

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

次にボタンのUI部品上でctrlキーを押したままマウスの左ボタンを押します。そのままマウスを移動させプログラムコードの最後の}の上の行まで移動します。移動したらマウスのボタンを離します。

Name欄にmyBtnと入力します。

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

続いて以下のコードを入力します。myBGは配置したグループの名前になります。

@IBAction func changeColor(){
myBG.setBackgroundColor(UIColor.blueColor())
}

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

Productメニューから「Run」を選択しシミュレーター上で実行します。

シミュレーターが起動すると図のような画面になります。マウスでButtonをクリックします。

グループの背景色が青色に変わりました。

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

しばらくしてApple Watch上でアプリが起動します。ボタンをタッチします。

グループの背景色が青色になります。

メニューに戻る