複数ページにも対応とは！ページに分かりやすいプロダクトツアーを加えるフレームワーク -Hopscotch

サイト構築 -制作

Post on:2013年6月17日

Hopscotchの特徴

イベントのコールバック: ツアー中のさまざまなイベントのコールバックを装備。
マルチページ対応: HTML5のストレージやクッキーを利用して、複数ページにまたがるツアーも可能。
i18n対応: さまざまな言語での実装をサポート。
快適なレスポンス: 一つひとつは軽量なインスタンス。

Hopscotchのデモ

ページ自体がデモになっています。
中央下の「Tale a tour」でツアーのスタートです。

デモページ

気持ちのいいアニメーションと共に、ツアーが始まります。

ツアーのパネルは、番号とテキスト、次へとクローズボタンが表示され、ユーザーに次の坑道を案内することができます。
「Next」をクリックすると、アニメーションのスクロールで2番目に進みます。

パネルは2番目以降になると「Back」ボタンが加わり、ツアーを戻ることもできます。

Hopscotchの使い方

Step 1: 基本のテンプレート

当スタイルシート・スクリプトを外部ファイルとして配置し、ツアーの定義のスクリプト（my_first_tour.js）を用意します。

    <html>
      <head>
        <title>My First Hopscotch Tour</title>
        <link rel="stylesheet" href="css/hopscotch.css"></link>
      </head>
      <body>
        <h1 id="header">My First Hopscotch Tour</h1>
        <div id="content">
          <p>Content goes here...</p>
        </div>
        <script src="js/hopscotch.js"></script>
        <script src="js/my_first_tour.js"></script> <!-- define and start your tour in this file -->
      </body>
    </html>

Step 2: ツアーの定義

ツアーの定義はのスクリプトのフォーマットです。
見出しとコンテンツを記述し、ターゲットとなる要素、表示位置を設定します。

    // Define the tour!
    var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "My Header",
          content: "This is the header of my page.",
          target: "header",
          placement: "right"
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

    // Start the tour!
    hopscotch.startTour(tour);

オプションでは、パネルの位置・サイズ、表示のタイミング、スクロールのスピードなど、さまざまな項目が細かく設定できます。