【開発】ボタンがタッチされたらプログラムを使って画像を表示する

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

表示する画像を用意しsample.jpgと名前を付けます。その画像をプロジェクト内にドラッグドロップします。

図の矢印で示す部分にチェックを入れたら「Finish」ボタンをクリックします。

次にImages.xassetsをクリックします。クリックしたら、先ほどプロジェクト内に入れたsample.jpg画像をドラッグ＆ドロップします。

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

次にInterface.storyboardをクリックします。UI一覧が表示されましす。表示されない場合は図の右側の矢印で示すボタンをクリックしてください。

UI一覧からButton（ボタン）を探し出してInterface (Main画面)にドラッグ＆ドロップします。

続いてImage（画像）をドラッグドロップして配置します。

必要に応じてサイズを調整します。

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

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

Name欄にmyBtnと入力します。

続いてImageも同様にctrlキーを押したままコード内に接続します。

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

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

すると図のようなコードが自動的に生成されます。

続いて以下のコードを入力します。

@IBAction func setMyImage(){
myImage.setImageNamed("sample")
}

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

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

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

画像が表示されました。

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

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

画像が表示されます。