プリザンターの編集画面で前回との差分を表示する

プリザンターのAPIを利用して変更履歴と現在の内容の差分を表示する

【追記】
こちらでは更新verを選択指定しての差分表示ができるようにしました！

差分表示について、こちらの記事を参考にさせて頂きました。
https://qiita.com/implem-noro/items/15c87be43f6b232c7303

変更履歴がAPIにて取得できる！

テーブルの種類を指定する事で取得できます。
TableType: 'History'
https://pleasanter.org/manual/script-api-get

必要なライブラリ

この2つをそれぞれgithubからダウンロードして、以下のコマンドでインストールします。
すると必要な.jsファイルが出力されます。
Node.jsが必要になります。

• diff2html （MIT License）
  • https://github.com/rtfpessoa/diff2html
  • npm install diff2html --save
• jsdiff （BSD License）
  • https://github.com/kpdecker/jsdiff
  • npm install diff --save

ファイルを保存、拡張htmlへの設定

...Implem.Pleasanter\wwwroot\scripts
ここに「diff」といフォルダを作って、必要なファイルを保存する。

• diff2html.min.css
• diff2html.min.js
• diff2html-ui.min.js
• diff.min.js

...Implem.Pleasanter\App_Data\Parameters\ExtendedHtmls
へこの内容でファイルを追加する。

HtmlBodyBottom.html

<script type="text/javascript" src="/scripts/diff/diff.min.js"></script>
<link rel="stylesheet" type="text/css" href="/scripts/diff/diff2html.min.css" />
<script type="text/javascript" src="/scripts/diff/diff2html.min.js"></script>
<script type="text/javascript" src="/scripts/diff/diff2html-ui.min.js"></script>

これを保存したら反映させるために、IISを再起動して準備OK！

追加したスクリプト

以下の内容をスクリプトに追加して「編集」のみにチェック。
編集画面を開いた時に処理されます。

$p.events.on_editor_load = function(){
    let beforeBody = '';
    let nowBody = '';
    $p.apiGet({
        id: $p.id(),
        data: {
            // 条件絞りたい場合は追記する
            // View: {
            //     ColumnFilterHash:{
            //         Ver: 1
            //     }
            // },
            // 現在と変更履歴のテーブルを取得するためにこの指定
            TableType: 'NormalAndHistory'
        },
        done: function(ret){
            // レコードが一つより多ければそれぞれ取得
            if (ret.Response.Data.length > 1){
                nowBody = ret.Response.Data[0];
                beforeBody = ret.Response.Data[1];
                diff2html();
            }
            else
            {
                return false;
            }
        },
        fail: function(data){
            console.log('API取得失敗');
        }
    });
    //　APIで取得した内容からその差分を表示する
    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 = Diff.createPatch('内容', beforeBody.Body, nowBody.Body, 'ver' + beforeBody.Ver, 'ver' + nowBody.Ver);
        var targetElement = document.getElementById('app');
        // オプション設定内容はdiff2htmlのgithub参照
        var configuration = {
            drawFileList: false,
            fileListToggle: false,
            fileListStartVisible: false,
            fileContentToggle: false,
            matching: 'lines',
            outputFormat: 'side-by-side',
            synchronisedScroll: true,
            highlight: true,
            renderNothingWhenEmpty: false,
        };
        var diff2htmlUi = new Diff2HtmlUI(targetElement, unifiedDiff, configuration);
        diff2htmlUi.draw();
        diff2htmlUi.highlightCode();
    };
}

• 取得する項目
  unifiedDiff = Diff.createPatch('内容', beforeBody.Body, nowBody.Body, 'ver' + beforeBody.Ver, 'ver' + nowBody.Ver);
  この部分を「.Body」にしているので「内容」の差分となる。
  ここを変えれば他の項目でも可能。

• 表示結果
  

かんしゃ

ついったで、APIで変更履歴取得できないのかな。ってつぶやいてたら公式の方が反応してくださり、今回の所のマニュアル更新して頂きました！
HAYATOくんさんありがとうございます！！！