Xcodeの画面構成について – Xcodeの使い方2

Xcode

スポンサーリンク

前回ではXcodeでのプロジェクト作成からプログラム実行まで行いました。今回はXcodeの画面構成とシミュレータの使い方を説明しますね〜

Xcodeの画面構成

各構成画面の概要

各画面の構成と名前は以下のとおりになります。

スクリーンショット 2015-11-21 5.32.39

 

ツールバー

プログラムの実行・停止、画面の表示・表示を切り替えるアイコンがあります。それぞれのアイコンの機能は後ほど説明します。

 

ナビゲーター エリア

アプリ開発に必要なファイル一覧が表示されています。それぞれのファイルを選択するとそのファイルの内容が中央に表示されます。まずは「Main.storyboard」でiPhoneの画面デザインを行い「ViewController.swift」でプログラムを記述すると覚えてください。

 

エディタエリア

ナビゲーターエリアで「ViewController.swift」を選択するとエディタエリアが表示されます。ここでプログラムを記述します。エディタエリアではプログラムの自動補完機能があります。下図では「pri」まで入力すると以下の補完候補が表示されこの状態でEnterキーまたはtabキーを押すと…

スクリーンショット 2015-11-21 15.44.56

コードが自動的に入力されます。

スクリーンショット 2015-11-21 15.46.57

 

 

デバッグエリア

プログラム実行中に変数の状態、ログ出力の内容、エラーが発生した場合はエラーの内容が表示されます。デバッグについては次回以降に説明します。

スクリーンショット 2015-11-21 15.34.05

 

ユーティリティエリア

「ViewController.swift」を選択している時はボタンやラベルなどオブジェクトの配置、オブジェクトの設定値の変更を行います。たくさんの設定内容があるので後々少しずつ説明します。

 

Interface Builder(インターフェイスビルダー)

「Main.storyboard」を選択するとInterface Builderが表示されます。ここでラベル、ボタンやテキストを配置して画面デザインを行います。

スクリーンショット 2015-11-21 5.18.01

 

各画面を表示、非表示にする

各画面はツールバー左上のボタンで表示、非表示にすることができます。左側のボタンでナビゲータエリアの表示・非表示、真ん中のボタンでデバッグエリアの表示・非表示、右側のボタンでユーティリティエリアの表示・非表示を切り替えることができます。

スクリーンショット 2015-11-21 15.56.18

 

iOSシミュレータの使い方

端末を選択してiOSシミュレータを起動

シミュレータはXcodeツールバー左側のアイコンで実行します。

スクリーンショット 2015-11-21 22.03.44

まずシミュレータを起動したい端末を選択して

スクリーンショット 2015-11-21 22.06.05

三角ボタンを押すとiOSシミュレータが起動します。

スクリーンショット 2015-11-21 22.07.41 スクリーンショット 2015-11-21 22.11.59

 

表示サイズを変更する

iOSシミュレータの表示が画面からはみ出るほど大きい場合はiOSシミュレータのメニューから「Window」→「Scale」でサイズを選択します。

スクリーンショット 2015-11-21 22.12.49

 

縦画面、横画面を変更

iOSシミュレータのメニューから「Hardware」→「Rotate Left」または「Rotate Right」を選択すると縦画面、横画面を切り替える事ができます。

スクリーンショット 2015-11-21 22.28.57

 

これで横画面でレイアウトが崩れていないかなど確認することができますね〜

スクリーンショット 2015-11-21 22.31.31

 

ホームボタンを押す

iOSシミュレータのメニューから「Hardware」→「Home」を選択するとホームボタンが押されます。

スクリーンショット 2015-11-21 22.17.25 スクリーンショット 2015-11-21 22.18.52

 

ちなみに通常のiPhoneと同じようにSafariや設定アプリなども使えます。日本語の設定にもできます。設定アプリから「General」→「Language & Region」→「iPhone Language」を「日本語」に設定しましょう。

スクリーンショット 2015-11-21 22.21.27 スクリーンショット 2015-11-21 22.23.53 スクリーンショット 2015-11-21 22.23.05

iOSシミュレータ上のジェスチャー操作

拡大、縮小などの2本指でピンチ操作をする場合はiOSシミュレータの画面上で「option」キーを押すと2つの点が表示されます。その「option」キーを押した状態で2つの点が離れるようにドラッグ操作を行うと拡大、2つの点が近づくようにドラッグ操作を行うと縮小されます。

2本指ドラッグ操作を行うには「option」キーを押すと2つの点が表示されるのでその「option」キーを押した状態でさらに「shift」キーを押してからドラッグ操作を行うと2本指でドラッグ操作が行われます。

 

iOSシミュレータのショートカット機能

  • 「command」+「←」 … 左側にデバイスを回転
  • 「command」+「→」 … 右側にデバイスを回転
  • 「control」+「command」+「Z」 … iPhoneをシェイクする動作を行う
  • 「shift」+「command」+「H」 … ホームボタンを押す
  • 「command」+「L」… 画面をロックする

 

まとめ

  • Xcodeの画面はナビゲータエリア、エディタエリア、デバッグエリア、ユーティリティエリア、インターフェイスビルダーで構成されている。
  • 各画面の表示・非表示の切り替えはXcodeのツールバーの右上のアイコンで行う。
  • Xcodeのツールバーの左上のアイコンからデバイスを選択してiOSシミュレータを起動する。
  • iOSシミュレータではSafari、設定変更、ホームボタンを押す、横画面に切り替える、ピンチ操作などiPhone実機で行える事はiOSシミュレータでも行える。

 

次回はXcodeの使い方の説明を行いますね〜

 

 

スポンサーリンク