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

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

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

 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 の使い方は簡単で、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を使った例
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();

See the Pen drive.js demo by cupof (@cupof-github) on CodePen.

 以上が driver.js の紹介でした。WebサービスやElectronで作ったアプリなどで使うと、インタラクティブに操作説明が出来そうです。

チュートリアル機能の1つとして driver.jsを使うと、ユーザビリティが上がりそうなライブラリです。

GitHub : kamranahmedse/driver.js