プリザンターで編集中の差分内容を行単位で表示させる

概要

プリザンターの内容項目や説明項目を複数行で編集するとき、更新ボタンを押す前に自分が行単位でどこを編集したかをセルフチェック的な感じで確認したくなることがあったので、GitHubのようなイメージで画面下部に差分内容を行単位で表示させるスクリプトを書いてみました。

試した環境

プリザンター 1.3.27.1
OS: Windows10
DB: SQL Server

スクリプトの設定

HTMLでdiffを表示させる方法を調べてみたところ、外部ライブラリ jsdiff と diff2html を利用することで簡単にできることがわかりました。短い記事ですが、以下が参考になりました。

テーブルの管理画面からスクリプトに以下の内容を設定することで、画面下部に編集中の差分内容が表示されます。スクリプトの中でテーブルの種類、差分を確認したい項目IDと表示名を指定してください。スクリプト設定画面の出力先は「編集」をチェックしてください。

スクリプトに設定する内容

(function () {
    // テーブルの種類を指定（期限付きテーブルの場合はIssues、記録テーブルの場合はResults）
    var tableType = 'Issues';
    // 差分を確認したい項目IDと表示名を指定
    var targetColumnId = 'Body';
    var targetColumnName = '内容';
    // 編集前と編集後の値を格納する変数
    var value1 = '';
    var value2 = '';
    // 外部ライブラリの読み込み（jsdiff／diff2html）
    var script1 = document.createElement('script');
    var script2 = document.createElement('script');
    var script3 = document.createElement('script');
    var css1 = document.createElement('link');
    script1.src = 'https://cdnjs.cloudflare.com/ajax/libs/jsdiff/3.4.0/diff.min.js';
    script2.src = 'https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.3/diff2html.min.js';
    script3.src = 'https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.3/diff2html-ui.min.js';
    css1.setAttribute('rel', 'stylesheet');
    css1.setAttribute('type', 'text/css');
    css1.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.3/diff2html.min.css');
    document.body.appendChild(script1);
    document.body.appendChild(script2);
    document.body.appendChild(script3);
    document.body.appendChild(css1);
    // 編集画面ロード時の値を取得する
    $p.events.on_editor_load = function () {
        value1 = $p.getControl(targetColumnId).val();
    };
    // 対象項目を変更したタイミングで値を取得して差分を表示する
    $(document).on('change', '#' + tableType + '_' + targetColumnId, function () {
        value2 = $p.getControl(targetColumnId).val();
        diff2html();
    });
    // 編集画面の下部に対象項目の編集前後の差分を表示する関数
    function diff2html() {
        $('#diff2html').remove();
        $("#Editor").after('<div id="diff2html" style="display:inline-block;"></div>');
        $('#diff2html').css("width","calc(100% - 250px)");
        html = '<div id="app">';
        $('#diff2html').append(html);
        unifiedDiff = JsDiff.createPatch(targetColumnName, value1, value2, 'before', 'after');
        diff2htmlUi = new Diff2HtmlUI({diff: unifiedDiff});
        diff2htmlUi.draw('#app', {inputFormat: 'json', outputFormat: 'side-by-side', matching: 'lines'});
    };
})();

結果

おわりに

上記のスクリプトを設定することで、意図しない更新誤りを防止する効果が期待できるのでぜひ試してみてください。取引先とのやりとりなど、可能な限り更新誤りを防止したい場面などで有効になりそうです。APIで更新履歴から過去バージョンを指定して比較とかもできるようになるといいですね。（今後のプリザンターに期待！）

参考リンク

- HTMLでdiffを表示させてみる - Qiita
- kpdecker/jsdiff: A javascript text differencing implementation.
- rtfpessoa/diff2html: Pretty diff to html javascript library (diff2html)
- 私がよく使うJSからの外部JSの読み込み方法 - Qiita
- 外部CSSファイルをJavascriptから読み込む方法 - WEB制作の解決策FAQブログ
- 項目名とデータベース上のカラム名の対応 | Pleasanter
- テーブルの管理：スクリプト | Pleasanter
- 開発者向け機能：スクリプト：$p.events.on_editor_load | Pleasanter
- 開発者向け機能：スクリプト：$p.getControl | Pleasanter