Swiftで「あーね」ボタンをうつと「あーね」って入力されるキーボードを作る



##普通にアプリのプロジェクトを作成する

![スクリーンショット 2014-09-17 21.20.53.png](https://qiita-image-store.s3.amazonaws.com/0/47114/815a030d-53dd-9ff2-588c-87526f519f0a.png "スクリーンショット 2014-09-17 21.20.53.png")

![スクリーンショット 2014-09-17 21.21.45.png](https://qiita-image-store.s3.amazonaws.com/0/47114/eab24d7b-e1fc-eead-7985-b804e6382dc7.png "スクリーンショット 2014-09-17 21.21.45.png")

##そのTargetととしてCustom Keyboardを作成します

File > New > Targetを選択

![スクリーンショット 2014-09-17 21.23.47.png](https://qiita-image-store.s3.amazonaws.com/0/47114/6c33a37b-31b7-109f-3347-954c0f4f3336.png "スクリーンショット 2014-09-17 21.23.47.png")

Custom Keyboardを選択(やっと！)

![スクリーンショット 2014-09-17 21.24.04.png](https://qiita-image-store.s3.amazonaws.com/0/47114/48861dc3-9bd6-0016-5532-e2fa1580b492.png "スクリーンショット 2014-09-17 21.24.04.png")

プロダクト名を適当につける。

![スクリーンショット 2014-09-17 21.24.46.png](https://qiita-image-store.s3.amazonaws.com/0/47114/78992714-5d31-1a02-9b5b-7b7c9e5072a3.png "スクリーンショット 2014-09-17 21.24.46.png")

##コーディングしていきます

デフォルトで作られている UIInputViewController を継承した KeyboardViewController を編集していきます。

「あーね」って入力すると「あーね」しかでてこない超シンプルキーボードなので一度きれいにします。

きれいにした結果が下記です。

```swift:KeyboardViewController.swift
import UIKit

class KeyboardViewController: UIInputViewController {

    override func updateViewConstraints() {
        super.updateViewConstraints()
    
        // Add custom view sizing constraints here
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated
    }

    override func textWillChange(textInput: UITextInput) {
        // The app is about to change the document's contents. Perform any preparation here.
    }

    override func textDidChange(textInput: UITextInput) {
        // The app has just changed the document's contents, the document context has been updated.
    }

}
```

次にnibでKeyboardのviewを作ります。

作ったAneKeyboard.xibをキーボードViewにするため、KeyboardViewControllerの viewDidLoad に下記を付け加えます。

```swift:KeyboardViewController.swift
    override func viewDidLoad() {
        super.viewDidLoad()
        var v = UINib(nibName:"AneKeyboard", bundle:nil).instantiateWithOwner(self,options:nil)[0] as UIView
        self.inputView.addSubview(v)
    }
```


nibファイルを作って適当にボタンを配置してください。


![スクリーンショット 2014-09-17 22.03.35.png](https://qiita-image-store.s3.amazonaws.com/0/47114/78b3bdc6-498b-b171-14db-2ed24a63ea2a.png "スクリーンショット 2014-09-17 22.03.35.png")


File's Owner に KeyboardViewController を選択します。
こうすることで Ctrl + drag などで簡単にbindできるようになります。

![スクリーンショット 2014-09-17 21.32.42.png](https://qiita-image-store.s3.amazonaws.com/0/47114/ddc93da6-c8d3-f379-a263-0c27e84ec814.png "スクリーンショット 2014-09-17 21.32.42.png")

「あーね」ボタン、「Next」ボタンを KeyboarViewController にバインドしてそれぞれ下記の関数を作ります。

```swift:KeyboardViewController.swift

    
    @IBAction func pushAne(sender: AnyObject) {
        // 「あーね」ボタン押下
    }
    
    @IBAction func pushNext(sender: AnyObject) {
        // 「Next」ボタン押下
    }
```

ボタンを押したときの処理を実装します。

```swift:KeyboardViewController.swift
    @IBAction func pushAne(sender: AnyObject) {
        // 「あーね」ボタン押下
        // こんな感じでテキストを挿入できます
        var proxy = textDocumentProxy as UITextDocumentProxy
        proxy.insertText("あーね")
    }
    
    @IBAction func pushNext(sender: AnyObject) {
        // 「Next」ボタン押下
        // 次のキーボードへ(これは必ず入れないといけないらしい)
        self.advanceToNextInputMode()
    }
```

以上で実装完了！

##使ってみよう！

keyboardそのもののプロジェクトのまま立ち上げようとすると下記みたいな事になります。

???

![スクリーンショット 2014-09-17 21.49.19.png](https://qiita-image-store.s3.amazonaws.com/0/47114/cb9d9bfa-41ee-e94d-c915-2b4136b20a84.png "スクリーンショット 2014-09-17 21.49.19.png")

実行するプロジェクトは一番はじめに作成した被Targetなプロジェクトになります。

実行すると、そのプロジェクトが立ち上がるのでホームキー(Command + Shift + H)を押して、ホームに行きましょう。
その後、Settings -> General -> Keyboard -> Keyboards とたどっていき、「Add New Keyboard...」を選択します。

![スクリーンショット 2014-09-17 21.52.42.png](https://qiita-image-store.s3.amazonaws.com/0/47114/7c6c4495-194f-2153-1863-b94bd86126a1.png "スクリーンショット 2014-09-17 21.52.42.png")


画面中央の我らが「ane」を選択します。


![スクリーンショット 2014-09-17 21.54.10.png](https://qiita-image-store.s3.amazonaws.com/0/47114/bc380445-5c67-7503-7382-c672e9c40d8d.png "スクリーンショット 2014-09-17 21.54.10.png")


これでキーボード設定完了です。

それではSpotlightで試してみましょう。

![スクリーンショット 2014-09-17 22.04.16.png](https://qiita-image-store.s3.amazonaws.com/0/47114/efffe13c-21b3-dde8-2f4e-f18916e07d4a.png "スクリーンショット 2014-09-17 22.04.16.png")

できました！