[Android Tips] コーチマークを簡単作成!ShowcaseView ライブラリを使ってみた

[Android Tips] コーチマークを簡単作成!ShowcaseView ライブラリを使ってみた

Clock Icon2014.01.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

コーチマークを作ってアプリを分かりやすくしよう

スマホアプリの操作を分かりやすくするのって難しいですよね。直感的に使えるようにユーザビリティに配慮した UI を設計することももちろん必要ですけど、 どうしても説明を挟まないといけない場面もあると思います。

そんなときに活躍するのがコーチマークです。アプリに操作説明を挟みたいときによく使われる手法で、アプリの UI にオーバーレイで重ねて矢印とか説明文とか入れて使いかたを分かりやすく説明します。以下のような感じです(リンク先は iOS アプリのコーチマークのデザインですが)。

http://inspired-ui.com/tagged/coach_marks

iOSはこちらにあるようにいろいろライブラリがありますが、Android はどうなんだろーと調べてみたら ShowcaseView というライブラリを見つけたので、ちょっと使ってみました。Android 4.0のアプリ一覧で出てくるアレに似ているやつです。

https://github.com/amlcurran/ShowcaseView

showcase02

コーチマークを表示してみる!

まずは普通に使ってみる

ライブラリのインポートは github から clone して Eclipse や Android Studio にインポートする、いつもどおりの手順で OK です。動作には nineoldandroid ライブラリが必須ですが、jar ファイルが同梱されているのでそのまま使えます。

showcase01

ちなみにサンプルアプリも同梱されていますが、このサンプルアプリは ActionBarSherlock ライブラリを使っているので、サンプルアプリを動かしたい場合は ActionBarSherlock をインポートしてください。SupportPackageのバージョン違いでエラーが出る場合はすべてのプロジェクトの android-support-v4.jar を最新化すると直ります。

では早速使ってみます。適当なプロジェクトをデフォルト設定で作成し、ライブラリをインポートし、MainActivity.javaonCreate() で以下のコードを書きます。

ViewTarget target = new ViewTarget(R.id.button, this);
ShowcaseView sc = ShowcaseView.insertShowcaseView(target, this, "タイトル", "メッセージ");

たったこれだけで表示できます。超簡単ですね!

showcase02

ビルド時に Eclipse が OutOfMemory で固まってしまう場合、ShowcaseView の libs の Roboelectric ライブラリを削除してください。筆者、これでハマりました……… https://github.com/amlcurran/ShowcaseView/issues/108

ActionBar の MenuItem をターゲットにしてみる

続いて ActionBar の MenuItem に対してコーチマークを付けてみます。ちなみに以下は ActionBarSherlock を使った場合の実装です。

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getSupportMenuInflater().inflate(R.menu.main, menu);
    ActionItemTarget target = new ActionItemTarget(this, R.id.action_settings);
    ShowcaseView.insertShowcaseView(target, this, "タイトル", "メッセージ");
    return super.onCreateOptionsMenu(menu);
}

ちゃんと表示できました!ちなみに ActionItemTarget クラスを使っていますが、これは ActionBar のアイテムが表示されていない状態 (android:showAsAction="never" とか) だと NullPointerException で落ちるのでご注意。ホームボタンやタイトルに付けたい場合は ActionViewTarget クラスを使います。

showcase03

showcase04

ちなみに ActionBarActivity で試した場合も問題なく表示できました(タイトルとアイテムだけ試してます)。

showcase06

showcase07

AlertDialog の View をターゲットにしてみる

お次は AlertDialog に置いてある View に対してコーチマークを付けてみます。どうなるこうなる。

public class SampleAlertDialogFragment extends DialogFragment {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setTitle("テスト");
        
        View view = View.inflate(getActivity(), R.layout.activity_main, null);
        builder.setView(view);
        
        ViewTarget target = new ViewTarget(view.findViewById(R.id.button));
        ShowcaseView.insertShowcaseView(target, getActivity(), "タイトル", "メッセージ");
        
        return builder.create();
    }
}

showcase05

あー。AlertDialog の後ろに出てしまいました。Activity の Window に重ねてるんでしょうかね。解決法あったらコメント欄で教えて下さい!

カスタマイズ

色とか円の大きさとかカスタマイズできます。

色のカスタマイズ

色はスタイルをあててあげると変わります。

<resources>

    <style name="AppTheme" parent="@style/Theme.AppCompat.Light">
        <item name="showcaseViewStyle">@style/CustomShowcaseTheme</item>
    </style>
    
        <style name="CustomShowcaseTheme" parent="ShowcaseView.Light">
        <item name="sv_backgroundColor">#3300A621</item>
        <item name="sv_showcaseColor">#00801A</item>
        <item name="sv_buttonText">Close</item>
        <item name="sv_titleTextAppearance">@style/CustomTitle</item>
    </style>

    <style name="CustomTitle" parent="TextAppearance.ShowcaseView.Title">
        <item name="android:textColor">#00801A</item>
    </style>

</resources>

showcase08

円の大きさのカスタマイズ

円は Java ソースコードから変えることができます。

ShowcaseViews views = new ShowcaseViews(this);
        ShowcaseViews.ItemViewProperties properties = 
                new ShowcaseViews.ItemViewProperties(
                        R.id.button, android.R.string.ok, android.R.string.ok, 0.5f);
        views.addView(properties);
        views.show();

showcase09

ちなみに上記のソースコードを見て分かる通り、一つの Showcase に複数の View をぶら下げることができます。その場合、OK ボタンを押したら次の View にコーチマークを表示する…といったようなアニメーションを付けてくれます。順番に手順を踏ませたいときに便利ですね!

まとめ

ということで、簡単にコーチマークを追加できるライブラリの紹介でした。「アプリの操作がちょっと分かりづらいかも…」とお悩みの場合はぜひ使ってみましょう!

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.