サイト上で動作するチュートリアルはIntro.jsで簡単作成！(入門編)
こんにちは iijmyaです。
今回は、自分が作成したサイトなどを説明するときに、堅苦しい説明書きを作らなくても視覚的にわかりやすく説明することができる救世主、「Intro.js」をご紹介します。
■ Intro.jsのダウンロード
Intro.jsは公式サイトからダウンロードすることができます。
■ Intro.jsの利用
それでは早速Intro.jsを使ってみましょう。
Intro.jsはダウンロードしてきた「intro.js」と「introjs.css」を読み込むことで使用することが出来ます。
HTML内にJavaScriptのコードを記述すると文字化けしてしまうことがあるため、charsetで文字コードも指定しておきます。
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/intro.js/0.2.1/intro.min.js" charset="utf-8"> </script>
次に、チュートリアルの対象にしたいモジュールに対し、data-intro属性*1とdata-step属性*2 を指定します。
<h2 data-step="1" data-intro="ここがタイトル部分です">intro.jsの利用</h2>
あとはIntro.jsを起動するモジュールを置き、イベント発生時の処理でIntro.jsを起動してあげれば終了です。
<button id="sampleIntrojsBtn">実 行</button>
〜中略〜
jQuery(function($){
$('#sampleIntrojsBtn').on('click', function(){
introJs().start();
});
});
■ Intro.jsの実行イメージ
今回の場合、実行ボタンをクリックすることでチュートリアルが表示されます。
Nextをクリックすることで次の説明に、Backをクリックすることで前の説明に戻ることが出来ます。
いかがでしたか？
またそのうちIntro.jsの応用編について書きたいと思います。
