【更新verを選択】プリザンターの編集画面で前回との差分を表示する

[以前に](https://qiita.com/gug1msp/items/95cc3097fd185bbef0d4)プリザンターの編集画面で過去verとの差分を表示するというスクリプトを作りました。
今回は、前回と現在の差分だけでなく**更新verを選択指定して**差分を表示できるようにしてみました！

# 必要なライブラリ
使用するのは以前のと同じなのでそちらを参照。
「必要なライブラリ」、「ファイルを保存、拡張htmlへの設定」という所です。

https://qiita.com/gug1msp/items/95cc3097fd185bbef0d4

# スクリプト全体
この内容をスクリプトに追加して「編集」のみにチェックする。
編集画面を開いた時に処理されるようになります。

```javascript
var responseData = "";

$p.events.on_editor_load = function () {
  $p.apiGet({
    id: $p.id(),
    data: {
      // 条件絞りたい場合は追記する
      // View: {
      //      ColumnFilterHash:{
      //          Ver: "[\"1\",\"2\"]"
      //      }
      //  },
      // 現在と変更履歴のレコードを取得するようにこの指定
      TableType: "NormalAndHistory",
    },
    done: function (ret) {
      // レコードが一つより多ければそれぞれ取得
      if (ret.Response.Data.length > 1) {
        // 結果のデータ部分をグローバル変数へ
        responseData = ret.Response.Data;

        initializeDiff2html();
      }
    },
    fail: function (data) {
      console.log("API取得失敗");
    },
  });
};

//　APIで取得した内容からその差分を表示する
function initializeDiff2html() {
  $("#diff2html").remove();
  $("#Editor").after(
    '<div id="diff2html" style="display:inline-block;"></div>'
  );
  $("#diff2html").css("width", "calc(100% - 250px)");
  // セレクトボックスを二つ置く
  appendSelect =
    '<div id="verSelect"><laber>更新前 </laber><select id="beforeSelect"></select><laber>  → 更新後 </laber><select id="afterSelect"></select></div>';

  $("#diff2html").append(appendSelect);

// セレクトボックスにver番号を入れる
// 更新前の方は現在の分は入れない
  for (let i = 1; i < responseData.length; i++) {
    $("#beforeSelect").append(
      $("<option>")
        .val(responseData[i].Ver)
        .text("Ver " + responseData[i].Ver)
    );
  }
  // セレクトボックスにver番号を入れる
  // 更新後の方
  for (let i = 0; i < responseData.length; i++) {
    $("#afterSelect").append(
      $("<option>")
        .val(responseData[i].Ver)
        .text("Ver " + responseData[i].Ver)
    );
  }

  html = '<div id="app">';
  $("#diff2html").append(html);

  changeDiff2html();
  // 選択を変更したら表示内容変更を呼ぶ
  document.getElementById("beforeSelect").onchange = function () {
    changeDiff2html();
  };
  document.getElementById("afterSelect").onchange = function () {
    changeDiff2html();
  };
}

function changeDiff2html() {
  // 選択されているverを更新前と後それぞれ取得
  let beforeSelectValue =
    responseData.length - Number(document.getElementById("beforeSelect").value);
  let afterSelectValue =
    responseData.length - Number(document.getElementById("afterSelect").value);
  // 差分の対象をタイトル_Titleと内容_Bodyにしている。
  // 他の項目も追加したい時はここで追加する。
  // responseData[beforeSelectValue].xxxx
  unifiedDiff = Diff.createPatch(
    "更新",
    responseData[beforeSelectValue].Title +
      responseData[beforeSelectValue].Body,
    responseData[afterSelectValue].Title + responseData[afterSelectValue].Body,
    "ver" + responseData[beforeSelectValue].Ver,
    "ver" + responseData[afterSelectValue].Ver
  );

  // オプション設定内容は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 targetElement = document.getElementById("app");
  var diff2htmlUi = new Diff2HtmlUI(targetElement, unifiedDiff, configuration);
  diff2htmlUi.draw();
  diff2htmlUi.highlightCode();
}
```

# 結果
更新verを切り替える事ができました！
2つ前の変更からのを見たいなーとか。
これで差分対象にしているのは、タイトルと内容になるので、前回に日付の更新だけしていたりする場合は、内容に対しての前回変更が以前の方法だと分からなかったけど、これで更新verをさかのぼる事で、内容についての変更が3つ前とかでも差分表示できるようになりました！
下記のような時。
- 項目作成ver1
- 内容変更ver2
- 日付を変更ver3
- この状態で編集画面の差分表示には、前回と現在の差分となるので内容の変更はなしになる（以前の方法）
- それが、今回変更した方法で、ver1とver3の比較にすると内容の差分も分かる！

![差分の表示.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2383487/a290d2b6-ddf7-1c05-05af-1f6d4840fb9b.gif)

# 参考
- https://qiita.com/implem-noro/items/15c87be43f6b232c7303
- https://qiita.com/horikeso/items/72f5953425f13bbde5c3
- https://github.com/rtfpessoa/diff2html
- https://github.com/kpdecker/jsdiff