サイトツアーの作成に軽量＆IE対応の「Intro.js」をおすすめする

サイトツアーを実現するJSライブラリに興味を持ったので10個以上を見てみた。で、Intro.jsがとても良かったので書いておく。

Intro.js

Intro.jsの特徴

外部ライブラリ読み込み不要

これとても重要。jQueryなり、Twitter Bootstrapなり読み込むとやっぱり重くなるし、このライブラリのためだけに読み込むのは何か嫌。Intro.jsは読み込むべきJSとCSSで計10KB（要zip）！いいねー。

実装が簡単

とてもわかりやすく、実装が簡単。実装方法は後述する。

IEにも対応

IE8以下にもしっかり対応している（動確はしていないが）。

軽量だし、IEにも対応しているし、実装が簡単！初心者にぜひおすすめしたい。

Intro.jsの使い方

HTML

headタグ内で読み込むのは以下の2つ。

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

IE対応させたい場合は、以下も記述しておこう。

<!--[if lte IE 8]>
<link href="introjs-ie.css" rel="stylesheet">
<![endif]-->

bodyタグでは"data-intro"に表示させたい文字を、"data-step"にツアーの順番を指定する。以下マークアップの例。

<div>
  <span data-intro='Hello step one!' data-step='1'>
    hogehogehogehogehoge
  </span>
</div>
<br>
<div>
  <span data-intro='Hello step Two!' data-step='2'>
    hogehogehogehogehoge
  </span>
</div>

JS

以下の一行だけ。まじ簡単！

introJs().start();

いやーこれ使えるな。というわけで、Webサービスを作る際にサイトツアーを検討する人は参考にしてほしい。