【npm】要素を指定してハイライトをつくる「Driver.js」が便利だった話

久々のnpmの話題。という訳でDriver.jsというプラグインの使い方をメモします。

ハンドル型のロゴが目印です。

これをインストールして決められたプロパティを設定するだけで

簡単にチュートリアルを作れるようになります。

まずシンプルな様式がこちら。elementで要素のidを設定します。

ここで要素を指定すると、その要素にのみハイライトが表示されます。

titleとdiscriptionは、タイトルと内容を表すプロパティ、いわば

ハイライトを紹介する吹き出しのような役割を担います。

const driver = new Driver();
driver.highlight({
element: '#some-element',
popover: {
title: 'Title for the Popover',
description: 'Description for it',
}

結果がこちら。

成功時です。要素がハイライト表示されているのが分かります。

必ず入力させたいフォームがある時に使うと綺麗かもしれませんね。

これだけでも便利なのですが、以下のように複数の要素を順番にハイライト表示させることもできます。

const driver = new Driver();
// Define the steps for introduction
driver.defineSteps([
{
element: '#first-element-introduction',
popover: {
className: 'first-step-popover-class',
title: 'Title on Popover',
description: 'Body of the popover',
position: 'left'
}
},
{
element: '#second-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'top'
}
},
{
element: '#third-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'right'
}
},
]);
// Start the introduction
driver.start();

さっきのシンプルなものとは違いdefineStepsで要素を

一つずつ含んでいますね。これらの要素を順番に格納していき、

最後にdriver.start()で連続ハイライトを可能にしています。

こっちはチュートリアルとして使うとユニークなアプリになりそうですね。以上。

主に使用する機会があるのはこの2パターンかなと考えています。

他にも

const driver = new Driver({
className: ‘scoped-class’, // クラスネームをハイライトとして指定
showButtons: false , //driver.defineSteps時に使用。ボタンを非表示にする
overlayClickNext: true, //同様。外枠をクリックすることで次のハイライトに進む。

});

と様々なオプションがあるので自分のアプリに合ったオプションをカスタマイズしてみてください。