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

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

mamaral/Onboard

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

• UIの学習のために生まれたUI | Reflection | UIデザイン会社Standard Incのブログ
• UIデザイナー必見！ アプリの導入画面で使われる主な４つの手法 | hajipion.com

試した環境

• Xcode 7.2
• Onboard 2.1.7

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

Podfile

platform :ios, '9.0'
use_frameworks!

pod "Onboard"

実装

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

AppDelegate.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参照。

---

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

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

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

完成

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