Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
47
Help us understand the problem. What is going on with this article?
@RyutaKojima

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

More than 3 years have passed since last update.

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

公式リンク

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

10分で出来る!導入方法

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

サンプルソース

<!-- 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();
//1項目ずつ設定も可能
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();

:grey_question::grey_question: 検証 :grey_question::grey_question:

環境が異なる場合、挙動も変わる可能性があります。
検証環境

項目 環境
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: バレットは間が抜けたところ以降が別のステップに飛んだりスキップの挙動になったりでうまく動作しませんでした

47
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
47
Help us understand the problem. What is going on with this article?