OnboardでiOSアプリのウォークスルー画面を簡単に実装

アプリ起動後、ユーザーにスワイプしてもらいながら特徴や使い方を説明していく画面（ウォークスルー）を実装したいことがある。
そんなときにOnboardというライブラリが便利だった。

[mamaral/Onboard](https://github.com/mamaral/Onboard)

※ウォークスルーの説明に関しては以下の記事などが参考になる

* [UIの学習のために生まれたUI | Reflection | UIデザイン会社Standard Incのブログ](http://www.standardinc.jp/reflection/article/ui-was-born-for-learning-the-ui/)
* [UIデザイナー必見！ アプリの導入画面で使われる主な４つの手法 | hajipion.com](http://hajipion.com/1358.html)

## 試した環境
* Xcode 7.2
* Onboard 2.1.7

CocoaPodsで普通にインストール。

```rb:Podfile
platform :ios, '9.0'
use_frameworks!

pod "Onboard"
```

## 実装
`OnboardingViewController`というベースとなるViewControllerに、各ページのコンテンツ(`OnboardingContentViewController`)をプロパティとしてセットする。

`AppDelegate.swift`に直接書いていく。

```swift:AppDelegate.swift
import UIKit
import Onboard

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        
        if true {
            let content1 = OnboardingContentViewController(
                title: "Title1",
                body: "Body1",
                image: nil,
                buttonText: "",
                action: nil
            )
            let content2 = OnboardingContentViewController(
                title: "Title2",
                body: "Body2",
                image: nil,
                buttonText: "",
                action: nil
            )
            let content3 = OnboardingContentViewController(
                title: "Title3",
                body: "Body3",
                image: nil,
                buttonText: "ログイン",
                action: {
                    let alert = UIAlertController(
                        title: "ログイン",
                        message: "ログインしました",
                        preferredStyle: .Alert
                    )
                    let ok = UIAlertAction(
                        title: "OK",
                        style: .Default,
                        handler: nil
                    )
                    alert.addAction(ok)
                    application.keyWindow?.rootViewController?.presentViewController(alert, 
                        animated: true, 
                        completion: nil
                    )
                }
            )
            
            let bgImageURL = NSURL(string: "https://www.pakutaso.com/shared/img/thumb/KAZ_hugyftdrftyg_TP_V.jpg")!
            let bgImage = UIImage(data: NSData(contentsOfURL: bgImageURL)!)
            let vc = OnboardingViewController(
                backgroundImage: bgImage,
                contents: [content1, content2, content3]
            )
            vc.allowSkipping = true
            vc.skipHandler = { _ in
                print("skip")
            }
            
            window?.rootViewController = vc
            
            return true
        }
        
        return true
    }

}
```

先述したとおり、`OnboardingContentViewController`のインスタンスが、ウォークスルーの各ページのコンテンツを示す。

`init`時に指定するのは、

* ページのタイトル
* ページの本文
* 画像
* ボタン
* ボタンをタップした時のアクション

の5つ。3つめのコンテンツのみ、ボタンとボタンタップ時のアクションを追加してみた。

特に自分で追加しない限りコンテンツの種類は上記の5種類のみだが、コンテンツ間のマージンやフォントサイズは調整ができる。[README](https://github.com/mamaral/Onboard#customization)参照。

---

`OnboardingViewController`の`init`時に、上記の3つのコンテンツをセットしてインスタンス(`vc`という変数の部分)を生成する。ウォークスルー全体を通しての背景画像も一緒に設定する。

`OnboardingViewController`もプロパティを持っている。
上記のサンプルコードでは、`allowSkipping`を`true`にすることで、「Skip」ボタンを表示。
（`skipButton`という名前で`UIButton`が取得できるので、名前などはもちろん変更可能）
また、`skipHandler`のブロックで、上記のボタンをタップした時のアクションを記述できる。

他にもいくつかプロパティはあるので、ヘッダファイルなどを参照。
https://github.com/mamaral/Onboard/blob/master/Source/OnboardingViewController.h

## 完成
というわけで簡単にウォークスルーっぽいのが実装できた

![walkthrough-sample.gif](https://qiita-image-store.s3.amazonaws.com/0/1795/53dd1de7-6c7a-b347-7f47-49c35c11279d.gif)