[iOS] iPhoneアプリの初回起動時に表示したい「おもてなし」ライブラリ4選 | アドカレ2013 : SP #10

はじめに

アプリの初回起動時に「導入画面」を表示するアプリをよく見かけるようになりました。導入画面にはウォークスルー(図1)やコーチマーク(図2)等がありますが、このような画面を簡単に追加できる便利なライブラリを集めてみました。

図1 ウォークスルー	図2 コーチマーク

ウォークスルー

「ウォークスルー」は、「アプリでできること」「アプリの特徴」「アプリのコンセプト」などの説明を初回起動時に表示する画面です。アプリを使う前にウォークスルー画面を通るようにできるので、ストアの説明文をよく読んでいないユーザーなどにも改めてアプリの特徴などを説明することができます。
初回起動時だけではなく、アップデートで新機能を追加した場合に新機能の説明を表示するという使い方もできます。

EAIntroView

EAIntroViewはウォークスルー画面を簡単に追加できるライブラリです。
ウォークスルー画面のページの数だけEAIntroPageインスタンスを作成します。作成したEAIntroPageインスタンスを使ってEAIntroViewインスタンスを作成し、表示したいViewに追加することでウォークスルー画面を表示できます。 表示が終了した時やページをめくった時はdelegate経由で知らせてもらえます。
ウォークスルーの1ページを構成するEAIntroPageインスタンスは以下のようにいくつか作成方法があるみたいです。

• タイトル・文章・背景・タイトル画像を指定して作成
• UIViewからの作成
• Nibからの作成

GitHubからダウンロードできるサンプルプロジェクトは７種類のウォークスルーを確認できるようになっており、参考になるかと思います。

作成例

- (void)showIntroWithCrossDissolve {
    EAIntroPage *page1 = [EAIntroPage page];
    page1.title = @"Hello world";
    page1.desc = @"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    page1.bgImage = [UIImage imageNamed:@"bg1"];
    page1.titleImage = [UIImage imageNamed:@"title1"];
    
    EAIntroPage *page2 = [EAIntroPage page];
    page2.title = @"This is page 2";
    page2.desc = @"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.";

    page2.bgImage = [UIImage imageNamed:@"bg2"];
    page2.titleImage = [UIImage imageNamed:@"title2"];
    
    EAIntroPage *page3 = [EAIntroPage page];
    page3.title = @"This is page 3";
    page3.desc = @"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.";
    page3.bgImage = [UIImage imageNamed:@"bg3"];
    page3.titleImage = [UIImage imageNamed:@"title3"];
    
    EAIntroPage *page4 = [EAIntroPage page];
    page4.title = @"This is page 4";
    page4.desc = @"Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.";
    page4.bgImage = [UIImage imageNamed:@"bg4"];
    page4.titleImage = [UIImage imageNamed:@"title4"];
    
    EAIntroView *intro = [[EAIntroView alloc] initWithFrame:rootView.bounds andPages:@[page1,page2,page3,page4]];
    [intro setDelegate:self];
    
    [intro showInView:rootView animateDuration:0.3];
}

その他のウォークスルー画面ライブラリ

• MYBlurIntroductionView
• Jazz Hands
• AOTutorial - Out of the box tutorial
• ICETutorial
• LAWalkthrough
• Path-Intro-iPhone

コーチマーク

「コーチマーク」は、UIの役割や操作の解説を実際の画面にオーバーレイ表示させる画面です。初回起動時にトップ画面のUIをコーチマークで解説しているアプリをよく見かけます。

WSCoachMarksView for iOS

「WSCoachMarksView for iOS」は少しのコード追加するだけで「コーチマーク」を簡単に追加できるライブラリです。

CGRect(強調する部分の位置とサイズ)とNSString(説明文)を格納したNSDictionaryをNSArrayに格納します。そのNSArrayを使ってWSCoachMarksViewインスタンスを作成し、viewに追加することで表示できます。コーチマークの表示終了などはDelegate経由で知らせてもらえます。

作成例

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    // Setup coach marks
    NSArray *coachMarks = @[
                            @{
                                @"rect": [NSValue valueWithCGRect:(CGRect){{70,300},{50,30}}],
                                @"caption": @"このボタンをタップすると再生できます。"
                                },
                            @{
                                @"rect": [NSValue valueWithCGRect:(CGRect){{190,300},{50,30}}],
                                @"caption": @"このボタンをタップすると停止できます。"
                                },
                            @{
                                @"rect": [NSValue valueWithCGRect:(CGRect){{10,450},{300,40}}],
                                @"caption": @"このUIを使ってボリュームを調整出来ます。"
                                }
                            ];
    WSCoachMarksView *coachMarksView = [[WSCoachMarksView alloc] initWithFrame:self.view.bounds coachMarks:coachMarks];
    [self.view addSubview:coachMarksView];
    [coachMarksView start];
}

その他のコーチマーク画面表示ライブラリ

• EMHint

リリースノート画面

iOS 7からアプリの自動更新を利用できるようになり、ユーザー視点では便利になりました。しかし、これは、更新情報(What's New in this Version)を見ないユーザーが増えてしまうということでもあります。必要に応じて、アップデート後の初回起動時に更新情報を表示したほうがいいのかもしれません。

TWSReleaseNotesView

TWSReleaseNotesViewを使うことで簡単にリリースノート画面を表示させることができます。
主な特徴は以下の３点です。CFBundleVersionをNSUserDefaultsに保存し、それを使って判別するようです。リリースノートをAppStoreから引っ張ってこれるのは便利ですね。

• 「そのバージョンでの初回起動かどうか」「アプリがアップデートされたか」を判別可能。
• アプリ内に埋め込んだテキストを使用してリリースノートを表示できる。
• iTunes Search APIを使ってAppStoreから最新のリリースノートを取得し表示できる。

その他

RMStepsController

RMStepsControllerを使うと、「段階的にユーザーをガイドする画面」を簡単に作成できます。
横にスライドする動きはウォークスルーと同じですが、全ステップ数と現在のページ番号が強調されています。
初回起動時であれば、会員登録やログイン用の画面に使えそうです。初回起動時でなくても商品の購入やSNSへの投稿の画面などにも使うことができそうです。

実装手順は以下の通りで、RMStepsControllerのサブクラスを作成し、「表示するViewControllerを格納した配列を返すメソッド」と「表示終了時／キャンセル時によばれるメソッド」を実装するだけで段階的なガイド画面を表示できるようです。

1. Create a subclass of RMStepsController in your project.
2. Implement -(NSArray *)stepViewControllers and return the view controllers of your steps.
3. Implement -(void)finishedAllSteps and -(void)canceled

まとめ

今回紹介したライブラリを使って作成できる「導入画面」は必ず表示する必要があるわけではないですが、必要に応じて活用し、ユーザーがスムーズにアプリを操作できるようにしたいですね。

参考情報

• スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン