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

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

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

https://qiita.com/gug1msp/items/ebfdd5e4a4f7937b5534



差分表示について、こちらの記事を参考にさせて頂きました。
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！

## 追加したスクリプト
以下の内容をスクリプトに追加して「編集」のみにチェック。
編集画面を開いた時に処理されます。
```js
$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」にしているので「内容」の差分となる。
ここを変えれば他の項目でも可能。

- 表示結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2383487/dc3ab947-1a0b-f693-22f5-4cba1f396a12.png)


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