タイトル通りだけど、構造化テキストデータ(JSON, YAML, TOML)をDiffにかけて、階層化されたツリーを開閉させながらその結果を確認することができるツールを作ってみた。
こちらからどうぞ → Folding Diff
構造化テキストデータ という名前は こちら から拝借した。JSON等は一般的に 非構造化データの範疇みたい だが、文章だけからなるテキストデータとは違って一応構造化されているものなので、あえてそう呼ぶことにする。
JSONファイルはテキストファイルなので、コマンドラインでも diff
で差分が表示できるし、グラフィカルに表示させたければ Webサービスも利用できる が、それらは行単位での比較が主体となっていて 変更内容を知る ということが一番の目的になっている。
が、構造化テキストデータにおいては どこが変更されたか 、もしくは どこは変更されていないか ということが重要になることがある。同じ構造のオブジェクトを内包する配列のうち一つだけが違っていたり、たくさんあるオブジェクトのうちの一つの要素だったり。
そういったときに構造化テキストデータを行単位で比較させることについて何が足りないかというと、順番や親子関係がよく分からなくなるということである。
例えば、
{
"data": [
{
"key": "bbbb",
"value": {
"left": 100,
"length": 30,
"top": 30,
"width": 100
}
},
{
"key": "aaaaa",
"value": {
"left": 100,
"length": 30,
"top": 30,
"width": 110
}
}
]
}
みたいなデータの一部を変更してから diff
をかけてみると、以下の結果になる。
--- aaa.json 2018-03-26 11:01:04 +0900
+++ bbb.json 2018-03-26 11:02:15 +0900
@@ -15,7 +15,7 @@
"left": 100,
"length": 30,
"top": 30,
- "width": 100
+ "width": 110
}
}
]
これだけでは aaaaa
に変更があったのか bbbb
に変更があったのかがぱっと見て分かりづらい。オプションで表示させる行数を増やすことも出来るが、そもそもの解決方法にはなってない。
一方Webにあるグラフィカルなサービス等では全てのデータが表示されているが、データ量が多くて親子関係が一画面に表示しきれない場合は同じような問題がある。 diff -u
よりはましだが、構造化テキストデータとしての変更点を把握するのはなかなか難しくなる。
という問題を認識しながらどのようなUIがいいか考えてみたのが、折り畳まれた状態でも子要素に違いがあれば変更箇所を認識できるというUI。
こんな感じで、初期的に折り畳まれたデータを、変更があった箇所まで開いて辿ることが出来る。
まあ、これが実用的かと聞かれるとなかなか微妙な感じもするが、Diffの表示に慣れてない特に非技術者などにはなかなかわかりやすそうな感じがする。
技術的な話もしておきたいところだが、特別な内容は殆ど無くて
- やっぱり Vue.js は便利で一見複雑になりそうな開閉式のツリー表示も楽に実装できる
- GAE と Golang の組み合わせはいつも最高で簡単に最高の環境が手に入る
- Bulma を使えばクリーンでレスポンシブ対応なサービスが容易に作れる
- 上記を組み合わせた DegaVu を使うとお手軽にWebサービスが作れる(手前味噌
あたりが全て。ソースの公開はまだ出来てないが、早めに公開したいと思う。
今回は仕事で必要になって考え出したのだが、こういう新しいことを考えるのはなかなか楽しい。
まだ詰めが甘くてもう少し考えなきゃいけないところがあるが、新しいデータの魅せ方というのは今後も考えていきたい。