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

<i class="fa fa-comment-o"></i> intro.js 2.3.0 の情報です。
バージョンが違うと動作しない可能性があります。

# <i class="fa fa-leanpub"></i>公式リンク

[(公式) intro.js](http://introjs.com/) 動作デモも用意されています
[<i class="fa fa-github"></i>GitHub](https://github.com/usablica/intro.js)
[<i class="fa fa-github"></i>ドキュメント(GitHub-wiki)](https://github.com/usablica/intro.js/wiki/Documentation)

# <i class="fa fa-hourglass-half"></i>10分で出来る！導入方法

0. [ライブラリを<i class="fa fa-download"></i>ダウンロード](https://github.com/usablica/intro.js/releases)
1. `intro.js`, `introjs.css`を読み込みます。
2. HTMLに必要なタグを埋め込みます。  
    :koko: 必須なのは`data-step`と`data-intro`です。
3. `introJs().start();` を実行するだけでチュートリアルが開始します:end:  :tada: 

サンプルソース

```html
<!-- 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>
```

<p data-height="265" data-theme-id="0" data-slug-hash="ddPEqx" data-default-tab="js,result" data-user="RyutaKojima" data-embed-version="2" data-pen-title="ddPEqx" class="codepen">See the Pen <a href="https://codepen.io/RyutaKojima/pen/ddPEqx/">ddPEqx</a> by r-koji (<a href="https://codepen.io/RyutaKojima">@RyutaKojima</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

# <i class="fa fa-cog"></i>カスタマイズ

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

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

全てのオプションはドキュメントを参照してください。
<i class="fa fa-leanpub"></i>[Document Options](https://github.com/usablica/intro.js/wiki/Documentation#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      | ?      | ?          | ?                           |

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

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

```js
// 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();
```

# :grey_question::grey_question: 検証 :grey_question::grey_question:
<i class="fa fa-exclamation-triangle"></i>環境が異なる場合、挙動も変わる可能性があります。
検証環境

| 項目              |    環境    |
|:------------------|:---------:|
| intro.jsバージョン | 2.3.0     |
| ブラウザ          | chrome(53.0.2785.116 m), Forefox(49.0.1), IE(11.187.14393.0) |


## :grey_question: `data-step` に同じ番号がつけた場合

結果： 最後の要素が選ばれました。

## :grey_question: 1, 2, 9のように `data-step` の間が抜けた場合

結果：
:clap: ボタンは 1 > 2 > 9 の順で問題なく動作しました
:disappointed_relieved: バレットは間が抜けたところ以降が別のステップに飛んだりスキップの挙動になったりでうまく動作しませんでした