Web サイトの動くチュートリアルを簡単に実装する方法 ( intro.js )

この記事では、 Web サイトの動くチュートリアルを簡単に実装する方法を紹介する。

実際に導入したチュートリアルページは monopocket.jp のチュートリアル にて。

この動くチュートリアルは Intro.js という JavaScript ライブラリを用いることで簡単に実装することができる。MIT ライセンスなので、比較的自由に使えるのも嬉しいポイント。

Intro.js

Intro.js で動くチュートリアルを作る手順

Intro.js を使って動くチュートリアルを作る手順を以下に説明する。主な手順は以下の通り。

1. 必要なファイル(intro.js と introjs.css)のダウンロード。
2. 動くチュートリアルを設定したいページで 1 でダウンロードしたファイルを読み込む。
3. 動くチュートリアルを設定したい HTML タグに data-intro 属性と data-step 属性を挿入。
4. チュートリアルをスタートするための関数を呼ぶ。

以下に順を追って説明する。

1. 必要なファイル(intro.js と introjs.css)のダウンロード

ダウンロードは Github にて。git コマンドが使える場合には、git clone するのが一番早いはず。
Intro.js – Github

(git コマンドが使えない場合には、intro.jsintrojs.css をコピーし、保存。)

2. 動くチュートリアルを設定したいページで 1 でダウンロードしたファイルを読み込む

チュートリアルを設定したいページの head タグ内で以下を記述。それぞれのパスは自分が設置したパスを指定。(

js, css ファイルの読み込み | HTML

<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">

3. 動くチュートリアルを設定したい HTML タグに data-intro 属性と data-step 属性を挿入

チュートリアルを設定したい HTML タグに data-intro 属性と data-step 属性を挿入する。

data-intro 属性内の文字がチュートリアル時に説明文として流れる。data-step 属性内には数字を挿入する。これはチュートリアルの順番になる。数字の小さい方から実行される。

以下の例では、

1. これが記事です
2. これが記事のタイトルです
3. これが記事の内容です

の順にチュートリアルが進む。

HTML タグに data-intro, data-step 属性を挿入 | HTML

<div data-intro="これが記事です" data-step="1">
 <h1 data-intro="これが記事のタイトルです" data-step="2">チュートリアルの作り方</h1>
 <div data-intro="これが記事の内容です" data-step="3">
  <p>Intro.js を使います。</p>
  <p>チュートリアルが簡単に実装できる。</p>
  <p>設定方法は以下に~~~</p>
 </div>
</div>

4. 動くチュートリアルをスタートするための関数を呼ぶ。

introJs().start() 関数を呼ぶ。今回は簡単のために button タグに仕込んで、ボタンクリック時にチュートリアルが始まるように設定してみる。

チュートリアルスタートのための関数を呼ぶ | HTML

<button onClick="introJs().start()">チュートリアルスタート</button>

以上で動くチュートリアルの完成。

動くチュートリアルの完成形 (HTML のみ)

一応全てまとめた HTML ファイルのサンプルを以下に記述しておく。title タグなど、今回関係ないタグは除いた。

動くチュートリアルの完成形 | HTML

<html>
<head>
<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">
</head>
<body>
<div data-intro="これが記事です" data-step="1">
 <h1 data-intro="これが記事のタイトルです" data-step="2">チュートリアルの作り方</h1>
 <div data-intro="これが記事の内容です" data-step="3">
  <p>Intro.js を使います。</p>
  <p>チュートリアルが簡単に実装できる。</p>
  <p>設定方法は以下に~~~</p>
 </div>
</div>
<button onClick="introJs().start()">チュートリアルスタート</button>
</body>
</html>

[ 補足 ] JavaScript ファイル内で設定する場合

上記の方法は簡単のために、できる限り HTML を用いたが、JavaScript ファイル内で処理したほうがいい場合もある。PHP で全てのページを同じように動的に生成している場合など、data 属性が全てのページに書かれるのは、非効率である。

当サイトも WordPress で作成しているため、js ファイルを一つ用意して、その中の jQuery の処理で上記の全ての処理を行った。

具体的には、以下の jQuery のコードを書けば良い。

1. data-intro、data-step 属性を設定する。(関連記事:jQuery で data 属性を動的に設定・取得する方法
2. button が押された時に introJs().start() を呼ぶ。(この場合、HTML で button に id などを設定しておいたほうが良い。)

一部を以下に記述しておく。

jQuery で intro.js の各種設定

$(function () {
  $('div#nav ul').attr({
    'data-intro': 'monopocket のメニューです。',
    'data-step': 1
  });
  // 省略
  $('body').on('click', '#start-introjs', function(){
    introJs().start();
  });
});

実際のチュートリアルはこちら

関連記事

monopocket.jp のチュートリアル
HTMLでJavaScriptファイルを読み込む方法
HTMLからCSSファイルを呼び出す方法

コメント

  • 残念ながら今はMITライセンスではないようで、商用利用についてはサブスクリプションが必要なようです。

    2016年6月23日 12:49 AM| 匿名

  • […] 実装する上で参考になる記事:Web サイトの動くチュートリアルを簡単に実装する方法 ( intro.js ) | monopoc… […]

    2013年12月19日 8:06 AM| 2013年のベストjQueryプラグイン47 | co-jin

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/javascript/2339/trackback/