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

愛用しているプリザンターを盛り上げたいと思い、Qiita初投稿です。
どうぞお付き合いください。

はじめに

「プリザンターでシステムを作ってもなかなか使ってくれない」
「使い方がわからないと言われたが、マニュアルを作るのも手間。そもそも読んでくれる？」
「皆同じ所でつまづくので、実際の画面にチュートリアルを置きたい」
なんて思うことありますよね？

Webシステムにオンラインチュートリアルを組み込む「intro.js」をプリザンターに実装してみました。

「使い方」ボタンをを設置する

• 「テーブルの管理」-「スクリプト」タブで「新規作成」ボタンをクリックします。
• 「スクリプト」欄に下記コードを入力します。

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

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

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

これで「使い方」ボタンが追加されます。

スクリプトでintro.jsを読み込む

スクリプトに下記コードを追加します。

// intro.js読み込み
var introjs = document.createElement("script");
introjs.src = "https://unpkg.com/intro.js/minified/intro.min.js";
document.body.appendChild(introjs);

// css読み込み
var link = document.createElement('link');
link.href = 'https://unpkg.com/intro.js/minified/introjs.min.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var h = document.getElementsByTagName('head')[0];
h.appendChild(link);

javascriptとCSSのURLは「intro.js」に記載されています。

チュートリアルを記述する

チュートリアルは以下の様に記述します。
elementで指定した要素から吹き出しでチュートリアルが表示されます。
elementを省略すると画面中央にチュートリアルが表示されます。

steps: [
	{element: 要素1, intro: チュートリアル1},
	{elemtnt: 要素2, intro: チュートリアル2},
	...
]

「使い方」ボタンでチュートリアルが始まるようにします。

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

補足）初めて画面を開いた時に自動的にチュートリアルを開始する

「js-cookie」を使って、初めて画面を開いた時に自動的にチュートリアルを開始するようにしました。

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

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

// intro.js読み込み
var introjs = document.createElement("script");
introjs.src = "https://unpkg.com/intro.js/minified/intro.min.js";
document.body.appendChild(introjs);

// css読み込み
var link = document.createElement('link');
link.href = 'https://unpkg.com/intro.js/minified/introjs.min.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var h = document.getElementsByTagName('head')[0];
h.appendChild(link);

// js-cookie読み込み
var 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(){
	var intro = introJs();
	var page = 'pleasanter-287135-list';
	intro.setOptions({
		// ＝＝＝＝　ここで説明を記述する　＝＝＝＝
		steps: [
			{intro: 'チュートリアルにようこそ。<br>このチュートリアルはプリザンターの「スクリプト」で作成しています。'},
			{element: '#tutorial', intro: 'このチュートリアルは初回起動時に表示されます。<br>あとで見たくなったら「使い方」をクリックします。'},
			{element: document.querySelector('li'), intro: '「新規作成」で新しいレコードを登録します。<br>登録の仕方は「新規作成」画面の「使い方」ボタンをクリックして確認してください。'},
			{element: document.querySelectorAll('tr')[1], intro: '登録したレコードです。<br>クリックすると編集画面に入り、レコードを編集することができます。<br>編集の仕方は編集画面の「使い方」ボタンをクリックして確認してください。'},
			{element: document.querySelector('thead'), intro: '各列のタイトルにマウスカーソルを合わせると並び順メニュー（昇順／降順）が表示されます。'},
			{element: '#ViewFilters', intro: '各列に条件をセットして絞り込むことができます。'},
		],
		'nextLabel': '次へ →',
		'prevLabel': '← 戻る',
		'doneLabel': '完了',
	});

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

	// 初回表示の場合
	if(Cookies.get(page) != 'viewed'){
		intro.start().onexit(function(){
			// 初回表示完了フラグをcookieに格納する
			Cookies.set(page, 'viewed', { expires: 365 });
		});
	}
}

まとめ

オンラインチュートリアルで、ユーザにも、システム製作者にもやさしいシステムになりました。

最後に、今年も残りわずか。皆さま良いお年をお迎えください！