[JS]一昔前と比べて、かなり簡単に!ページの機能を紹介するツアーを実装できる超軽量スクリプト -Driver

ページ上の任意の要素を目立つようにハイライトさせたり、ページの機能を紹介するツアーを実装できるスクリプトを紹介します。

一昔前までのは実装が少し面倒だったり、jQueryなど他のスクリプトに依存していましたが、ここで紹介するのは実装が非常に簡単で、超軽量の4kb! しかも依存は一切無し!
既存ページにもすぐに利用できると思います。

サイトのキャプチャ

Driver -GitHub

Driverの特徴

  • ページ上の任意の要素をハイライト表示します。
  • Webアプリの機能を順番に紹介することもできます。
  • ユーザーにフォーカスシフターを追加します。
  • キーボードでも操作可能で、ユーザーフレンドリーです。
  • 実装が簡単で、他のスクリプトやスタイルシートの依存はありません。
  • わずか4kbの超軽量バニラ スクリプト。
  • 強力なAPIを備えており、高度なカスタマイズも可能、必要に応じて使用できます。
  • IEを含む、すべてのブラウザをサポートします。
  • MITライセンスで、商用でも無料で利用できます。

Driverのデモ

デモページでは、Driverを使用したさまざまなハイライト・ツアーを楽しめます。
まずは、ツアーを試してみます。

デモのキャプチャ

デモページ

「Quick Tour」をクリックすると、ツアーが始まります。
操作の説明が必要なWebアプリなどに、ぴったりの機能です。

デモのキャプチャ

デモページ: ツアーのスタート

ツアーを始めると、「Next」「Back」でハイライト箇所が次々に変化します。終了する時は「Close」か「escキー」または、関係ない場所をクリックします。

デモページでは他にもたくさんの使用例が掲載されています。
ページ上の任意の要素をハイライトします。

デモのキャプチャ

デモページ

入力フォームのフォーカスした要素をハイライトします。

デモのキャプチャ

デモページ

ハイライトする際には、ポップオーバーで説明文などを加えることも簡単にできます。

デモのキャプチャ

デモページ

途中の要素からツアーを始めることもできます。

デモのキャプチャ

デモページ

Driverの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

Step 2: HTML

HTMLは通常通りの実装し、要素をハイライトできるようにidを与えておきます。

Step 3: 要素のハイライト

要素をハイライトさせるには、JavaScriptで指定します。

ポップオーバーを加える時は、下記のように記述します。

連続してハイライトさせる時は、下記のように記述します。

sponsors

top of page

©2018 coliss