お役立ちツール
BLOG
開発者ブログ
【CDN】driver.jsの使い方 【サンプル付き】
本日はDriver.jsのCDN版の使い方を紹介します。
同様のブログを検索するとReact版の使い方紹介はちらほらあったのですが、ReactやJavascriptが苦手な方にはハードルが高いですよね！
ということで、手軽に使えようようにと思い使い方を解説していこうと思います。
画像引用：driverjs.com公式
目次
今日のゴール
Driver.js（CDN）を使って、ステップバイステップのチュートリアルを作成をしてみます。
driver.jsとは
ウェブサイトやアプリを使っていると、どこをクリックすればいいのか迷うことってありますよね。特に、新しい機能が追加された時や初めて使うツールだと、操作方法が分からないことも。
そんな時に役立つのが、Driver.jsというライブラリです。
Driver.jsは、ユーザーにサイトやアプリの使い方をステップバイステップでガイドするツールです。
新しいユーザーに向けて、どの部分をクリックすればいいかを教えてくれるインタラクティブなツアーを作ることができます。
Driver.jsの主な特徴
簡単に使えるガイドツアー Driver.jsを使うと、ウェブページ上の重要な部分を「次はここをクリックして！」といった感じで案内できます。新規ユーザーに、どこを操作すればいいのかを分かりやすく教えてくれるので、操作ミスを減らすことができます。
注目したい部分を強調表示 ページの中で特に重要なエレメントを強調して、他の部分を薄く表示させることができます。これによって、ユーザーがどこに注目すべきかが一目で分かります。
カスタマイズ可能なステップ Driver.jsは、複数のステップに分けてガイドを作成できます。それぞれのステップには、テキストや画像を入れて、もっと詳しく説明することも可能です。
ポップアップでわかりやすく 画面上にポップアップを表示して、ユーザーに追加の情報を提供することができます。ポップアップには、チュートリアルの説明を入れて、何をすればいいのかをさらに詳しく伝えることができます。
シンプルな設定で使いやすい 複雑な設定は必要なく、JavaScriptを少し書くだけ（コピペでOK）で簡単に導入できます。カスタマイズも簡単で、自分のウェブサイトやアプリにぴったりなガイドツアーを作ることができます。
というように、手軽に導入でき、新規ユーザーに分かりやすく説明ができるツアーガイドです。
もちろん、HTMLやCSSを使ってカスタマイズすることもできます。
１.Driver.jsの導入
まずはCDNを使用してHTMLにスクリプトを読み込みます。
Jqueryを使用していないライブラリなので、今回作成したサンプルはhead内に入れました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" />
</head>
<body>２.ツアーガイドさせたいHTMLを書く
今回のサンプルでは以下のような簡単なHTMLサンプルを用意しました。
<ul>
<li id="step1">
STEP1
</li>
<li id="step2">
STEP2
</li>
<li id="step3">
STEP3
</li>
</ul>３.Javascriptを書く
ここでは、最低限動くようにするためのJavascriptだけ紹介します。
<script>
const driver = window.driver.js.driver;
const driverObj = driver({
steps: [{
element: '#step1',
popover: {
title: 'STEP1のタイトル',
description: '説明',
}
},
{
element: '#step2',
popover: {
title: 'STEP2のタイトル',
description: '説明',
}
},
{
element: '#step3',
popover: {
title: 'STEP3のタイトル',
description: '説明',
}
},
],
});
driverObj.drive();
</script>以上でございます。
では、早速サンプルを見てみましょう。
いかがですか？
これだけの記述で実装できてしまうのは、とてもありがたいですよねー
Driver.jsのツアーオプション
まずは、よく使いそうなオプションをサンプル付きで紹介します。
<script>
const driver = window.driver.js.driver;
const driverObj = driver({
ここにオプションを書いていきます。
});
</script>ボタンの名称を変更する
ツアー中に表示する「next」「previous」「close」の文字を変更する。
※Font Awesome等のアイコンは普通に使用はできません。
<script>
const driver = window.driver.js.driver;
const driverObj = driver({
nextBtnText: '次へ', //ボタンのテキストを変更
prevBtnText: '戻る', //ボタンのテキストを変更
doneBtnText: '閉じる', //ボタンのテキストを変更
});
</script>ツアー中の途中離脱を禁止する
こちらは、先ほどの「ボタンの名称を変更」サンプルのツアー中に、ツアー要素以外をクリックするとツアーが終了してしまうのでこちらを禁止します。
<script>
const driver = window.driver.js.driver;
const driverObj = driver({
allowClose: false, //ツアー中の途中離脱をさせない
});
</script>| オプション | 説明 |
|---|---|
allowClose: false | 離脱禁止 |
allowClose: true | 離脱許可 |
オーバーレイのカラーを変更する
ツアー中の背景は、ブラックの透過70%がデフォルトですが、こちらを好みの色に変更します。
色の指定はRGBで行います。
<script>
const driver = window.driver.js.driver;
const driverObj = driver({
overlayColor: 'rgb(37, 92, 40)', //RGBでOverlayの色を指定
});
</script>ポップオーバーの位置を変更
ポップオーバーの位置は、今回のサンプルで言う個々のSTEPごとに指定します。
先ほどまでとはコードを書く位置が異なりますので、コード全体を書きますね。
<script>
const driver = window.driver.js.driver;
const driverObj = driver({
steps: [{
element: '#step1',
popover: {
title: 'STEP1のタイトル',
description: '説明',
side: "top", //left, top, right, bottom
align: 'start' //start, center, end
}
},
{
element: '#step2',
popover: {
title: 'STEP2のタイトル',
description: '説明',
side: "right",
align: 'center'
}
},
{
element: '#step3',
popover: {
title: 'STEP3のタイトル',
description: '説明',
side: "bottom",
align: 'end'
}
},
],
});
driverObj.drive();
</script>sideオプション | 説明 |
|---|---|
side: "left" | 指定した要素の左に表示（デフォルト） |
side: "top" | 指定した要素の上に表示 |
side: "right" | 指定した要素の左に表示 |
side: "bottom" | 指定した要素の下に表示 |
| alignオプション | 説明 |
|---|---|
| align: ‘start’ | 指定した要素の左に合わせる（デフォルト） |
| align: ‘center’ | 指定した要素の中央に合わせる |
| align: ‘end’ | 指定した要素の右に合わせる |
プログレスを非表示
プログレスとは、ツアー中に表示される「1 of 6」のことで、残り何ステップあるかを非表示にします。
<script>
const driver = window.driver.js.driver;
const driverObj = driver({
showProgress: false,
});
</script>| プログレスオプション | 説明 |
|---|---|
| showProgress: true, | プログレスを表示（デフォルト） |
| showProgress: false, | プログレスを非表示 |
ポップオーバーの中にHTML
ポップオーバーの中にHTMLを書くこともできます。
簡単ですがサンプルを用意しました。
<style>
.red {
color: #c00;
}
</style>
<script>
const driver = window.driver.js.driver;
const driverObj = driver({
steps: [{
element: '#step1',
popover: {
title: 'STEP1のタイトル',
description: '<span class="red">class</span>で色を変えました。',
}
},
{
element: '#step2',
popover: {
title: 'STEP2のタイトル',
description: '<img src="https://placehold.jp/150x150.png"><br>画像も入ります。',
}
},
{
element: '#step3',
popover: {
title: 'STEP3のタイトル',
description: 'iframeも入ります<br><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4878314060675!2d139.68914237812908!3d35.689611179509676!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b71a37a1%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1731336599396!5m2!1sja!2sjp" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>',
}
},
],
});
driverObj.drive();
</script>まとめ
Driver.js（CDN）の使い方でした。
上手に使えば、ユーザーに迷わせずに目的のアクションをさせたり、使い方をチュートリアルしたりと、幅広い用途で使えそうですね。
Driver.jsは、充実したAPIを備えており、Webアプリの操作説明ツアーやユーザーの注目を集めるための要素ハイライト、新機能の説明などに活用できます。
これにより、Webアプリの運営においてユーザーフレンドリーな対応が可能になり、利用者の理解を助ける便利なツールです。
ぜひ、ユーザーフレンドリーなWebサイトやアプリ開発に取り入れてみてください。
ご不明な点やご相談はこちら。
