納品ファイルに添付する差分確認用HTMLファイルを生成する

2021/05/05（水）

納品手段が完パケファイルの時で、差分が確認できるファイルの添付が必要な場合も往々にあると思います。

.diffファイルであればgitを用い生成できますが、非エンジニアの担当者にも優しいHTMLとして生成したい場合はdiff2htmlを用いると一瞬で生成が可能です。

インストール

diff2htmlのCLI版をインストールします。どのプロジェクトからも利用できるようグローバルへインストールするといいでしょう。

npm install -g diff2html-cli

使い方

基本的にはgit diffに付け加えるだけです。old_sha1とnew_sha1に差分を取りたい間のハッシュ値を指定します。

git diff old_sha1 new_sha1 | diff2html --input stdin --su open --file diff.html

実行後はカレントディレクトリ直下にdiff.htmlファイルが生成されます。

参考：オプション

カスタマイズ

生成されたファイルをそのまま使用してもよいのですが、タイトルがデフォルトでは「Diff to HTML by rtfpessoa」となっているので必要に応じて編集するなどすると分かりやすくなりそうです。

またオプションの--hwtでカスタムテンプレートを指定する事もできます。以下の基本内容を参考に側だけ用意し、別途CSSを変更するなどしてあげればお好みのデザインに変更できます。

custom-template.html

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" />
    <!--diff2html-css-->
    <!--diff2html-js-ui-->
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const targetElement = document.getElementById('diff');
        const diff2htmlUi = new Diff2HtmlUI(targetElement);
        //diff2html-fileListToggle
        //diff2html-synchronisedScroll
        //diff2html-highlightCode
      });
    </script>
  </head>

  <body>
    <div id="diff">
      <!--diff2html-diff-->
    </div>
  </body>
</html>

カスタムテンプレートを使った生成は以下の形でファイル名を指定するだけです。

git diff old_sha1 new_sha1 | diff2html --input stdin --su open --hwt custom-template.html --file diff.html