iPhoneで Grafanaの グラフを 参照できる アプリ Grafanizer 作ってます。 詳しくは こちらへ

JSONファイル等の変更を折りたたみながら確認できるFoldingDiffというサービスを作った

Mar 23, 2018  
#dev

タイトル通りだけど、構造化テキストデータ(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。

folding-diff.png

こんな感じで、初期的に折り畳まれたデータを、変更があった箇所まで開いて辿ることが出来る。

まあ、これが実用的かと聞かれるとなかなか微妙な感じもするが、Diffの表示に慣れてない特に非技術者などにはなかなかわかりやすそうな感じがする。

技術的な話もしておきたいところだが、特別な内容は殆ど無くて

  • やっぱり Vue.js は便利で一見複雑になりそうな開閉式のツリー表示も楽に実装できる
  • GAEGolang の組み合わせはいつも最高で簡単に最高の環境が手に入る
  • Bulma を使えばクリーンでレスポンシブ対応なサービスが容易に作れる
  • 上記を組み合わせた DegaVu を使うとお手軽にWebサービスが作れる(手前味噌

あたりが全て。ソースの公開はまだ出来てないが、早めに公開したいと思う。


今回は仕事で必要になって考え出したのだが、こういう新しいことを考えるのはなかなか楽しい。

まだ詰めが甘くてもう少し考えなきゃいけないところがあるが、新しいデータの魅せ方というのは今後も考えていきたい。