【開発】ボタンがタッチされたらモーダル画面に移動させる

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

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

次にUI一覧にあるInterface ControllerをInterfaceの右側にある空白部分までドラッグ&ドロップします。

図のような画面になればOKです。

UI一覧からButton(ボタン)を最初からあるMain画面にドラッグ&ドロップします。

するとボタンが配置されます。ここではボタンの文字などは変更せず、そのまま利用します。次にボタン上でctrlキーを押したまま先ほど追加した画面に向かってマウスを移動させます。線(セグエ)が伸びるので画面がハイライトしたらマウスのボタンを離します。

ポップアップが表示されるので「modal」をクリックして選択します。

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

モーダルが真っ黒だと分かりにくいので背景色を赤色にします。2番目の画面をクリックします。属性の設定にあるColorのポップアップから赤色を選択します。該当する色がない場合はメニューの一番下にあるOther...をクリックし色を選択してください。


これで完成です。

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

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

モーダルが表示されます。モーダルの場合、画面が下から上に覆い被さるように表示されます。Cancelボタンをクリックすると前の画面に戻ります。

元の画面に戻りました。

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

しばらくしてApple WatchにButtonが表示されます。タッチします。

下から覆い被さるようにモーダル画面が表示されます。Cancelボタンをタッチすると元の画面に戻ります。

メニューに戻る