StoryboardやNibを超絶便利に使う技

## はじめに
Storyboardを使って枠線をいじるとき、こんなことしてませんか？
![スクリーンショット 2015-10-18 22.40.14.png](https://qiita-image-store.s3.amazonaws.com/0/75257/ed091f57-347c-b3dd-02ce-ac2d06b5eb28.png "スクリーンショット 2015-10-18 22.40.14.png")
謎のKeyPathとTypeを設定する方法しかなかったと思います。
自分もこの方法を使って実現させていました。

しかし！！

もうこんな不毛な作業をやる必要がなくなる便利機能があります！
というわけで`@IBInspectable`と`@IBDesignable`という便利な機能について紹介します！
これらはXcode6以上で使えるようになったものです。

## `@IBInspectable`について
`@IBInspectable`とは、これを指定したプロパティは
IBを表示した時の右カラムにプロパティとして表示されることが出来ます。

例として、UIViewのサブクラスのCustomViewにプロパティ定義してみました。

```swift:CustomView.swift
import UIKit

class CustomView: UIView {
    @IBInspectable var customBool   : Bool      = false
    @IBInspectable var customInt    : Int       = 0
    @IBInspectable var customFloat  : CGFloat   = 0.0
    @IBInspectable var customDouble : Double    = 0.0
    @IBInspectable var customString : String    = ""
    @IBInspectable var customPoint  : CGPoint   = CGPointZero
    @IBInspectable var customSize   : CGSize    = CGSizeZero
    @IBInspectable var customRect   : CGRect    = CGRectZero
    @IBInspectable var customColor : UIColor   = UIColor.clearColor()
    @IBInspectable var customImage  : UIImage   = UIImage()
}
```

IB上でCustomView.swiftをCustomClassに入れると、、、
![スクリーンショット_2015-10-18_15_34_24.png](https://qiita-image-store.s3.amazonaws.com/0/75257/d8fdf0fa-8029-ed66-6f7c-bb1f03c6942d.png "スクリーンショット_2015-10-18_15_34_24.png")
このように表示されます。
![スクリーンショット 2015-10-18 15.35.55.png](https://qiita-image-store.s3.amazonaws.com/0/75257/76394761-771e-8d28-57ce-eea8846e2e17.png "スクリーンショット 2015-10-18 15.35.55.png")

ちなみに追加出来る型はコチラです。

- Bool
- Int
- CGFloat
- Double
- String
- CGPoint
- CGSize
- CGRect
- UIColor
- UIImage

---
これはExtensionクラスでも出来ます。
ただしComputed Propertyのみに限られます(getとsetがあるプロパティです)
こんな感じでやれば、、、

```swift:UIView+Extension.swift
import UIKit

extension UIView {
    @IBInspectable var extensionBool : Bool {
        get {
            return self.extensionBool
        }
        set (newValue) {
            self.extensionBool = newValue
        }
    }
    @IBInspectable var extensionInt : Int {
        get {
            return self.extensionInt
        }
        set (newValue) {
            self.extensionInt = newValue
        }
    }
}
```

UIViewのプロパティとしてIB上に出てくれます。
![スクリーンショット 2015-10-18 20.55.10.png](https://qiita-image-store.s3.amazonaws.com/0/75257/aeb9123d-f1e8-bfee-2912-560b84d9bbfe.png "スクリーンショット 2015-10-18 20.55.10.png")

IB上からプロパティの値をいじりたい時は重宝しますね！


## `@IBDesignable`について
`@IBDesignable`は`@IBInspectable`と併用して使うことで
いちいちビルドしてUI確認する作業を減らすことが出来ます！
IB上に出てきたプロパティをいじるとライブレンダリングしてくれるからです！

使い方は簡単。
こんな感じでクラスの前に`@IBDesignable`をつけるだけです。
このクラスはViewの枠線や色のプロパティをIB上でいじれるようになってます。

```swift:CustomView.swift
import UIKit

@IBDesignable
class CustomView : UIView {
    @IBInspectable var borderWidth : CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    
    @IBInspectable var borderColor : UIColor = UIColor.clearColor() {
        didSet {
            layer.borderColor = borderColor.CGColor
        }
    }
    
    @IBInspectable var cornerRadius : CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }
}
```

例の如くCustom ClassにCustomViewを設定します。
![スクリーンショット_2015-10-18_21_57_32.png](https://qiita-image-store.s3.amazonaws.com/0/75257/6624a5ae-7d43-da68-2694-796dfd4395ef.png "スクリーンショット_2015-10-18_21_57_32.png")

プロパティをセットできるので、セットしてみると、、、
![スクリーンショット_2015-10-18_21_59_54.png](https://qiita-image-store.s3.amazonaws.com/0/75257/c2b8642e-9959-61b7-27ac-55bf2e1c7840.png "スクリーンショット_2015-10-18_21_59_54.png")


**その場でプロパティが反映されます！！**
ほらほらほら！
![スクリーンショット_2015-10-18_22_00_59.png](https://qiita-image-store.s3.amazonaws.com/0/75257/99d857bc-76d7-6ebc-ec05-6521a12052dc.png "スクリーンショット_2015-10-18_22_00_59.png")

と、いうわけでこれで便利にStoryboardを使った開発ができますね！

## 終わりに
今まではIB上でlayer系の作業をするときはKeyPathとTypeを指定していた
or
そこだけコードで定義していたかと思います。
今回のこの方法を使えば、いちいちビルドしてUI確認をすることなく、
IB上でプロパティをいじるだけでUI確認が出来るのです！
難しくないので是非、使ってみてください！

## サンプルコード
Githubにサンプルプロジェクトを置いておきました。
ご自由にお使い下さい。
https://github.com/AcaiBowl/LiveRenderingSample

質問や指摘があればコメントでお待ちしております！