[Swift]作業効率10倍アップ？フォーム作成ライブラリー「Eureka」チュートリアル

UITableViewはアプリを作る上で一番基本になるViewですね。
アプリの設定画面、フォームなどでよく使います。

しかし、作るとなったらいろいろめんどくさいのも事実です。
デリゲートを作って、カスタムセル作って、データソースを管理したり。。。

そんな、UITableViewの面倒なものを一掃する便利なライブラリーがあります。

Eurekaです。

これを使えば、作業効率10倍アップは間違いない、あっと言う間にUITableviewを使った画面が作れちゃいます。

ただ、DSL(ドメイン固有言語）でセルを定義していくので、始めのうちは戸惑うかもしれません。

今回はEurekaライブラリーの使い方をご紹介します。

Eurekaとは？

Eurekaはウルグアイのアプリデザイン会社XMARTLABSが開発をしているオープンソースです。
Swift2で作製されているフォーム作製ライブラリーです。
もともとObjective-C製のXLFormというライブラリーがあったそうなのですが、それをSwiftで作りなおしたのがEurekaになります。

使用要件

現在Eurekaを使うには以下の条件が必要です。

• iOS 8.0+
• Xcode 7.0+

インストール

インストール方法は、CocoaPods、Carthageを使う方法と、手動でフレームワークをプロジェクトに読み込ませる方法があります。今回はCocoaPodsのインストールを見てみます。

CocoaPodsでのインストール

自分のプロジェクト(YourApp.xcodeproj）がある場所で

pod init

をして、Podfileを作成します。
Podfileの中身は

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'Eureka', '~> 1.2'

保存したあとに、

$ pod install

をして、作られた.xcworkspaceファイルを開いたら、終了です。

Eurekaを使うファイルにはインポートをしてライブラリーを読み込ませましょう。

import Eureka

まず使ってみる

インストールができたら、ひとまず使ってみましょう。
テキストを入力するフォームを作ってみます。

//ViewController.swift
import Eureka


class ViewController: FormViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
  
        form +++ Section()
            <<< TextRow("TextFiled"){
                $0.title = "テキスト入力"
                $0.placeholder = "ここに書いてね"
        }
    }
}

たったこれだけで、セルをタップすればキーボードが出てくるテキストフィールドのテーブルが作れちゃいます。

オペレーター

FormViewControllerを継承したクラスはformというフォームのプロパティを持ちます。

formプロパティに特殊なオペレーターを使うことでフォームに、セクションやセルを追加していきます。

各オペレーターの意味と使い方を紹介します。

+++=

+++=はformプロパティにセクションを代入するオペレーターです。Rowを代入するとそれを含めたセクションを作ってくれます。

// Will append a section at the end of the 'form'
Form.
form +++= Section()
// Will internally create a Section containing a
PhoneRow and append it to the 'form' variable:
form +++= PhoneRow()

+++

+++はformプロパティにセクションを追加、または二つのセクションを追加してformを作成するオペレーターです。

// Will add two sections at the end of the 'form' Form.
form +++ Section("Custom cells") +++ Section("Another
section")
// Will create and assign a Form to the 'form' variable
(containing the two sections):
form = Section("Custom cells") +++ Section("Another
section")

<<<

<<<はセルをセクションに追加するオペレータです。また二つのセルからセクションを追加スルこともできます。

// Will append a Check row to the last section of the
'form' Form.
form.last! <<< CheckRow()
// Will implicitly create a Section and add it to the
'form' (containing the two rows):
form +++ PhoneRow("Phone"){ $0.title = "Phone"}
         <<< IntRow("IntRow"){ $0.title = "Int";
$0.value = 5 }

+=

+=はappendContentsOfメソッドを呼び出し、セクションを配列としてformに追加するオペレーターです

// Will append three sections to form.
form += [Section("A"), Section("B"), Section("C")]

豊富なセルの種類

Eurekaは事前に定義されているセルの種類がたくさんあります。
自分でカスタムセルを作ることもできますが、フォーム画面作成する際に必要なものはすべてそろっている印象です。

• Field Rows
• キーボードを使っての入力ができるセルです。キーボードの種類によってTextRowやPhoneRowなど細かに分かれています。
• Date Rows
• NSDateを使っての日時の設定ができるセルです。これもDateRowやTimeRowなど、形式ごとにわかれています。
• AlertRow
• アラートビューで選択させるセルです。
• ActionSheetRow
• アクションシートで選択させるセルです。
• SegmentedRow
• Segmented Controlを使った選択ができるセルです。
• PushRow
• 他のViewControllerに遷移させるセルです。
• ImageRow
  *フォトライブラリーから画像を取得するセルです。
• MultipleSelectorRow
• 複数選択ができるセルです。
• PickerRow
• PickerViewを使ったセルです。
• PickerInlineRow
• PickerViewを折りたたみ形式で使えるセルです。
• LocationRow
• マップを使えるセルです。
• ButtonRow
• タップが検知できるセルです。
• CheckRow
• チェックのオンオフができるセルです。
• LabelRow
• 文字列を表示するセルです。
• SwitchRow
• UISwitchを使ったオンオフができるセルです。
• TextAreaRow
• TextAreaで入力できるセルです。

コールバック関数

セルのイベントを検知して処理ができるコールバック関数も多数定義されています。

onChange()
セルの値が変わった時に呼ばれる

onCellSelection()
セルをタップした時に呼ばれる

cellSetup()
セルの初期生成時に呼ばれる

cellUpdate()
セルが表示される度に呼ばれる

onCellHighlight()
セルがファーストレスポンダーになった時に呼ばれる

onCellUnHighlight()
セルがファーストレスポンダーではなくなった時に呼ばれる

onExpandInlineRow()
インライン型のセルが広がる前に呼ばれる

onCollapseInlineRow()
インライン型のセルが閉じる前に呼ばれる

onPresent()
他のViewControllerへ遷移する前に呼ばれる

使い方

セルの種類とコールバックがわかったところで、使い方を見ていきたいと思います。
今回は単純に名前と性別を選択できるフォームを作りたいと思います。

まず、フォームとセクションを作ります。

form +++ Section()

次に、テキストを入力できるセルTextRowを作成します。

form +++ Section()
    <<< TextRow("Name"){
        $0.title = "名前を入力"
        $0.placeholder = "ここに書いてね"
        }

Rowの生成メソッドは以下の様に引数に文字列を指定する事ができます。
他の場所から任意のセルを呼び出したい時にこのタグは使われます。
あとはクロージャーでセルのセットアップができます。
$0.titleにはセルのタイトルが、$0.placeholderでプレースホルダーの設定ができます。
$0.valueでセルの初期値を設定することもできます。

TextRow("タグ名"){
//クロージャーでセルのセットアップができる
$0.title = "タイトルを設定"
$0.placeholder = "プレースホルダーの文字列"
}

セルの入力がされたらユーザーデフォルトに値を保存してみたいと思います。
.onChange()メソッドで値が変更された時の処理を実装することができます。

<<< TextRow("Name"){
    $0.title = "名前を入力"
    $0.placeholder = "ここに書いてね"
    }.onChange{row in
        
        let userDefault = NSUserDefaults.standardUserDefaults()
        userDefault.setValue(row.value, forKey: "Name")
                
    }

onChange{}で{}の中にクロージャーで処理を書くことができます。
セルの情報はrow変数で取得ができます。

次にSegmentedRowを使って性別を選択できるセルを作ります。

<<< SegmentedRow<String>("sex"){
    $0.options = ["男", "女"]
    $0.title = "性別"
    $0.value = "男"
    }.onChange{ row in
        let userDefault = NSUserDefaults.standardUserDefaults()
        userDefault.setValue(row.value, forKey: "Sex")
    }

SegmentedRowで気をつけるのは中身の型を指定しないとエラーになることです。

SegmentedRow<中身の型>("タグ名")

初期値の設定ですが、

SegmentedRow<String>("sex"){
    $0.options = ["男", "女"]
    $0.title = "性別"
    $0.value = "男"
}

$0.optionsで項目名を指定できます。
$0.valueを設定することで指定した値を最初っから選択済みにすることもできます。

onChangeメソッドの使い方はTextRow()メソッドと同じです。

全体のコードは以下です。

//ViewController.swift
import UIKit
import Eureka


class ViewController: FormViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
  
        form +++ Section()
            <<< TextRow("Name"){
                $0.title = "名前を入力"
                $0.placeholder = "ここに書いてね"
                }.onChange{row in
        
                    let userDefault = NSUserDefaults.standardUserDefaults()
                    userDefault.setValue(row.value, forKey: "Name")
                
                }
            <<< SegmentedRow<String>("sex"){
                $0.options = ["男", "女"]
                $0.title = "性別"
                $0.value = "男"
                }.onChange{ row in
                    let userDefault = NSUserDefaults.standardUserDefaults()
                    userDefault.setValue(row.value, forKey: "Sex")
        }
    }
}

実行するとこんな画面になります。

まとめ

Eurekaの使い方をまとめました。
Eurekaはとっても少ない記述でフォームを作れる使いこなせれば、作業効率が格段に上がるでしょう。
ただ、クロージャーを使って、セルの設定をしていくので、なれないと上手く使いこなせないかもしれません。

もっと気になる方は公式の方でサンプルプロジェクトが公開されています。
ここを見てもっと深い使い方を研究するのもいいかもしれません。

Eureka Github