Xcode6/Swiftで、ボタンを押すとラベルが変わるだけのアプリを作る


アプリ作りを始めようとしたけどSwiftなるものが出てきて、
なんだかもうObjective-Cを使う気が起きないのでXcode6Beta版を入れてみる。
でもXcode6をいきなり使い始めたら基本的な使い方がよくわからない。
そんな自分みたいな人へ。

Swiftが使える環境を整えるまでの話は[こちら](http://qiita.com/Kta-M/items/3dcd8d9754f444bf5678)で。

## プロジェクト作成

Xcodeを起動して出てくる初期画面。
`Create a new Xcode project`を選択。
![スクリーンショット 2014-09-04 6.42.34.png](https://qiita-image-store.s3.amazonaws.com/0/39565/770813a0-5cb8-f287-4892-476ead9a10c0.png "スクリーンショット 2014-09-04 6.42.34.png")

テンプレート選択画面。
`Single View Application`を選択。
![スクリーンショット 2014-09-04 6.42.53.png](https://qiita-image-store.s3.amazonaws.com/0/39565/a1dc53ce-60d3-c5f8-35eb-92f31d19c4a4.png "スクリーンショット 2014-09-04 6.42.53.png")

プロジェクトの初期設定画面。
とりあえず何かしら適当な名前をつける。
プロジェクトの保存ディレクトリを選べば、プロジェクト作成完了！
![スクリーンショット 2014-09-04 6.43.15.png](https://qiita-image-store.s3.amazonaws.com/0/39565/6b80d23a-2cb1-f223-b0d8-91c58c19e827.png "スクリーンショット 2014-09-04 6.43.15.png")

## 初期状態を見てみる
できたもの。
今回使うのは`ViewController.swift`と`Main.storyboard`だけ。
ざっくり言うと、

* `ViewController.swift`:画面の制御。
* `Main.storyboard`:オブジェクトの配置や画面遷移の設定。

![スクリーンショット 2014-09-04 6.44.13.png](https://qiita-image-store.s3.amazonaws.com/0/39565/fd46949a-8890-81ca-44aa-aeb6aeae5074.png "スクリーンショット 2014-09-04 6.44.13.png")

ストーリーボード。
正方形っぽい形をしてるけど、後述のConstraintを使って画面のサイズによらないUIを設計しろって心意気？
ちなみに何もないところをダブルクリックすると、縮小表示になる。
![スクリーンショット 2014-09-04 6.44.53.png](https://qiita-image-store.s3.amazonaws.com/0/39565/24ca274c-4472-66ee-64c6-0e996a7e01da.png "スクリーンショット 2014-09-04 6.44.53.png")

ストーリーボードを実機のサイズにしたい！って場合は、画面左側の下図の`Size`の項目で変更可能。
![スクリーンショット 2014-09-04 6.45.49.png](https://qiita-image-store.s3.amazonaws.com/0/39565/24c9ed4f-f24c-a88f-a9bc-88e1b8de76a2.png "スクリーンショット 2014-09-04 6.45.49.png")

## ボタンとラベルを配置する
画面右下のリストから`Label`を見つけて、ストーリーボードにドラッグ。
ストーリーボードが縮小表示中の場合は配置できないので注意。
`Button`も同様に配置。
![スクリーンショット 2014-09-04 6.46.05.png](https://qiita-image-store.s3.amazonaws.com/0/39565/e65d601d-3e0f-7c1d-b7c2-5f210587ff50.png "スクリーンショット 2014-09-04 6.46.05.png")

とりあえずこんな感じに。
![スクリーンショット 2014-09-04 6.47.32.png](https://qiita-image-store.s3.amazonaws.com/0/39565/e3ba0b80-a53c-f2fc-0509-40f5c9b0b01d.png "スクリーンショット 2014-09-04 6.47.32.png")

このままだと変な位置に表示されるので、Constraintを設定する。
平たく言うと何を基準に配置するかの設定。
うまく設定すれば、画面サイズが変わろうと、縦横が変わろうといい感じの表示にできるっぽい。
今回は画面中心から上下30pxのところに配置する。
ストーリーボードの画面の右下のボタンを押して、
`Horizonal Center in Container`を0に、`Vertical Center in Container`を-30に指定。
`Update Frames`を`Items of New Constraints`にして、`Add 2 Constraints`となっているボタンを押す。
ラベルも同様に、(0, 30)の位置に配置。
![スクリーンショット 2014-09-04 7.10.25.png](https://qiita-image-store.s3.amazonaws.com/0/39565/26109310-e386-6330-8be0-8af9daa8653e.png "スクリーンショット 2014-09-04 7.10.25.png")

## プログラムと関連付ける
ボタンとソースはGUIで関連付けられる。
まずは画面にストーリーボードとソースの両方を表示する。
画面右上のこれらのボタンの中から、左から2番目の蝶ネクタイっぽいやつをクリック。
（蝶ネクタイにしか見えないけどホントは何を表してるんだろ…。）
![スクリーンショット 2014-09-04 7.10.50.png](https://qiita-image-store.s3.amazonaws.com/0/39565/d6538a61-5756-cece-08e5-2829b9333df1.png "スクリーンショット 2014-09-04 7.10.50.png")

`Control`を押しながらラベルからソースへドラッグ。
すると下図のような表示になるので、適当にボタンの名前を入れてConnect。
ボタンも同様に。
![スクリーンショット 2014-09-04 7.18.53.png](https://qiita-image-store.s3.amazonaws.com/0/39565/e903ea2f-3d56-4c74-d9b4-2e22b23d23fb.png "スクリーンショット 2014-09-04 7.18.53.png")

ボタンがタッチされたときに呼ばれる関数を作成する。
ストーリーボードのボタンを選択すると、右側に下図のような表示が現れるので、
`Touch Down`の○からソースのいい感じのところまでドラッグ。
適当な関数名を付けてConnect。
![スクリーンショット 2014-09-04 7.17.05.png](https://qiita-image-store.s3.amazonaws.com/0/39565/6cf88fbc-d791-a93a-936a-fef9fc9fdb64.png "スクリーンショット 2014-09-04 7.17.05.png")

追加されたソースはこんな感じ。
![スクリーンショット 2014-09-04 7.19.57.png](https://qiita-image-store.s3.amazonaws.com/0/39565/722f3e73-5113-7bc1-4c7a-5d215677668c.png "スクリーンショット 2014-09-04 7.19.57.png")

## ボタンが押された時の動作を実装
と言っても一行書くだけ。

```ViewController.swift
import UIKit

class ViewController: UIViewController {
                            
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    @IBOutlet var testLabel: UILabel!
    
    @IBOutlet var testButton: UIButton!
    
    @IBAction func TouchTestButton(sender: AnyObject) {
        testLabel.text = "Touched!" // ここ！
    }
}
```

左上の再生ボタンを押すと、ビルドして実行。
`Build Succeeded`の表示が出れば、ビルド成功。自動的にシミュレータが起動して実行される。
もし`Build Failed`が出たら、何かしらエラー。
△に!のマークを押すと、エラー内容が表示されるので、修正。
![スクリーンショット 2014-09-04 7.20.56.png](https://qiita-image-store.s3.amazonaws.com/0/39565/0568b2f8-f532-c8e7-208d-29309bcdd641.png "スクリーンショット 2014-09-04 7.20.56.png")

## できた！
![スクリーンショット 2014-09-04 7.21.27.png](https://qiita-image-store.s3.amazonaws.com/0/39565/08b7781c-4fbc-ebf3-bec8-bd50ff1a9f00.png "スクリーンショット 2014-09-04 7.21.27.png")