【JavaScript】コーチマークチュートリアルを簡単に実装できるライブラリ「driver.js」

シンプルで実装も簡単だったので、今後も使いたい！と思ったので、まとめ。
タイトル通り、JavaScript でアプリのチュートリアルでよく使われる、コーチマークを実装できるライブラリ「driver.js」のご紹介です。

Cordova アプリにチュートリアルを実装するときに、ボタンをハイライト＆シンプルな吹き出しのライブラリを探したのですが、これがぴったりでした！

GitHub のと公式ページはこちらから。

GitHub – kamranahmedse/driver.js: A light-weight, no-dependency, vanilla JavaScript engine to drive the user’s focus across the page
https://github.com/kamranahmedse/driver.js

Driver
https://kamranahmed.info/driver.js/

公式サイトにはデモがたくさん用意されているので、どのような動き方なのかがとても分かりやすいです。

実装方法ですが、まず下記のコマンドを実行します。

npm install driver.js --save

上記が完了したら、JavaScript ファイルと CSS ファイルをインポートします。

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

あとは、サンプルコードを参考に、コードを追加します。
私は下記のように実装しました。

const driver = new Driver({
  allowClose: false,
  padding: 0,
  overlayClickNext: true,
  showButtons: false,
});
driver.defineSteps([
  {
    element: '#element01',
    popover: {
      title: 'タイトル1',
      description: 'メッセージ1',
      position: 'top-left',
    }
  },
  {
    element: '#element02',
    popover: {
      title: 'タイトル2',
      description: 'メッセージ2',
      position: 'bottom-right',
    }
  },
  {
    element: '#element03',
    popover: {
      title: 'タイトル3',
      description: 'メッセージ3',
      position: 'bottom-center',
    }
  }
]);
driver.start();

上記のコードを実行すると、まず、element01 の ID が指定された要素をハイライトで表示し、吹き出しをその要素の上に左揃えで表示します。
オーバーレイのエリアをクリックすると、次の要素に移動し、今度は element02 の ID が指定された要素を強調し、吹き出しは要素の下に右揃えで表示されます。
最後は element03 の ID が指定された要素が強調され、吹き出しの位置は要素の下中央です。

またオプションも複数指定でき、今回は、要素強調時の余白を 0 にしたり、吹き出し内に表示されるナビゲーションボタンを非表示にして、タップで次の要素に移ることができるようにしたりしています。
設定している場所は、上記コードの 2～5行目です。
オプションは他にも用意されていますので、公式サイトをご参考にしてください。

基本的な実装方法は以上です。
強調時の余白の幅や、吹き出しの表示位置を細かく設定できるのは有難かったですね！

以上、JavaScript でコーチマークチュートリアルを簡単に実装できるライブラリ「driver.js」のご紹介でした。
ご参考になれば幸いです。