さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね><

とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。

js_logo

さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チュートリアルの出てくる向きを指定したかったら data-position も指定できます (デフォルトは bottom が設定されてる) 。

取ってきたIntro.jsとIntrojs.cssを読み込んであげて(執筆時点でのバージョンはv0.4.0)、あとは data-intro とか data-step を指定してあげるだけ。

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

<img data-intro="これがささたつです" data-step="1" src="/path/to/sasata299.png" />

あとはひょひょいと起動してあげるだけです。例えば #demo_introjs っていうID要素をクリックしたときに起動させたかったらこんな感じ。

jQuery(function($){
  $('body').on('click', '#demo_introjs', function(){
    introJs().start();
  });
});

お手軽なのにすごく便利だと思うのです。まぁとりあえず動作デモをご覧ください。






他にも、ステップからステップに移動するときに処理を挟んだり (onchange) 、チュートリアルが完了したときに処理を挟んだりと色んなことが出来ます (oncomplete) 。便利なのでぜひ使ってみると良いかと思います!

詳しくはこちら つ usablica/intro.js ・ GitHub
このエントリーをはてなブックマークに追加