「Web サイト更新」や「契約書作成」「コードレビュー」などの業務にて、既存ドキュメントを更新する場合や繰り返しレビューが行われる場合、レビュー工程にて変更箇所が明確だと効率的に業務を進めることができます。
本記事では、処理フォーム画面でデコレーション（HTML / JavaScript）を利用して、2つの文字型データ項目の差分を表示するサンプルを紹介します。データ項目の値の参照には「Questetra Form JavaScript API」を利用しています。
文字型データ項目の差分を表示（diff）
2つの文字型データ項目（入力1 [q_input1]、入力2 [q_input2]）の入力値を取得し、差分（diff）を計算し表示するサンプルです。入力テキストに差分がある場合は、次の画像のように差分のある部分がハイライト表示されます。
ガイドパネル型データ項目を準備し、「説明」欄に下記のサンプルコードをコピー & ペーストしてお試しください。なお、この例では、「入力1」「入力2」のデータ項目は「編集可」となっていますが、一方または両方が「表示のみ」であっても動作します。また、コードを入力したガイドパネル型データ項目は「表示のみ」に設定してください。
サンプルコード
<script src="https://cdn.jsdelivr.net/npm/diff@7.0.0/dist/diff.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.48/bundles/js/diff2html-ui.min.js"></script>
<script>
qbpms.form.on('ready', () => {
// link タグによるスタイル指定を、head タグ内に（強引に）追加
const addLinkTag = () => {
const linkTag = document.createElement('link');
linkTag.rel = 'stylesheet';
linkTag.href = 'https://cdn.jsdelivr.net/npm/diff2html@3.4.48/bundles/css/diff2html.min.css';
document.head.appendChild(linkTag);
};
addLinkTag();
const drawDiff = () => {
const input = qbpms.form.get('q_input1');
const target = qbpms.form.get('q_input2');
const unifiedDiff = Diff.createPatch("入力1 / 入力2", input, target);
const targetElement = document.getElementById('q_diff');
const diff2htmlUi = new Diff2HtmlUI(targetElement, unifiedDiff, {
outputFormat: 'side-by-side',
matching: 'lines',
drawFileList: false,
fileListToggle: false,
fileContentToggle: false,
});
diff2htmlUi.draw();
};
drawDiff();
qbpms.form.on('change', 'q_input1', drawDiff);
qbpms.form.on('change', 'q_input2', drawDiff);
});
</script>
<div id="q_diff"></div>利用ライブラリ
本サンプルでは、次の2つの（外部）ライブラリを利用しています。
jsdiff
テキスト間の差分を計算し、UnifiedDiff 形式で出力します。
diff の計算は奥が深く、jsdiff は軽量なライブラリです。大きなテキストの差分計算はあまり得意ではありません。
UnifiedDiff 形式で出力できれば次の diff2html を利用して処理できるので、diff-match-patch など他のライブラリに置き換えることも可能です。
diff2html
UnifiedDiff 形式の差分を受け取り、HTML で表示します。
- diff2html: https://diff2html.xyz/
デモ動画
Appendix: デコレーションとは
デコレーションは、処理担当者が入力フォームを利用しやすくするために、アプリ設計者が利用できる機能です。
データ項目の［説明］を設定すれば、入力フォームの下部に “注記” として表示されるようになります。プレーンテキストだけでなく HTML や JavaScript も設定できるので、”業務上の注意” を強調させる、”関連サイトの URL” のリンク表示させる、”入力文字数カウンタ” を表示させるなど、業務効率を上げる様々な工夫を実現できます。
本記事では、「Questetra Form JavaScript API」（Professional Edition で利用可）を使って、文字型データ項目に入力された値（テキスト）を取得しています。「Questetra Form JavaScript API」を利用できる方を対象としておりますので、まだ使ったことのない方は、次のドキュメントなどで学習していただくとサンプルコードも理解しやすいと思います。
「Questetra Form JavaScript API」の基本的な使い方