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との事です。