アプリにオンボーディング(アプリの紹介)を実装しよう

オンボーディングとは？

簡単にいうとプロモーションのようにアプリの機能などを紹介するものです。アプリをダウンロード、アップデートをして初めて開いたときに

• こういう機能がありますよ！
• プロフィール写真を登録しよう！
• 通知を受け取ろう！

などの画面が表示されたことがあると思いますが、それがいわゆるオンボーディング(onboarding)です。
この画面や工程を踏むことでユーザにアプリの魅力や使い方を伝え、より多くのユーザに定着させることができます。

ここではその実装方法を簡単ではありますが紹介したいと思います。

実装(基本編)

まずはざっくりとイメージしてください。アプリを起動し、もしオンボーディング画面を表示する必要があればその画面を表示、なければ通常の画面を表示になると思います。

AppDelegate.swift

class AppDelegate: UIResponder, UIApplicationDelegate {

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions:
 [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

  if UserDefaults.standart.shouldDisplayOnboarding {
    // onboardingの画面に移動
    self.window?.rootViewController = OnboardingViewController()
    self.window?.makeKeyAndVisible()
  }
  return true
}

オンボーディングを表示するべきかどうか変数として保持し、アプリ全体で利用する可能性も考えるとUserDefaultsに保存するのがいいのではないでしょうか。以下のような実装を行えばその呼び出しや書き込みもスムーズだと思います。

UserDefaults+Extensions.swift

import UIKit

private struct UserDefaultsKey {
  static let shouldDisplayOnboarding = "com.hogehoge.shouldDisplayOnboarding"
}

extension UserDefaults {
  var shouldDisplayOnboarding: Bool {
    get { return !self.bool(forKey: UserDefaultsKey.shouldDisplayOnboarding) }
    set { self.set(!newValue, forKey: UserDefaultsKey.shouldDisplayOnboarding) }
  }
}

あとはオンボーディングの終了時に以下のように判定値を変更してあげればオンボーディングの実装が完了します。

  UserDefaults.standard.shouldDisplayOnboarding = false

実装(応用編)

オンボーディングは多くの場合、複数の画面を用意し、それを横にスクロールしながら進めていくものが多い気がします。となると、基本編のようにAppDelegateでrootViewControllerにOnboardingViewController画面をセットするだけでは終わらないかと思われます。ここからはその対処処法の例を紹介しようと思います。
Onboardingをそのものを管理するOnboardingControllerを作成し、Onboardingでの画面の生成は表示を任せれば良い。オンボーディングが終了した時の処理は呼び出し元で実装を行うようにする。

AppDelegate.swift

class AppDelegate: UIResponder, UIApplicationDelegate {

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions:
 [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

  if UserDefaults.standart.shouldDisplayOnboarding {
    // onboardingの画面に移動
    let onboardingController = OnboardingController()
    onboardingController.beginOnboarding(window: self.window!, {
      // ここでonboardingが完了した時の処理を書く. 
      // ここではTopViewControllerを表示するように実装している。
      self.window?.rootViewController = TopViewController()
      self.window?.makeKeyAndVisible()
    }
  }
  return true
}

OnboardingController.swift

final class OnboardingController {
  typeAlias ComplitionHandler = () -> Void

  lazy var pageViewController: UIPageViewController = {
    let pageViewController = UIPageViewController()
    // pageViewControllerの実装
    return pageViewController 
  }()

  var handler: ComplitionHandler?

  func beginOnboarding(window: UIWindow, complition: () -> Void) {
    self.handler = complition
    window.rootViewController = self.pageViewController
    window.makeKeyAndVisible()
  }

  private func endOnboarding() {
    self.handler?()
  }
}

参考文献

直接的なコードの利用はないが、ベースの設計は以下のソースを元に考案した。
https://github.com/google/iosched-ios