サイトの案内をわかりやすく表示するために、チュートリアルのTips案内みたいなものを出すものがないかと探してみたら、「Intro.js」というのを発見しました。
これが、ちょっとしたコードをサイトに埋め込むだけで、手軽にチュートリアルインターフェースを利用できるので、紹介です。
目次
Intro.jsとは
Intro.jsは、手軽にステップごとの案内画面を作成できる、jQueryライブラリです。
数行のコードをサイトに埋め込むだけで、以下のように周囲が暗色となったチュートリアルTipsを表示させることができます。
このIntro.jsは、ステップ方式になっており、「next→」ボタンを押すと、次のステップとなる要素をチュートリアル表示してくれます。
最後のステップに移ると、「Done」が表示され終了となります。
表示させるのに、スクロールが必要な場合は、勝手にスクロールして表示してくれます。
Intro.jsを利用の主な手順
Intro.jsを利用するには、主に以下の手順が必要です。
- Intro.jsファイルのダウンロード＆設置
- Intro.jsライブラリを呼び出す
- Intro.js実行コードを記入する
- チュートリアルを出す要素を記入する
3のチュートリアルを出せるようにする準備までなら、数分でできるくらい簡単です。
以下は、WordpressにIntro.jsを設置する方法の紹介です。（Wordpressで使用する機会は、そうないかもしれませんが。）
Intro.jsファイルのダウンロード＆設置
まずは、Tags · usablica/intro.js · GitHubから、最新版のzipファイルをダウンロードしてください。
ダウンロード後、ファイルを解凍して、Wordpressテーマフォルダ直下に以下のように設置します。
- introjs.css → css/introjs.css
- intro.js → js/intro.js
以下では、Wordpress子テーマフォルダ内に上記のように設置したとして説明します。
Intro.jsライブラリを呼び出す
まずは、Intro.jsの動作に必要なファイルを呼び出します。
子テーマの場合は、<head></head>内に以下のように記入します。
<!-- 子テーマで呼び出す場合 --> <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/introjs.css"> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/intro.js"></script> <!-- 親テーマで呼び出す場合 --> <!-- <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/introjs.css"> <script src="<?php echo get_template_directory_uri(); ?>/js/intro.js"></script> -->
親テーマを直接カスタマイズする場合は、コメント部分を外して利用してください。
Intro.js実行コードを記入する
次に、Intro.jsを呼び出す実行コードとなるjQueryを記入します。
記入する場所は、フッター部分の</body>タグ手前あたりに以下のようなコードを貼り付けます。
ボタンなどをクリックした時に実行する場合。
<script>
jQuery('#introjs').click(function(){
introJs().start();
});
</script>ページ読み込みと同時に実行する場合。
<script>
jQuery(function(){
introJs().start();
});
</script>呼び出すタイミングは、jQueryのイベントで合ったものを探して設定してください。
チュートリアルを出す要素を記入する
チュートリアル表示させる要素は、以下のように設定します。
<div data-intro="1番目の説明のためのテキストを入力。" data-step="1">1番目の要素</div> <div data-intro="2番目の説明のためのテキストを入力。" data-step="2">2番目の要素</div>
チュートリアルTipsを表示したいHTML要素に「data-intro」と「data-step」属性を設定します。
- data-intro：チュートリアルの説明を記入する
- data-step：チュートリアルを出す順番を記入する
あとは、ボタンのクリックイベントで実行する場合は、以下のようにボタンのHTMLを記入します。
<button id="introjs">チュートリアルスタート</button>
こんな感じで設定は完了です。
動作確認
最後に、実際にIntro.jsを使って、これまでの、手順を振り返ってみます。
以下のボタンを押してください。
まとめ
こんな感じで、手軽にチュートリアル案内を設置することができます。
WordPressで、利用する場面もそうないとは思いますが、WEBサービスのスタートアップ時の案内などには良さそうです。
原因は、ちょっとわからなかったんですけど、チュートリアルが集中選択する要素がずれてしまうことがあるので注意。
