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

ページに分かりやすく、プロダクトツアーを加えるフレームワークを紹介します。

似たようなスクリプトはたくさんありますが、これはツアー移動のアニメーション、ツアーを戻る、そして複数ページにも対応しています。
1ページ内でのツアーでけではなく、複数ページを横断するツアーも作成できます。

サイトのキャプチャ

Hopscotch
Hopscotch -GitHub

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);

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

top of page

©2017 coliss