Webアプリにマニュアル埋込（前編）

<script src="https://cdn.jsdelivr.net/npm/shepherd.js@9.1.1/dist/js/shepherd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@9.1.1/dist/css/shepherd.css"/>

<!--説明したい部分に任意かつ一意のクラス名を付与します-->
<!--今回は「tutorial_01、tutorial_02」としています。-->
<div id = 'tutorial_01'> 
   ・・・・
</div>
<div id = 'tutorial_02'> 
   ・・・・
</div>

<script>
	//ツアークラスのインスタンスを作成します。
	const tutorial = new Shepherd.Tour({
		useModalOverlay: true,		//trueで説明部分以外をうす暗くします
		defaultStepOptions: {
			classes: 'tour_modal',	//自身で設定したcssのclassが適用できます。効く効かないはCHROMEで検証して下さい。
			scrollTo: true,			//trueにすると説明部分に自動スクロールします
			cancelIcon:{
				enabled:true		//trueにすると説明モーダルの右上に×ボタンが表示されます
			}
		},
		tourName:'tutorial'		//チュートリアルに名称を付けれます
	});
	
	//以降、「addStep」でチュートリアルを追加していきます。
	//表示される順番はaddStepで記載した順に上から表示されます。
	tutorial.addStep({
		//title(ヘッダ部)、text(説明文)ともに` `で括るとHTMLが使えます
		title: `<p class='tour_header'>ご登録ありがとうございます。</p>`,
		text: `<p class='tour_discription'> これから簡単にWEBREZの使い方を説明します。
			  <br>10分ほどの操作になります。
			  <br>後にしたい方は「後で見る」タップして下さい。</p>`,
		//ボタンの定義
		buttons: [
			{
				text: '後で見る',			//ボタンに表示させるtext
				action: tutorial.cancel		//ボタンの処理(next,back,cancel,complete)とあり、名称の通りの処理が実行されます
			},
			{
				text: 'Next',
				action: tutorial.next
			}
		]
	});
	tutorial.addStep({
		title: `<p class='tour_header'>チュートリアル</p>`,
		text: `<p class='tour_discription'>まずはレジに表示する商品を登録しましょう。</p>`,
		buttons: [
			{
				text: 'back',
				action: tutorial.back
			},
			{
				text: 'Next',
				action: tutorial.next
			}
		]
	});
	
	//このステップでは「次へ」等のボタンはなく「×」ボタンも非表示としています。
	//別画面に強制的に遷移させたい場合など、このようにすると指定されたボタン等しか操作できなくなるため
	//画面遷移を意図どおりに操作できます。
	tutorial.addStep({
		title: `<p class='tour_header'>チュートリアル</p>`,
		text: `<p class='tour_discription'>「商品登録」から商品を追加します。<br><br>「商品登録」ボタンをタップしてください。</p>`,
		attachTo: {
			element: '#tutorial_01',	//上でマーキングしたidを指定します
			on: 'bottom'				//指定した場所の下に説明を表示します（他,top,left,rightなど）
		},
		cancelIcon:{
			enabled:false	//インスタンス作成時に有効にした×ボタンを無効にします。
		}
		//buttons定義はなし
	});
  //最後にstartメソッドでツアーが開始されます。
　//下の様に自動実行でもonClickで発火させてもいいと思います。
  tutorial.start();
</script>