See the Pen Shepherd Sample by 奥村健吾 (@okumurakengo) on CodePen.

このようにWebサービスの使い方の説明のガイドを簡単に作ることができます

【↑のwebpack使用版のコード】

Shepherd

github (2019/05/13 現在スター数 7407 )
デモページ
ドキュメント

Instaration

bash

yarn add shepherd.js
# or
npm i shepherd.js

webpackで動かせるサンプル

yarn init -y
yarn add -D shepherd.js webpack webpack-cli css-loader style-loader

webpack.config.js

module.exports = {
    mode: "development",
    module: {
        rules: [{
            test: /\.css/,
            use: ["style-loader", "css-loader"]
        }]
    }
};

src/index.js

import Shepherd from "shepherd.js";
import "shepherd.js/dist/css/shepherd-theme-default.css";

let tour = new Shepherd.Tour({
    defaultStepOptions: {
      scrollTo: true
    }
});

tour.addStep("step1", {
    title: "Hoge",
    text: "Step Hoge の説明",
    attachTo: ".hoge bottom",
    buttons: [{ text: "次へ", action: tour.next }]
});

tour.addStep("step2", {
    title: "Fuga",
    text: "Step Fuga の説明",
    attachTo: ".fuga bottom",
    buttons: [{ text: "次へ", action: tour.next }]
});

tour.addStep("step3", {
    title: "Piyo",
    text: "Step Piyo の説明",
    attachTo: ".piyo bottom",
    buttons: [{ text: "完了", action: tour.complete}]
});

tour.start()

index.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>shepherd.js Test</title>
<script src=dist/main.js defer></script>
<section class=hoge>
    <h1>HOGE</h1>
    <p>hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge.</p>
</section>
<section class=fuga>
    <h1>FUGA</h1>
    <p>fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga. fuga.</p>
</section>
<section class=piyo>
    <h1>PIYO</h1>
    <p>piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo. piyo.</p>
</section>

bash

yarn run webpack
# or
npx webpack

cssも読み込む必要があったので、style-loader, css-loaderも必要でした。

ちなみにダークテーマの方を読み込むと、見た目がこのような感じでした。

  import Shepherd from "shepherd.js";
- import "shepherd.js/dist/css/shepherd-theme-default.css";
+ import "shepherd.js/dist/css/shepherd-theme-dark.css";

フロントエンドフレーム

reactやvueでも使えるようなので、うれしいです。

API

自分が公式を読んで勉強した部分を書いていきます。詳しく知りたい方は公式の方を参考にしてください。

ステップのデフォルトオプション

Tourのインスタンスを作成するときにdefaultStepOptionsで指定できる。

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shadow-md bg-purple-dark', // 全てのステップでshadow-mdとbg-purple-darkのクラスがつく
    scrollTo: true // 全てのステップでスクロールするかの設定をtrueにする
  }
});

ステップを追加する

tour.addStep('example-step', {
  text: 'This step is attached to the bottom of the <code>.example-css-selector</code> element.', // ステップに表示されるテキスト
  attachTo: '.example-css-selector bottom', // .example-css-selectorの下にステップを表示する
  classes: 'example-step-extra-class', // ステップにクラスを追加する
  buttons: [
    {
      text: 'Next',
      action: tour.next // ステップを次に進める
    },
    {
      text: 'Back', 
      action: tour.back, // ステップを一つ戻す
      classes: 'my-color-gray', // ボタンの色を変えるため、自分でcssを用意して、classを付けてみました
    },
  ]
});

ステップにタイトルを追加する

tour.addStep('example-step', {
    title: 'ステップのタイトル',
    text: 'This step is attached to the bottom of the <code>.example-css-selector</code> element.', // ステップに表示されるテキスト
    attachTo: '.example-step-extra-class bottom',
    buttons: [
        {
            text: 'Next',
            action: tour.next
        },
    ]
});

ステップ終了の`x`ボタンを表示させる

tour.addStep('example-step', {
    text: 'Step Example',
    showCancelLink: true,
    buttons: [
        {
            text: 'Next',
            action: tour.next
        },
    ]
});

xを押したら、ガイドが終了します

任意のステップに移動

ボタンにeventsを設定して、そこから任意のステップに移動できます。clickではなくても、mouseoverなどでも大丈夫です。

import Shepherd from "shepherd.js";
import "shepherd.js/dist/css/shepherd-theme-dark.css";

let tour = new Shepherd.Tour

tour.addStep("hoge", {
    text: "ステップ名を指定してステップをスキップしたり戻ったりできる",
    buttons: [{
        text: "Hoge", 
        events: {
            click() {
                return Shepherd.activeTour.show('hoge');
            }
        }
    }, {
        text: "Fuga", 
        events: {
            click() {
                return Shepherd.activeTour.show('fuga');
            }
        }
    }, {
        text: "Piyo", 
        events: {
            click() {
                return Shepherd.activeTour.show('piyo');
            }
        }
    }]
});

tour.addStep("hoge", {
    text: "Step Hoge の説明",
    attachTo: ".hoge bottom",
    buttons: [{ text: "次へ", action: tour.next }]
});

tour.addStep("fuga", {
    text: "Step Fuga の説明",
    attachTo: ".fuga bottom",
    buttons: [{ text: "次へ", action: tour.next }]
});

tour.addStep("piyo", {
    text: "Step Piyo の説明",
    attachTo: ".piyo bottom",
    buttons: [{ text: "完了", action: tour.complete}]
});

tour.start()

注意

すでにactionが設定されていた場合は、clickイベントは動作しません

tour.addStep("hoge", {
    text: "ステップ名を指定してステップをスキップしたり戻ったりできる",
    buttons: [{
        text: "Fuga", 
        action: tour.next, // こちらが実行されます。↓のクリックイベントは実行されません。
        events: {
            click() {
                return Shepherd.activeTour.show('fuga');
            }
        }
    }]
});

ステップ外のイベントからステップを次に進める

attachTo: "element event" またはattachTo: {selector: '.hoge', event: 'click'}

tour.addStep("todo check", {
  text: "チェックをつけることでTodoを完了にできます<br>チェックを付けてみましょう",
  attachTo: ".guide-check right",
  advanceOn: ".guide-check change", // チェックボックスでchageイベントが発生した場合にステップを次に進める
  buttons: [{text: "戻る", action: tour.back}]
});

複雑なユーザー操作が必要な場合

advanceOnではつらくなってくる場合はこうすると良いようです。

const myStep = myTour.addStep('my-step', options);

yourApp.on('some-event', () => {
  if (myStep.isOpen()){
    Shepherd.activeTour.next();
  }
});

advanceOnで指定しているelementにクラスをつけることができる

  tour.addStep("todo check", {
    text: "チェックをつけることでTodoを完了にできます<br>チェックを付けてみましょう",
    attachTo: ".guide-check right",
    advanceOn: ".guide-check change", // チェックボックスでchageイベントが発生した場合にステップを次に進める
+   highlightClass: "highlight-check", // ステップが表示されている時のみadvanceOnで指定したelementにクラスを付けてくれる
    buttons: [{text: "戻る", action: tour.back}]
  });

該当のステップが表示されている時だけ、classを付けてcheckboxにスタイルを適用することができました

スタイルを変更する

let tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-custom'
  }
});

classを付けてスタイルを変更することができる

sass変数でテーマを調整できる

こちらの変数を指定すると、自分なりにテーマをカスタマイズできるようです。

https://github.com/shipshapecode/shepherd/blob/master/src/scss/_variables.scss

変数名と対応するスタイルはドキュメントを確認してください

https://shipshapecode.github.io/shepherd/#leveraging-sass-variables

webpackでsassを動かして確認

yarn init -y
yarn add -D shepherd.js webpack webpack-cli css-loader style-loader sass-loader node-sass

webpack.config.js

module.exports = {
    mode: "development",
    module: {
        rules: [{
            test: /\.scss/,
            use: ["style-loader", "css-loader", "sass-loader"]
        }]
    }
};

src/index.js

import Shepherd from "shepherd.js";
import "./my-thema.scss";

let tour = new Shepherd.Tour({
    defaultStepOptions: {
      scrollTo: true
    }
});

tour.addStep("step1", {
    title: "Hoge",
    text: "Step Hoge の説明",
    attachTo: ".hoge bottom",
    buttons: [{ text: "次へ", action: tour.next }]
});

tour.start()

src/my-thema.scss

$shepherd-theme-primary: #9b59b6 !default;
$shepherd-theme-secondary: desaturate(lighten($shepherd-theme-primary, 30), 70) !default;
$shepherd-header-background: #eeeeee !default;
$shepherd-element-border-radius: 0 !default;
$shepherd-button-border-radius: 0 !default;
$use-drop-shadow: true !default;

@import '~shepherd.js/src/scss/base';

index.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>shepherd.js Test</title>
<script src=dist/main.js defer></script>
<section class=hoge>
    <h1>HOGE</h1>
    <p>hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge. hoge.</p>
</section>

yarn run webpack #dist/main.jsが出力

sassの変数でスタイルを変更することができました

最後まで読んでいただいてありがとうございましたm(_ _)m