4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

コラボフローAdvent Calendar 2023

Day 14

申請書の入力方法をナビゲート!

Posted at

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

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


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

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

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

利用するライブラリ

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

フォームの作成

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

image.png

フォーム上部にある「入力ガイド開始」のリンクは、ラベルパーツで作成しており、以下の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ファイルをアップロードします。

image.png

設定値

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

入力ガイド開始!

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

tourguide.gif

まとめ

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

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

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

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?