See the Pen Shepherd Sample by 奥村健吾 (@okumurakengo) on CodePen.
このようにWebサービスの使い方の説明のガイドを簡単に作ることができます
Shepherd
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変数でテーマを調整できる
こちらの変数を指定すると、自分なりにテーマをカスタマイズできるようです。
変数名と対応するスタイルはドキュメントを確認してください
- 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