WEBページ上でチュートリアルをすることが出来る「Intro.js」の使い方

コラム

Intro.jsは、WEBページ上でチュートリアルをスタートすることが出来るjQueryプラグインです。
jQueryを使わなくても動作するようですが、細かい動きに違いが出るようです。
ここでは、デフォルト状態で実装することを解説致しますので、まずはデフォルト状態をご理解頂けます。
類似したjQueryプラグインを紹介したことがありますので、併せてご確認ください。
「Tooltip（吹き出し）を出すことが出来るjQueryプラグイン「Tooltipster」の使い方」、「注釈を入れるためのjQueryプラグイン「Chardin.js」の使い方」

「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Tipsに投稿したコラム記事

WEBページ上でチュートリアルをすることが出来る「Intro.js」の使い方

jQuery/JS Tips

チュートリアル作成のためのJSスクリプト

Intro.jsは、jQueryがあってもなくても動的にチュートリアルを作成することが出来るJSスクリプトです。
デフォルトの設定のみ実装した環境では、jQueryは役割を果たしません。

以前に類似したjQueryプラグインも紹介致しました。
併せてこちらもご覧頂ければと思います。

今回のIntro.jsは、先に紹介したスクリプトやjQueryプラグインを足して二で割ったような機能でして、まさしく”チュートリアル！”という感じです。

ということで、細かいことは置いといて、進めていきたいと思います。

本家サイト

本家サイトです。
GitHubからプラグイン一式をダウンロードして頂けます。

ダウンロードと組み込みサンプル

組み込み済みファイルのダウンロード

phptemp_it_160920.zip

組み込み済みサンプル

サンプルです。

組み込み済みサンプル

サンプルには全ページにIntro.jsを設定しています。
トップページのみ、グローバルメニューにも説明が出てくるようにしています。

元になるWEBサイトテンプレート（PHP）について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

コンテンツSEOのためのWEBサイトテンプレート（PHP）

ポイント

読み込ませたファイル

まず、cssファイルとjsファイルを読み込ませます。
ここでは、デフォルト設定のためのファイルを読み込ませています。
全ページ共通で読み込んでいるファイルに記述していますので、全ページに反映されます。

<link href="/css/introjs.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/js/intro.js"></script>

ダウンロードしてきたフォルダ内に「theme」フォルダにカラーを変えるcssファイルがありますので、自由に使って試してみてください。

全ページに設定するjs記述

特にありません。
js記述はありません・・・が、その代わりに、「intro.js」内で若干修正することが出来る箇所があります。

サンプルでアップしているjsファイルは「Skip」と「Done」を「終了」と修正しています。
これはチュートリアルのパネル内のテキストを修正したというところです。
割と自由に修正が出来るので、jsファイル内を見てみてください。

チュートリアル開始のためのトリガー

チュートリアルを開始するためのトリガー（リンクやボタン）が必要です。
サンプルでは、以前の記事と同じ感じで作成しました。
全ページ、ブラウザ上の右上部分に「チュートリアル」というリンクを作成しました。
このリンクをクリックすると、チュートリアルが開始します。

<div id="kaisetsu"><a href="javascript:void(0);" onclick="javascript:introJs().setOption('showProgress', true).start();">チュートリアル</a></div>

次にcss記述です。

body {
	position: relative;
}

#kaisetsu {
	position: fixed;
	top: 5px;
	right: 5px;
}

#kaisetsu a {
	display: block;
	padding: 5px;
	background-color: #666;
	color: #fff;
	border: 1px solid #666;
}

#kaisetsu a:hover {
	background-color: #fff;
	color: #666;
	border: 1px solid #666;
}

上記のcssの記述内容は、各種main.cssファイルに記載致しました。
上記の記述でどの端末にも対応しますので、全ての各種main.cssに同じ内容で記述して頂いて問題ございません。

チュートリアルの説明箇所へ追記する内容

チュートリアルの説明を表示したい箇所に、以下の要素を書き加えてください。

data-step="数字"
data-intro="解説内容"
data-position="パネル表示位置"

上記の要素を書き加えることで、チュートリアルを開始した時に必要なデータが表示されるようになります。
以下に記述例を記載致します。

<div id="head">
<div id="head-l">
<div id="logo"><a href="/column/web/160920/01/" data-step="1" data-intro="ロゴ部分">コーヒー通販のコーヒーラボラトリー</a></div>
<div id="logodisc"><h1>そのページで最も重要なキャッチ</h1></div>
</div>
<div id="head-r">
<ul data-step="2" data-intro="インフォメーション" data-position="bottom">
<li><a href="/column/web/160920/01/sitemap.php">サイトマップ</a></li>
<li><a href="/column/web/160920/01/privacy.php">プライバシーポリシー</a></li>
</ul>
</div>
</div>

上記のように記述することで、期待した位置に解説パネルを表示することが出来るようになります。
これで完成ですね。

色々なパターンがあるようです

チュートリアルのパネルの仕様について、本家ではたくさんのパターンを用意してくれています。
cssでカラーやデザインを変えることが出来ますが、動作の仕様も変えることが出来るようになっています。

中には、ページをまたいでチュートリアルを継続するような機能もあります。
これは、urlに引数を付け、その引数を拾って判断するというような流れになっています。

このような動作仕様の異なるスクリプトの設定については、本家でも説明がありますが、ダウンロードしてきたフォルダ内にもサンプルソースが同梱されています。
「example」というフォルダ内に、それぞれのサンプルソースがありますので、併せてチェックしておくといいかもしれません。

他、jQueryを使う時には、動的要素を追加する時にのみ必要になるようです。
ですので、通常に使う分には、jQueryは必要ないと思われます。

その他、補足

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。