読者です 読者をやめる 読者になる 読者になる

シアトルコンサルティング サービス開発ブログ

シアトルコンサルティング株式会社プロダクトソリューション事業部の開発ブログです

サイト上で動作するチュートリアルは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の実行イメージ
今回の場合、実行ボタンをクリックすることでチュートリアルが表示されます。
f:id:seattleservice:20130514224805p:plain


Nextをクリックすることで次の説明に、Backをクリックすることで前の説明に戻ることが出来ます。
f:id:seattleservice:20130514224806p:plain

f:id:seattleservice:20130514224807p:plain


いかがでしたか?
またそのうちIntro.jsの応用編について書きたいと思います。

*1:data-intro属性…チュートリアルで表示したい説明文を指定する

*2:data-step属性…対象モジュールをチュートリアルの何番目に表示するかを指定する