サイトのツアーを実装するプラグイン

第18回目になりました。技術メモです。こんにちは。

今回ご紹介するjqueryプラグインは、SNSやCMSなどで見た事がある方もいらっしゃるのではないでしょうか。

サイトのツアーを実装するプラグインです。
「サイトのツアー？？？」と疑問に思われる方もおられると思いますので、
具体的にどのような事が出来るのか、まずはデモ画面をご覧ください。

デモ画面はこちら

説明が必要な画面の各パーツに対してツールチップを表示するという簡単なものですが

ちょっとした入力フォームに使う事でもユーザーの迷いを解消する事につながるかもしれません。

まずは下記URLからプラグインをダウンロードします。

https://github.com/CodeSells/TourTip

解凍したフォルダの中から、jsとcssをjqueryと一緒にhead内で読み込ませます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="tinytools.tourtip.min.js"></script>
<link rel=" stylesheet" href="css/tinytools.tourtip.min.css">

html内の、説明が必要なパーツに任意のidを振り、さらにツアーを開始させるボタンを設置します。

<h1 id="demo1">TourTipのデモです。</h1>
 
<p id="demo2">▼ボタンをクリックするとツアーがはじまります。</p>
<button type="button" id="StartTour">ツアーをスタート</button>
 
<div id="demo3">コンテンツ</div>

最後に、各idに対応したscriptを記述し、titleやdiscription（説明）を記述、

positionにはbottomやrightなど、ツールチップを表示したい位置を指定します。

<script>
$(document).ready(function () {
  $("#demo1").tourTip({
    title: "説明のタイトル",
    description: "説明が入ります",
    previous: true, //戻るボタンを設置するか true/false
    position: 'bottom' //噴出しの位置を指定
  });
  $("#demo2").tourTip({
    title: "ツアー方法の説明",
    description: "ボタンをクリック",
    previous: true,
    position: 'bottom'
  });
  $("#demo3").tourTip({
    title: "",
    description: "赤の画像だよ～。",
    previous: true,
    position: 'right'
  });
  $("#StartTour").click(function(){
    $.tourTip.start();
  });
});
</script>

これだけで上記のデモ画面のようなツアーを実装することができます。

cssを編集すれば、ツールチップのデザインもサイトに合わせて変更する事ができますし、途中で表示を消す事や、前の説明に戻る事もできるので、ユーザーのニーズに合わせて使い方の説明ができ、ページ内に無理に説明を詰め込む事もなく、読みやすいページを作る事が可能です。
気になるブラウザの対応状況ですが、Chromeやfirefoxといったモダンブラウザはもちろん、IEも8から対応しています。
ただし、IE7以下は崩れてしまうので、IE7以下はプラグインを読み込ませないようにするなど対応が必要になります。

サイトのツアーを実装するプラグインは他にも色々ありますので、用途に合ったものを使ってみると良いと思います。

以上、技術メモでした。