【開発】Apple Watchの画面に画像を表示する

ここではiPhone/iPad/Apple Watchの開発環境であるXcode 6.3.1 (英語版)を使って画面に画像を表示するまでの手順を説明します。
なお、Xcode起動からプロジェクト作成、WatchKitの追加までの手順は「【開発】Apple Watchの画面に文字を表示する」のページと同じですので省略しています。
まず、表示する画像を用意します。ここではimagesフォルダ内にsample.jpgというJPEG形式の画像を1枚用意します。

まず、imagesフォルダをプロジェクト内にドラッグドロップします。

ドラッグ＆ドロップすると図のような画面になります。Destination：のCopy items if neededにチェックを入れます。次にAdd to targets：の○○○WatchKit Appにチェックを入れます。あとはFinishボタンをクリックします。

矢印で示すフォルダ（○○○ WatchKit App）の△をクリックして展開します。

Interface.storyboardをクリックします。すると図のような画面になります。ここでは画像を表示するためのUIを配置します。次に右側の領域で矢印で示すボタンをクリックします。表示された領域内に様々なUIが表示されますので、Imageが表示されるまでスクロールします。

ImageをMainの画面にドラッグ＆ドロップします。

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

表示する画像を選択します。Imageの横のポップアップメニューをクリックします。すると、最初にドラッグドロップしたフォルダにあるsample.jpg画像の名前が表示されます。sample.jpgを選択します。

図のようになっていれば大丈夫です。ただし、このままではApple Watchには画像は表示されません。Apple Watchに画像を表示するためには、もう1つ手続きを行う必要があります。

ドラッグ＆ドロップしたImageフォルダ内にあるsample.jpgファイルが表示されるようにします。次に「○○○WatchKit App」フォルダ内にあるImages.xcassetsをクリックします。

sample.jpgをドラッグ＆ドロップして入れます。

図のようになっていればOKです。Apple Watchに画像を表示する場合は、このようにimages.xcassetsに画像を入れておきます。

動作を確認します。Productメニューから「Run」を選択します。

シミュレーターが起動し実行結果が表示されます。Apple Watchの画面に画像が表示されていればOKです。

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

Apple Watchで作成したアプリが実行されます。図は起動中の画面です。

画像が表示されます。

実際に実機を撮影した写真です。