[Swift][Xcode6][入門]初心者向け簡易カウンターの作成


#前準備

[【Swift】【超入門】初心者向けはじめてのHelloWorld!]
[【Swift】【超入門】初心者向けはじめてのHelloWorld!]:http://qiita.com/maximum80/items/4116985b7276fdb45576

XCode6のダウンロードからプロジェクトの作成は前回の記事を参照。

![Screen Shot 2014-09-15 at 9.10.45 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/1b73e8cc-85bb-c35e-6ac0-e0f7fd489388.png "Screen Shot 2014-09-15 at 9.10.45 AM.png")

Single View Applicationを選択。

![Screen Shot 2014-09-15 at 9.10.55 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/f6452914-e23e-b0c7-cef6-5830597e2cbb.png "Screen Shot 2014-09-15 at 9.10.55 AM.png")

今回はCounterという名前のプロジェクトを作ります。

#StoryBoardを活用する
左側に表示されているプロジェクトデータから
Main.storyboard
というファイルを選択。
![Screen Shot 2014-09-15 at 9.13.05 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/cdb49b10-1cb2-315e-90a8-ac20ff8f19ad.png "Screen Shot 2014-09-15 at 9.13.05 AM.png")

##LabelとButton等のオブジェクトの設置
まずXCode右下の Object Library （右下の立方体のマーク）をクリック。
すると、様々な種類のオブジェクト（アセットのようなもの）があり、ストーリーボードに挿入する事が出来ます。
![Screen Shot 2014-09-15 at 9.16.48 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/f4a3c146-588a-69c2-e59a-3b2022be81fe.png "Screen Shot 2014-09-15 at 9.16.48 AM.png")


1. Label、Button等のオブジェクトの設置

* Labelマークをストーリーボードにドラック&ドロップします。

![Screen Shot 2014-09-15 at 9.26.21 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/cac89246-309b-e987-1394-ad3b3fb8e66a.png "Screen Shot 2014-09-15 at 9.26.21 AM.png")

* Buttonも選択し、同様に設置していきます。

 ![Screen Shot 2014-09-15 at 9.27.31 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/209a828e-6310-cd67-c599-0fdc80a0dcc7.png "Screen Shot 2014-09-15 at 9.27.31 AM.png")

今回はカウントされる数字のラベル、追加ボタン、リセットボタンの3つを設置します。

2.　色や種類、配置の指定

ラベルやボタンの色、内容、種類等をAttributes insepterから編集する事が出来ます。
容量はPPT等とほとんど変わらないため、誰でも簡単に編集できると思います。

![Screen Shot 2014-09-15 at 9.30.13 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/f785331c-12b1-61b4-e6db-78d504387c72.png "Screen Shot 2014-09-15 at 9.30.13 AM.png")

* 色、種類の編集します。

![Screen Shot 2014-09-15 at 9.31.20 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/52c64411-957d-305a-1797-212424f01a1d.png "Screen Shot 2014-09-15 at 9.31.20 AM.png")

こんな感じで編集していきます。色々試してみるといいかもしれません。

![Screen Shot 2014-09-15 at 9.34.10 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/1375d17e-6c7e-a311-13cb-92bcf365cc94.png "Screen Shot 2014-09-15 at 9.34.10 AM.png")

ボタンも今回はAdd Contact(通常は連絡先の追加でつかうデフォルトのボタン）を利用します。

* 配置の指定します。
ドラッグ&ドロップで設置するだけでは、位置は確定したわけではありません。
確定させるためには、右下のAlignの部分から位置を指定して制約を加えてください。

![Screen Shot 2014-09-15 at 9.32.22 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/ddbbdf9c-1309-c649-3951-c0930433fd88.png "Screen Shot 2014-09-15 at 9.32.22 AM.png")

3.　画像の挿入

* 画像をドラッグ&ドロップします。
画像を以下の位置にドラッグ&ドロップしてください。

![Screen Shot 2014-09-15 at 9.44.52 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/87abc5af-2cb1-e93a-2178-e01efeca894d.png "Screen Shot 2014-09-15 at 9.44.52 AM.png")

* Media Libraryから挿入します。

すると、右下のmedia Libraryに画像が加わっているのが分かります。
LabelやButton同様、ドラッグ&ドロップでストーリーボードに挿入しましょう。

![Screen Shot 2014-09-15 at 9.46.09 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/ff67d3ff-20ac-744c-e79d-4676af5f2bc2.png "Screen Shot 2014-09-15 at 9.46.09 AM.png")

* また、この際に表示される以下のcopy itemsにチェックが入ってることを確認してください。
注意しないと参照だけコピーになりうまくいきません。(追記)

![Screen Shot 2014-09-15 at 9.44.03 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/4c967007-a840-a48c-4bb8-ba5a108ca56a.png "Screen Shot 2014-09-15 at 9.44.03 AM.png")


##宣言と関連づけ
1. Assistant Editorを開く

以下のボタンをクリックして ViweController.swiftを編集できる状態にしましょう。

![Screen Shot 2014-09-15 at 9.49.20 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/55543c91-180e-6d5e-952e-550b9e66785c.png "Screen Shot 2014-09-15 at 9.49.20 AM.png")

2.　ストーリーボードとの関連付けをします。

オブジェクトをCtrl+ドラッグ&ドロップして、エディタに移動しましょう。

![Screen Shot 2014-09-15 at 9.53.25 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/0de82937-f3dd-f7c9-d99c-a7916b759361.png "Screen Shot 2014-09-15 at 9.53.25 AM.png")

counter と名前をつけて connect をクリック。
すると、以下のようなコードが自動生成されます。

```ViewController.swift

    @IBOutlet var counter : UILabel

```

3.　ボタンのクリックアクションの関連づけをします。

Buttonも同様に関連づけが出来ますが、以下のように Connection を Action に選択する事で、クリック等の動作時に発生する関数として関連づけられます。
![Screen Shot 2014-09-15 at 9.57.19 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/287e65cb-e62d-d46a-150d-5a656d7db840.png "Screen Shot 2014-09-15 at 9.57.19 AM.png")

以下のようなソースコードが生成されます。

```ViewController.swift

/*func以下は設定した関数名前*/
 @IBAction func PushCountButton(sender : UIButton) {
    }


```

#メインの処理を実装

メインの処理はとてもシンプルです。

* counter用のcountNumという変数を定義
* Countボタンクリック時はラベルにcountNumを追加、インクリメント
* Resetボタンのクリック時はラベルに0を追加、countNumをリセット

ソースは以下です。

```ViewController.swift

//
//  ViewController.swift
//  Counter
//
//  Created by maximum80 on 9/15/14.
//  Copyright (c) 2014 maximum80. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    
    @IBOutlet var counter : UILabel
    var countNum = 0

    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.
    }

    
    @IBAction func PushCountButton(sender : UIButton) {
        counter.text = String(countNum)
        countNum++
    }

    
    @IBAction func PushResetButton(sender : AnyObject) {
        countNum = 0
        counter.text = String(countNum)
        countNum++
    }
    
}



```

実行してみると、上手くカウンターが動作すれば成功です!!


![Screen Shot 2014-09-15 at 10.15.49 AM.png](https://qiita-image-store.s3.amazonaws.com/0/6702/a0679c4f-a906-376c-e89b-4118f9ea4e5f.png "Screen Shot 2014-09-15 at 10.15.49 AM.png")