Shepherdは、Webアプリケーションでガイド付きユーザジャーニーを作成するためのシンプルなインターフェイスを提供するJavaScriptライブラリである。フレームワークに依存せず、使いやすく、デスクトップアプリケーションとモバイルアプリケーションの両方でうまく機能する。
ガイド付きユーザジャーニや製品ツアーは、新しいユーザをオンボーディングし、既存のユーザがアプリケーションの新しい機能を発見するのに役立つ一般的な方法である。
Shepherdを使って新しいガイド付きツアーを開始するには、npm/yarnを使ってライブラリをインストールするか、インストールガイドで提供されているCDNから直接ライブラリを取得する。その後、ツアーを初期化し、以下の例に従ってツアーに必要な手順を追加する。
// only needed when installing via npm/yarn
import Shepherd from 'shepherd.js';
const exampleTour = new Shepherd.Tour({
useModalOverlay: true,
defaultStepOptions: {
scrollTo: true
}
});
この例では、初期化中に2つのカスタムプロパティを追加している。
useModalOverlayによって、ツアーモーダルとターゲット要素の背後に背景が作成される。これにより、ツアーモーダルがはるかに読みやすくなる。
scrollToによって、ステップが表示されたときにターゲット要素が表示されるようにスクロールするようにShepherdに指示される。
tour.addSteps([{
id: 'first-step',
text: 'This is the first step of the tour',
attachTo: {
element: '.example-css-selector',
on: 'bottom'
}
}]);
ツアーが初期化されると、開発者はaddStepsメソッドを介して個々のステップを追加し、一連のステップを実施する。
最後に、tour.start()によってツアーが開始される。開発者は、ツアーがすぐにトリガーされないように、setTimeoutを追加することを検討すべきである。開発者は、訪問のたびに再度表示されないように、ユーザにどのガイド付きツアーが表示されたかも追跡する必要がある。
Shepherdが使用するデフォルトでは、ライブラリ機能は使われていない。開発者は、ライブラリを最大限に活用するために、全てのチュートリアルとAPIドキュメントを読むことが推奨されている。
内部的には、SheperdがFloating UI（正式にはPopper.jsと呼ばれる）を使用していることは注目に値する。これは、ダイアログウィンドウが常に表示され、適切に配置されるようにするツールチップおよびポップオーバーの配置エンジンである。
開発者は任意のフレームワークでそのままShepherdを使用できる。一方で、インテグレーションを容易にするためにユーザが管理するライブラリが多数ある（React Shepherdなど）。開発者は、Shepherd Githubリポジトリで一般的なインテグレーションへのリンクを見つけることができる。
ShepherdのソースコードはGithubの公式リポジトリにあり、MITライセンスの下で提供される。
開発者は、寄稿ガイドに従って、Shepherdの開発と保守に参加することが推奨されている。