driver.js : ページ内の一部の要素をハイライトするJSライブラリ

ページの部分的要素をハイライトする javascript用のライブラリ「driver.js」の紹介です。

driver.js で出来ること

- 指定したDOM要素をライトボックスのようにハイライトしてくれます

* driver.jsの公式ページから

driver.js のインストール

driver.js は npm 又は yarn コマンドを使ってインストールします。また、CDN用のリンクからブラウザ上で直接ライブラリを呼び出すこともできます。

# npm
npm i driver.js --save
# yarn
yarn add driver.js

# cdn
https://unpkg.com/driver.js/dist/driver.min.js
https://unpkg.com/driver.js/dist/driver.min.css

driver.js の使い方

driver.js の使い方は簡単で、CSS、JS用のライブラリを読み込んだ後、' highlight ' メソッド内にハイライトしたい要素を指定するだけです。

また、' highlight ' メソッド内にオプションを指定すると、ポップアップを付け加えることができます。

* ' addEventListener ' と組み合わせる場合は、コールバックの戻り値に ' stopPropagation 'メソッドが必要です

* ポップアップ付きのハイライト

var driver = new Driver();

// ハイライトのみ
// driver.highlight('#myId');

// ポップアップ付き
driver.highlight({
        element: '#test1', // ハイライトさせる要素 id="test1"
        popover: {
          title: 'タイトル',
          description: 'ここに何かの説明など', // HTMLタグが混ざっていても可
          }
        });

' defineSteps ' メソッドを使えば、一度に順序的に要素をハイライトさせることも可能なので、Webアプリのチュートリアルも動的に実装することが出来ます。

* defineSteps メソッドを使った例

// defineStepsを使った例
var driver = new Driver();

driver.defineSteps([
          {
            element: '#test1', // ハイライトさせる要素
            popover: {
              title: 'タイトル1',
              description: 'ここに何かの説明など',
              }
           },
            {
            element: '#test2',
            popover: {
              title: 'タイトル2',
              description: 'ここに何かの説明など',
              }
           },
            {
            element: '#test3',
            popover: {
              title: 'タイトル3',
              description: 'ここに何かの説明など',
              }
           }
           ]);
// 複数の要素をハイライトさせる時に必要です
driver.start();

上で紹介した ' defineSteps ' メソッドのメニューはデフォルトで英語表記ですが、popover内で変更も可能です。

// popoverメニューを日本語化
var driver = new Driver();

driver.defineSteps([
　{
            element: '#test1',
            popover: {
              title: 'タイトル1 ',
              description: '* メニューを日本語化しています',
              doneBtnText: '完了', // Done
              closeBtnText: '閉じる', // Close
              nextBtnText: '進む', // Next
              prevBtnText: '戻る',  // Prev
              }
  }
// ...
]);

driver.start();

* メニューを日本語化