Xcodeの基本的な使い方

xcode

 iPhoneやiPad、Macなどのアプリケーションをつくる際に使用する開発環境がXcodeです。Xcodeでは、アプリのプログラミングはもちろんのこと、アプリのインターフェースを構成する際にとても重要になってきます。ここでは、Xcodeの基本的な使い方について解説します。

プロジェクトの作成

 Xcodeを立ち上げると以下の様な画面になります。

1

図に示すように大きく分けて2つの部分に分類できます。

① 新しくプロジェクトをつくる

 基本的にこの部分を使用します。このメニューからプロジェクトを作成します。ここで、プロジェクトとはプログラムファイルをまとめたもののことです。ここには

  1. Get started with a playground
  2. Create a new Xcode project
  3. Check out an existing project

の3種類が選択可能です。アプリを作る場合は、プロジェクトをつくるので、「Create a new Xcode project」を選択します。

② プロジェクトを開く

 保存したプロジェクトの続きから始めたい場合は、ここから選択します。もしない場合は、一番下にある「Open another project…」を選択します。

作成したプロジェクトの設定

 プロジェクトを作成すると以下の画面が出てきます。

プロジェクトの種類

iPhoneやiPadなどのiOSアプリを作りたい場合は①を選択します。そして、Macにおけるアプリを作成したい場合は②を選択します。ここでは、Macのアプリを作る場合を考えるので、②にある「Application」を選択します。そして、「Cocoa Application」を選び、次へ進みます。

 次の画面ではさらにプロジェクトの細かい設定をすることができます。

 3

画面にあるように

  1. Product Name:アプリの名前
  2. Organization Name:作成者の名前
  3. Organization Identifier:作成者を区別する印
  4. Language:使用するプログラミング言語

などを設定します。①の名前と②の言語は重要なのでしっかり設定します。名前はアプリの名前で、これから使うアプリの名前を記入します。言語にはSwiftとObjective-Cが選択できます。Swiftは新しい言語なので、なるべくSwiftでプログラムをつくるようにするといいでしょう。

 あとは作成したプロジェクトを好きな場所に保存してください。

Xcodeの作業スペースを理解する

 プロジェクトの作成に成功すると以下の様な作業スペースが出てきます。

開発環境Xcode

この作業スペースを利用してプログラミングするので使い方をしっかり理解しましょう。画像にあるように、①メニュー、②ナビゲータ領域、③エディタ領域、④ユーティリティ領域の大きく4つに分けることができます(エディタ領域の下にデバッグ領域がある)。これらについて順に解説します。

① メニュー

 メニューでは左端と右端の部分をよく使用します。まず、左端にある部分の三角をボタン①をおすと、プログラムのデバックと実行が開始されます。そして、実行中に四角ボタン②を押すとプログラムが終了します。パソコンのアイコン③により実行する機器の種類を選択できます。iOSプログラミングの際によく使用します。

メニューXcode

 右端にある横線がいくつかあるボタンを押すと、後述するエディタ領域に一つだけファイルが表示されます。そして、円が2つ交差しているアイコンを選択すると、エディタ領域に2つファイルが表示されます。四角の中に線があるボタンをおすと左から順にナビゲータ領域、デバッグ領域とユーティリティ領域の表示と非表示を設定できます。

メニューXcode

② ナビゲータ領域

 ここではプロジェクトの構成をまとめてあります。上に8つのアイコンがありますが、一番左のファイルマークを選択することで、プロジェクトを構成するファイルを表示します。2番目のアイコンを選択すると、プロジェクトを構成するクラスが表示されます。基本的に一番目のファイルを多用します。表示されるファイルを選択すると、選択したファイルを編集することができます。左下の「+」よりファイルを追加することも可能です。

ナビゲータ領域

③ エディタ領域

 この部分でナビゲータ領域で選択したファイルを編集します。

④ ユーティリティ領域

 ここでは、アプリにおけるボタンや画面などのオブジェクトの設定をします。この上の方の領域(インスペクタペイン)で、オブジェクトのプロパティや動作を設定します。そして、下の領域(ライブラリペイン)より、オブジェクトを導入することができます。

ユーティリティ領域

ストーリーボードを確認する

 ボタンなどのオブジェクトを設置する方法を紹介します。ボタンなどを設置するには、ストーリーボードを表示させる必要があります。そこで、ナビゲータ領域からMain.storyboardを選択します。選択すると、エディタ領域にウインドウが表示されます。

ストーリーボード

エディタ領域の下の方にいくつかアイコンがあるので説明します。

ストーリボードのアイコン

まず、左下にあるアイコン①を押すと、ストーリーボードにあるオブジェクトが表示されます。もう一度押せば消えます。そして、②では画面に設置したボタンなどのオブジェクトの位置を設定することができます。

 ストーリーボードをみてみましょう。すると以下のようになっています。

ストーリーボードの中身

ストーリーボード上でダブルクリックをすることで、拡大と縮小をすることができます。便利なので覚えておくといいでしょう。ストーリーボードにある「→」からプログラムがスタートします(①)。この場合は、Window Controller(③)になっているのでWindow Controllerからスタートします。あと、上の方にはメニューがあり、ここでアプリのメニュー設定をします。そして、④はView Controllerであり、Window Controllerにくっついています。View Controllerにボタンなどを設置していきます。

ボタンを設置する

 ではView Controllerにボタンを設置してみます。そのため、ユーティリティからボタンを選択し、View Controllerに設置します。設置方法は、ドラッグ・アンド・ドロップして設置します。

12

次に、ボタンの位置を設定します。ここでは、画面の中央に固定されるように設定してみます。まず、ボタンをウインドウの中央に移動させます。そして、エディタ領域の右下にから、中央固定に設定します。「Horizontal Center in Container」と「Vertical Center in Container」にチェックし「Add 2 Constrains」をクリックします。

中央設定

すると、以下のような表示になります。青色になっているので、正しく設置できています。

中央設置

一方、正しく設置できていないと以下のように橙色でエラーとなります。

エラー

このエラーをボタンを移動させて直してもいいのですが、以下のように「Update Constraints」で直すこともできます。覚えておきましょう。

Update Constrains

ボタンのキャプションを「Button」から「A」へ変更します。そこで、ナビゲータ領域の左から4つ目のアイコンを選び、TitleをAに変更します。すると、ボタンのキャプションが変化します。

キャプションの設定

ボタンの設定をする

 設置したボタンの動作設定を行います。ここではボタンを押したら、「A」から「B」にキャプションが変わるようにします。そのために、

  1. 設置したボタンのプロパティを取得できるようにする
  2. ボタンの動作を記述する

が必要になります。

 プロパティや動作を記述するにはメニューの右上の2つの円のアイコンで、エディタ領域を2画面表示にします。そして、右側に「ViewController.swift」を指定します。そして、右クリックによるドラッグ&ドロップでボタンからコードへ引っ張ってつなげます。すると枠が出てくるので、以下のように設定します。

20

  1. Connection:Outlet
  2. Name:ButtonA
  3. Type:NSButton

とします。ConnectionがOutletだとオブジェクトの設定をすることができます。Nameはオブジェクトの名前です。好きな名前をつけてください。ここでは、ButtonAとします。Typeはオブジェクトのタイプです。ここではボタンなのでNSButtonとしました。

 次にボタンを押した際の動作を導入します。同様に右クリックのドラッグ&ドロップでコードに導入します。その際、以下のように設定します。

21

ボタンの動作をコーディングする

 あとはボタンの動作を以下のようにコーディングします。

@IBOutlet var ButtonA: NSButton!
@IBAction func BtnA(sender: NSButton) {
    ButtonA.title="B"
}

これで、ボタンを押すと「A」が「B」に変わります。

実行する

 メニューの三角ボタンで作成したプログラムを実行します。実行すると以下のように、ボタンを押すと「A」から「B」に変わります。

【初期画面】

Window1

【ボタンを押すと…】

Window2

著者:安井 真人(やすい まさと)