EAIntroViewで開発中のiOSアプリに演出を加えよう！

こんにちは！にーさん(@ni_san2000)です。 iOSに関する記事が全然なかったので、今回は書いていこうと思います。

f:id:ni_san2000:20180801001136p:plain — はじめまして！

[対象読者]

iOSアプリを作ってる人(特に、リリース間近 or リリースした人)

[概要]

初回起動時の画面を作って、ユーザーにアプリを期待させましょう

アプリのユーザー体験を向上させるには？

Appleのヒューマンインターフェースガイドラインにも書かれている通り、Appleはユーザー体験を重視しています。アプリをインストールしてから使ってもらい、終了するまでの流れの中で様々なユーザー体験を向上させる工夫をする必要がありますね。

今皆さんがアプリを開発する中で、ローディング画面や読み込み中に表示するプレースホルダーを実装することは結構多いのではと思います。

f:id:ni_san2000:20180731215006p:plain — プレースホルダーとか読み込み画面とか

f:id:ni_san2000:20180731215008g:plain — プレースホルダーとか読み込み画面とか

ただ、ユーザー体験を向上させる要素はまだまだあり、その中でも初回起動時に出てくる「ようこそ画面」は、ユーザーに「これから使うアプリを期待させる」意味でも大事な機能になってきます。

f:id:ni_san2000:20180802035112p:plain — 過去に作ったようこそ画面の例

なので、今回はアプリの初回起動時に出てくる「ようこそ画面」（ウォークスルー）をアプリに導入してみましょう！

今回はこのライブラリを使用します。

github.com

Objective-Cの頃からある古株のライブラリですね。僕は昔から使っていて、お気に入りです。使い方はリポジトリのREADME.mdにありますが、今や過去になりつつあるObjective-Cでしか書かれてないです。今回はSwiftで実装してみます。

導入方法

EAIntroViewのインストール

今回は動作を確認するだけなので、超シンプルに作ります。
Xcodeで新規作成して、「Single View Application」にでもしましょう。

EAIntroViewはCocoaPodsから持ってこれるので、Podfileを書いてインストールします。
CocoaPodsは様々なiOS関連のライブラリが公開されているので、簡単に自分のプロジェクトに導入できちゃいます。Railsでいうgemみたいな役割のやつです。

プロジェクトフォルダ直下でpod initして出来たPodfileを編集してpod installです。Podfileはこんな感じです。

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'EAIntro_swift' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for EAIntro_swift
  pod 'EAIntroView' # ここに追加！

  target 'EAIntro_swiftTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'EAIntro_swiftUITests' do
    inherit! :search_paths
    # Pods for testing
  end

end

pod installしたら一度閉じて{プロジェクト名}.xcworkspaceから開くのを忘れずに。

実装

EAIntroView自体すっごいシンプルなので、1つの.swiftファイルだけで完結します。ここまできたら実装完了まであと5分です。

全体的な流れとしては、
① 背景用の画像を追加
② 各ページを作成(テキストなど)
③ 全ページをくっつけて動作！
になります。

まず、背景用の画像をプロジェクトに入れてあげましょう。こんな感じになればOK。

f:id:ni_san2000:20180731232827p:plain — resourcesってディレクトリに画像を入れておきます

そしたら導入したい.swiftファイル(例：ViewController.swift)にimportしてあげます。デリゲートも忘れずにつけましょう。

import UIKit
import EAIntroView

class ViewController: UIViewController, EAIntroDelegate {

各ページはEAIntroPageというクラスがあるので、それで作りましょう。
変数に.titleとか.descとかありますので、書き加えるだけです！

ここでいうpage1.bgImageで背景画像を指定します。後ろのnamed: "bg1"はファイル名ですね。

let page1 = EAIntroPage()
page1.title = "はじめまして！"
page1.desc = "インストールありがとうございます！"
page1.bgImage = UIImage(named: "bg1")

もう2つ作っちゃいましょう。

let page2 = EAIntroPage()
page2.title = "おすろてっく"
page2.desc = "月1~2のペースで勉強会を開いています。"
page2.bgImage = UIImage(named: "bg2")

let page3 = EAIntroPage()
page3.title = "ブログもよろしく！"
page3.desc = "真面目な記事が多いけどそろそろネタ記事書いてくれる人いないかな･･･"
page3.bgImage = UIImage(named: "bg3")
page3.titleFont = UIFont(name: "Helvetica-Bold", size: 32)
page3.titleColor = UIColor.orange
page3.descPositionY = self.view.bounds.size.height/2

EAIntroPageクラスにはこのほかにも色々設定できる項目があるので要チェックです〜

最後に、この3つのページをくっつけます！
EAIntroViewってクラスがあるので、さっき作った3つのページで初期化します。

let introView = EAIntroView(frame: self.view.bounds, andPages: [page1, page2, page3])
introView?.skipButton.setTitle("スキップ", for: UIControlState.normal) //スキップボタン欲しいならここで実装！
introView?.delegate = self
introView?.show(in: self.view, animateDuration: 1.0)