サイトに手軽にステップ式チュートリアル案内を出せる「Intro.js」

サイトの案内をわかりやすく表示するために、チュートリアルのTips案内みたいなものを出すものがないかと探してみたら、「Intro.js」というのを発見しました。

これが、ちょっとしたコードをサイトに埋め込むだけで、手軽にチュートリアルインターフェースを利用できるので、紹介です。

スポンサーリンク
レクタングル(大)広告

Intro.jsとは

Intro.js

Intro.jsは、手軽にステップごとの案内画面を作成できる、jQueryライブラリです。

数行のコードをサイトに埋め込むだけで、以下のように周囲が暗色となったチュートリアルTipsを表示させることができます。

案内画面1

このIntro.jsは、ステップ方式になっており、「next→」ボタンを押すと、次のステップとなる要素をチュートリアル表示してくれます。

案内画面2

最後のステップに移ると、「Done」が表示され終了となります。

案内画面3

表示させるのに、スクロールが必要な場合は、勝手にスクロールして表示してくれます。

Intro.jsを利用の主な手順

Intro.jsを利用するには、主に以下の手順が必要です。

  1. Intro.jsファイルのダウンロード&設置
  2. Intro.jsライブラリを呼び出す
  3. Intro.js実行コードを記入する
  4. チュートリアルを出す要素を記入する

3のチュートリアルを出せるようにする準備までなら、数分でできるくらい簡単です。

以下は、WordpressにIntro.jsを設置する方法の紹介です。(Wordpressで使用する機会は、そうないかもしれませんが。)

Intro.jsファイルのダウンロード&設置

まずは、Tags · usablica/intro.js · GitHubから、最新版のzipファイルをダウンロードしてください。

Tags · usablica-intro.js · GitHub

ダウンロード後、ファイルを解凍して、Wordpressテーマフォルダ直下に以下のように設置します。

  • introjs.css → css/introjs.css
  • intro.js → js/intro.js

以下では、Wordpress子テーマフォルダ内に上記のように設置したとして説明します。

Intro.jsライブラリを呼び出す

まずは、Intro.jsの動作に必要なファイルを呼び出します。

子テーマの場合は、<head></head>内に以下のように記入します。

親テーマを直接カスタマイズする場合は、コメント部分を外して利用してください。

Intro.js実行コードを記入する

次に、Intro.jsを呼び出す実行コードとなるjQueryを記入します。

記入する場所は、フッター部分の</body>タグ手前あたりに以下のようなコードを貼り付けます。

ボタンなどをクリックした時に実行する場合。

ページ読み込みと同時に実行する場合。

呼び出すタイミングは、jQueryのイベントで合ったものを探して設定してください。

チュートリアルを出す要素を記入する

チュートリアル表示させる要素は、以下のように設定します。

チュートリアルTipsを表示したいHTML要素に「data-intro」と「data-step」属性を設定します。

  • data-intro:チュートリアルの説明を記入する
  • data-step:チュートリアルを出す順番を記入する

あとは、ボタンのクリックイベントで実行する場合は、以下のようにボタンのHTMLを記入します。

こんな感じで設定は完了です。

動作確認

最後に、実際にIntro.jsを使って、これまでの、手順を振り返ってみます。

以下のボタンを押してください。

まとめ

こんな感じで、手軽にチュートリアル案内を設置することができます。

WordPressで、利用する場面もそうないとは思いますが、WEBサービスのスタートアップ時の案内などには良さそうです。

原因は、ちょっとわからなかったんですけど、チュートリアルが集中選択する要素がずれてしまうことがあるので注意。