[JS]Webアプリやページのツアーガイドを簡単に加えることができる軽量スクリプト -Shepherd

サイト構築 -JavaScript

Post on:2018年7月9日

sponsorsr

Webアプリやページにツアーガイドを簡単に加えることができる軽量スクリプトを紹介します。以前に紹介した時から、v.2に大きくバージョンアップされました。

既存ページに加えるのも簡単で、柔軟なカスタマイズにも対応しています。

Shepherd
Shepherd -GitHub

Shepherdのデモ
Shepherdの使い方

Shepherdのデモ

デモでは実際にツアーガイドを操作できます。

デモページ

ページを表示するとすぐにツアーガイドが表示され、「Next」をクリックすると次に進みます。パネルはそのステップごとに、最適な位置に表示されます。

ツアーガイドは途中で終わることもでき、終了すると通常の画面が表示されます。

ツアーガイドの終了時

Shepherdの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。ポップアップには、popper.jsが使用されています。

<head>
  ...
  <link rel="stylesheet" href="shepherd-theme-arrows.css" />
</head>
<body>
  ...
  コンテンツ
  ...
  <script src="popper.min.js"></script>
  <script src="shepherd.min.js"></script>
</body>

<head>

...

</head>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

HTMLは通常通りに実装してOKです。
ツアーガイドを表示する要素には、それが指定できるようclassを付与しておきます。

Step 3: JavaScript

ガイドの内容や表示する順番はスクリプトで記述します。

tour = new Shepherd.Tour
  defaults:
    classes: 'shepherd-theme-arrows'

tour.addStep 'example',
  title: 'Example Shepherd'
  text: 'Creating a Shepherd is easy too! Just create ...'
  attachTo: '.hero-example bottom'
  advanceOn: '.docs-link click'

tour.start()