「コラボフロー Advent Calendar 2023」14日目の記事です！

今年も残すところ2週間ちょっとですね・・・
今年は長年応援してきた阪神タイガースが日本一になり、最高の年でした🎉
今から来年の連覇を願ってやまないこにおです。

みなさん、申請書の画面や入力方法のガイドはどうされてますでしょうか？
マニュアルを作成したり、申請書のフォームに説明を記載したりされてるのではないかなと思います。

でもマニュアルの作成は項目が変わる度に画面キャプチャを取り直したり、フォームに説明を入れすぎると申請書の体裁を整えるのが難しかったりしますよね💦

そこで今回は、コラボフローのJavaScript APIを利用した入力ガイドを作成する方法をご紹介します！

利用するライブラリ

今回は「TourGuide JS」というJavaScriptライブラリを利用します。
TourGuide JSの使い方は非表示にシンプルで、簡単にステップ形式のチュートリアルを作成することができます。

フォームの作成

まずはフォームを作成します。
今回は以下のような稟議書のフォームを作成しました。

フォーム上部にある「入力ガイド開始」のリンクは、ラベルパーツで作成しており、以下のHTMLをセットしています。

<a href="javascript:void(0)" onclick="startTour();return false;">入力ガイド開始</a>

JavaScript カスタマイズコード

次に入力ガイドを表示するJavaScriptカスタマイズコードを作成します。

入力ガイドのステップは、以下のように形式で指定します。

const tourSteps = [
	{
		title: '｛ガイドのタイトル｝',
		content: '｛ガイドの内容｝',
		target: '#｛パーツID｝',
		order: '｛ガイド表示の順番｝'
	},
    ...
]

今回作成したフォームに合わせて実装したコードが以下になります。
各ステップの内容を指定し、インスタンスを生成して実行するだけのシンプルなコードです。

tour.js

'use strict';

const tourSteps = [
	{
		title: '稟議書番号',
		content: '稟議書番号は「RINGI」+「yyyymmdd」+「連番」の形式で入力してください。',
		target: '#fidNo',
		order: '1'
	},
	{
		title: '内容または目的',
		content: '分類に「契約」を含む場合は、契約内容について記入してください。',
		target: '#fidPurpose',
		order: '2'
	},
	{
		title: '添付資料',
		content: '金額が10万以上の場合は、見積書を添付してください。',
		target: '#fidAttach',
		order: '3'
	},
	{
		title: '特記事項',
		content: '急ぎ承認が必要な場合は、特記事項に理由を記入してください。',
		target: '#fidNotices',
		order: '4'
	}
];

const tourGuide = new tourguide.TourGuideClient({
	steps: tourSteps
})

// 入力ガイドの開始
function startTour() {
	tourGuide.start();
}

CSSカスタマイズコード

次にCSSのカスタマイズコードを作成します。
コラボフローのCSSによりガイド内のフォントが小さくなってしまうため、以下のようなCSSを作成します。

tour.css

.tg-dialog,.tg-dialog-title,button.tg-dialog-btn {
	font-size: 15px !important;
}

カスタマイズ設定

フォーム設定画面のカスタマイズタブにて以下のURL指定、JavaScriptファイルをアップロードします。

設定値

JavaScriptファイル

順番	指定方法	ファイル名/URL
1	URL	https://unpkg.com/@sjmc11/tourguidejs/dist/tour.js
2	ファイル	tour.js

CSSファイル

順番	指定方法	ファイル名/URL
1	URL	https://unpkg.com/@sjmc11/tourguidejs/dist/css/tour.min.css
2	ファイル	tour.css

入力ガイド開始！

新規文書から作成したフォームの申請入力画面を開き、「入力ガイド開始」のリンクをクリックすると、以下のようにツアーガイドが表示されます💁‍♂️

まとめ

いかがでしたでしょうか？
各ステップの内容を指定するだけで簡単にステップ形式のガイドを作成することができました！
またフォームのレイアウトが変わっても、パーツIDで要素を指定しているため、カスタマイズ側のコード変更が不要なのもよいですね✨

TourGuide JSのドキュメントを確認していたところ、コード側でツアーの途中にステップを追加することもできるようなので、ある条件の時だけ説明を追加するということもできそうです！

ご興味ある方は是非お試しくださいー🙋‍♂️