TourGuide.js
TourGuide.jsはIntro.jsのようなWebサイトのツアーを実装するオープンソースのJavaScriptライブラリです。
商用ライセンスは有償のIntro.jsとほぼ同じ動きをする代替ライブラリとして利用可能で、実装も簡単です。
< script src = "https://unpkg.com/@sjmc11/tourguidejs/dist/tour.js" crossorigin = "anonymous" referrerpolicy = "no-referrer" ></ script > < link rel = "stylesheet" href = "https://unpkg.com/@sjmc11/tourguidejs/dist/css/tour.min.css" > |
👆ライブラリとCSSを読み込みます。
< div data-tg-tour="<span>foo</ span >">bar</ div > |
👆ツアーを仕込みたい箇所にdata-tg-tour
属性を付与し、内容を記述します。内容はHTMLタグが利用可能です。
const tg = new TourGuideClient() |
👆初期化すれば完了です。
{ autoScroll: boolean = true // 自動スクロール autoScrollSmooth: boolean = true // スムーズな自動スクロール autoScrollOffset: number = 20 // 含オフセットな自動スクロール backdropClass: string = "" // ツアー時の背景箇所に追加するclass backdropColor: string = "rgba(20,20,21,0.84)" // 背景カラー targetPadding: number = 30 // スペース。単位はpx backdropAnimate: boolean = true // 背景アニメーション dialogClass: string = "" // ダイアログに追加するclass dialogZ: number = 999 // ダイアログのz-index dialogWidth: number = 0 // ダイアログに付与するwidth。画像を読み込むときに dialogMaxWidth: number = 340 // ダイアログのmax-width dialogAnimate: boolean = true // ダイアログのアニメーション closeButton: boolean = true // 閉じるボタンの表示 nextLabel: string = "Next" // 次へボタンのテキスト prevLabel: string = "Back" // 戻るボタンのテキスト finishLabel: string = "Finish" // 終了ボタンのテキスト hidePrev: boolean = false // 戻るボタンの非表示 hideNext: boolean = false // 次へボタンの非表示 completeOnFinish: boolean = true // 終了時にlocalStorageに「ツアー終了」をセットする showStepDots: boolean = true // ドットを表示してツアーの進捗を明示 stepDotsPlacement: 'footer' | 'body' = "footer" // ダイアログのbody/footerにポイントを表示 showButtons: boolean = true // 次へ・戻るボタンの表示 showStepProgress: boolean = true // 「1/5」のような進捗明示 keyboardControls: boolean = false // キーボードコントロール対応 exitOnEscape: boolean = true // escapeキーでツアー終了 exitOnClickOutside: boolean = true // 背景クリックでツアー終了 rememberStep: boolean = true // 最後にアクティブになったステップでツアーを開く debug: boolean = false // デバッグモード steps: TourGuideStep[] // ツアーの手順を事前に定義 } |
👆オプションも豊富に用意されています。
使いやすくて良いですね。商用でIntro.jsを使ってたけどコストを抑えたい、という方は如何でしょうか。ライセンスはISCとの事です。