[JS]一昔前と比べて、かなり簡単に！ページの機能を紹介するツアーを実装できる超軽量スクリプト -Driver
Post on:2018年3月14日
sponsors
ページ上の任意の要素を目立つようにハイライトさせたり、ページの機能を紹介するツアーを実装できるスクリプトを紹介します。
一昔前までのは実装が少し面倒だったり、jQueryなど他のスクリプトに依存していましたが、ここで紹介するのは実装が非常に簡単で、超軽量の4kb！ しかも依存は一切無し！
既存ページにもすぐに利用できると思います。
Driverの特徴
- ページ上の任意の要素をハイライト表示します。
- Webアプリの機能を順番に紹介することもできます。
- ユーザーにフォーカスシフターを追加します。
- キーボードでも操作可能で、ユーザーフレンドリーです。
- 実装が簡単で、他のスクリプトやスタイルシートの依存はありません。
- わずか4kbの超軽量バニラ スクリプト。
- 強力なAPIを備えており、高度なカスタマイズも可能、必要に応じて使用できます。
- IEを含む、すべてのブラウザをサポートします。
- MITライセンスで、商用でも無料で利用できます。
Driverのデモ
デモページでは、Driverを使用したさまざまなハイライト・ツアーを楽しめます。
まずは、ツアーを試してみます。
「Quick Tour」をクリックすると、ツアーが始まります。
操作の説明が必要なWebアプリなどに、ぴったりの機能です。
デモページ: ツアーのスタート
ツアーを始めると、「Next」「Back」でハイライト箇所が次々に変化します。終了する時は「Close」か「escキー」または、関係ない場所をクリックします。
デモページでは他にもたくさんの使用例が掲載されています。
ページ上の任意の要素をハイライトします。
入力フォームのフォーカスした要素をハイライトします。
ハイライトする際には、ポップオーバーで説明文などを加えることも簡単にできます。
途中の要素からツアーを始めることもできます。
Driverの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシートを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 9 10 |
<head> ... <link rel="stylesheet" href="/dist/driver.min.css"> </head> <body> ... コンテンツ ... <script src="/dist/driver.min.js"></script> </body> |
Step 2: HTML
HTMLは通常通りの実装し、要素をハイライトできるようにidを与えておきます。
Step 3: 要素のハイライト
要素をハイライトさせるには、JavaScriptで指定します。
|
1 2 |
const driver = new Driver(); driver.highlight('#create-post'); |
ポップオーバーを加える時は、下記のように記述します。
|
1 2 3 4 5 6 7 8 |
const driver = new Driver(); driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', } }); |
連続してハイライトさせる時は、下記のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
const driver = new Driver(); // Define the steps for introduction driver.defineSteps([ { element: '#first-element-introduction', popover: { 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(); |
sponsors
