プリザンターにオンラインチュートリアルを実装する(TourGuide JS編)

はじめに

プリザンター使ってますか？
久しぶりにプリザンターの機能をいじったので記事にします。

以前、intro.js を使ってプリザンターにオンラインチュートリアルを実装したのですが、今回は tourguide.js を使います。

今回のポイントは３つです。

• 無償で利用可能な tourguide.js を使う
• 教育記録（オンラインチュートリアルの閲覧記録）をプリザンターに残す
• cookieを使って、オンラインチュートリアルの表示を制御する（初回利用時に表示したり、cookieの値を変更して再教育したりする）

実装

詳しい説明は前回の記事で記載したので、すぐにコードを載せます。
プリザンターの「テーブルの管理」-「スクリプト」タブで「新規作成」ボタンをクリックして、「スクリプト」欄に以下のコードを記述します。

// ボタン作成
const tour_button = '<button id="tutorial" class="button button-icon" type="button" data-icon="ui-icon-lightbulb">使い方</button>';

// ウィンドウ下部ボタン行の左端にボタンを追加
const buttons = document.getElementById("MainCommands");
buttons.insertAdjacentHTML('afterbegin', tour_button);

// tourguide js読み込み
const tourguide_js = document.createElement("script");
tourguide_js.src = "https://unpkg.com/@sjmc11/tourguidejs/dist/tour.js";
document.body.appendChild(tourguide_js);

// tourguide css読み込み
const tourguide_css = document.createElement("link");
tourguide_css.href = "https://unpkg.com/@sjmc11/tourguidejs/dist/css/tour.min.css";
tourguide_css.rel = "stylesheet";
tourguide_css.type = "text/css";
const header = document.getElementsByTagName("head")[0];
header.appendChild(tourguide_css);

// js-cookie読み込み
const jscookie = document.createElement("script");
jscookie.src = "https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js";
document.body.appendChild(jscookie);

window.onload = function(){
	const tg = new tourguide.TourGuideClient();
	const page_cookie = "pleasanter-xxxxxx-list"; // xxxxxxをサイトIDに置き換える
	tg.setOptions({
		// ＝＝＝＝　ここでチュートリアルを記述する　＝＝＝＝
		steps: [
			{content: 'チュートリアルにようこそ。<br>このチュートリアルはプリザンターの「スクリプト」で作成しています。'},
			{target: '#tutorial', content: 'このチュートリアルは初回起動時に表示されます。<br>あとで見たくなったら「使い方」をクリックします。'},
			{target: document.querySelector('li'), content: '「新規作成」で新しいレコードを登録します。<br>登録の仕方は「新規作成」画面の「使い方」ボタンをクリックして確認してください。'},
			{target: document.querySelectorAll('tr')[1], content: '登録したレコードです。<br>クリックすると編集画面に入り、レコードを編集することができます。<br>編集の仕方は編集画面の「使い方」ボタンをクリックして確認してください。'},
			{target: document.querySelector('thead'), content: '各列のタイトルにマウスカーソルを合わせると並び順メニュー（昇順／降順）が表示されます。'},
			{target: '#ViewFilters', content: '各列に条件をセットして絞り込むことができます。'},
		],
		'nextLabel': '次へ →',
		'prevLabel': '← 戻る',
		'finishiLabel': '完了',
	});

	// ボタンクリック時の処理
	document.getElementById("tutorial").onclick = function() {
		// チュートリアル実行
		tg.start();
	}

	// 初回表示
	if(Cookies.get(page_cookie) != 'viewed'){
		tg.start();
	}
	
	// チュートリアル終了時の処理
	tg.onFinish(()=>{
		return new Promise((resolve) => {
			// 閲覧履歴をcookieに保存
			Cookies.set(page_cookie, 'viewed', { expires: 365 });
			
			// 教育記録をプリザンターに登録
			$p.apiCreate({
				id: yyyyyy,  // yyyyyyを教育記録サイトのIDに置き換える
				data: {
					ClassHash: {
						ClassA: $p.userId(),
						ClassB: $p.userName(),
						ClassC: "〇〇〇システム",
					},
					DateHash: {
						DateA: new Date(),
					},
				},
				done: function (data) {
					$p.clearMessage();
					const message = {
						Css: 'alert-success',
						Text: '教育記録を登録しました'
					};
					$p.setMessage('#Message',JSON.stringify(message));
				},
				fail: function (data) {
					console.log(data);
				}
			});
			
			return resolve(true);
		})
	})
}

「出力先」欄は「一覧」にチェックを付けます。

スクリプトを保存してサイトの一覧画面を開くと、チュートリアルが開始します。

チュートリアルを最後まで読んで「完了」ボタンをクリックすると、教育記録が登録されます。

まとめ

intro.js の記述を流用できるので、それほど時間はかからず完了しました。

会社の規則で「システム設置者がユーザに教育を実施すること」が定められたので、これで対応しようと思います。