More than 5 years have passed since last update.

Webでデモ・チュートリアルを簡単に作れる intro.js の導入方法

Last updated at 2018-01-31Posted at 2016-09-29

intro.js 2.3.0 の情報です。
バージョンが違うと動作しない可能性があります。

公式リンク

(公式) intro.js 動作デモも用意されています
GitHub
ドキュメント(GitHub-wiki)

10分で出来る！導入方法

ライブラリをダウンロード
intro.js, introjs.cssを読み込みます。
HTMLに必要なタグを埋め込みます。
必須なのはdata-stepとdata-introです。
introJs().start(); を実行するだけでチュートリアルが開始します

サンプルソース

<!-- 1. intro.js, introjs.cssを読み込みます。 -->
<script src="intro.js"></script>
<link rel="stylesheet" type="text/css" href="introjs.css">

<!-- 2. HTMLに必要なタグを埋め込みます。 -->
<div data-step='1' data-intro='Help Text First!!'>STEP 1</div>
<div data-step='2' data-intro='Help Text 2222222'>STEP 2</div>

<!-- 3. `introJs().start();` を実行するだけでチュートリアルが開始します -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    introJs().start();
});
</script>

See the Pen ddPEqx by r-koji (@RyutaKojima) on CodePen.

カスタマイズ

// まとめて設定
introJs().setOptions({
    'doneLabel': 'Next page',
    'showProgress': true,
    'hidePrev': true,
    'hideNext': true,
    'disableInteraction': true,
    'exitOnEsc': false,
    'exitOnOverlayClick': false
}).start();

//１項目ずつ設定も可能
introJs().setOption('doneLabel', 'Next page').setOption('showProgress', true).start();

全てのオプションはドキュメントを参照してください。
Document Options

わかる項目をまとめました

Option	データ型	デフォルト	説明
steps	?	?	?
nextLabel	string	"Next →"	次の説明へ進むボタンのラベル
prevLabel	string	"← Back"	前の説明へ戻るボタンのラベル
skipLabel	string	"Skip"	説明をスキップするボタンのラベル
doneLabel	string	"Done"	説明終了時のボタンのラベル
hidePrev	bool	false	最初の説明に「戻る」ボタンを表示しない
hideNext	bool	false	最後の説明に「次へ」ボタンを表示しない
tooltipPosition	?	?	?
tooltipClass	?	?	?
highlightClass	?	?	?
exitOnEsc	bool	true	Escキーで説明をスキップする
exitOnOverlayClick	bool	true	説明部分以外をクリックで説明をスキップする
showStepNumbers	bool	true	表示中のステップ数を表示する
keyboardNavigation	bool	true	キーボード操作を有効にする。←キーで戻る、→キーで進む、Escキーでスキップ。false(無効)にすると、`exitOnEsc`は無視されるっぽい
showButtons	bool	true	ボタンを表示する
showBullets	bool	true	表示中のページを表す玉？を表示する
showProgress	bool	false	プログレスバーを表示する
scrollToElement	?	?	?
overlayOpacity	?	?	?
disableInteraction	bool	false	説明中の要素に、マウスのイベントを発生させない
hintPosition	?	?	?
hintButtonLabel	?	?	?
hintAnimation	?	?	?

複数ページでチュートリアルを繋げる

// 1ページ目
introJs().start().oncomplete(function() {
    window.location.href = 'second.html?multipage=true';
});

// 2ページ目
if (RegExp('multipage', 'gi').test(window.location.search)) {
    introJs().start();
}

JavaScriptで必要タグを追加して実行

$('#first_intro').attr('data-step', 1).attr('data-intro', '最初のチュートリアル');
$('.multi_class').first().attr('data-step', 2).attr('data-intro', '複数の要素の一番最初');

introJs().start();