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

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

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

Javascript ライブラリ

サイトツアーを実現する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サービスを作る際にサイトツアーを検討する人は参考にしてほしい。

広告を非表示にする