やじうまの杜
JSONデータをキレイに可視化してくれるオンラインツール「JSON Crack」は手軽でお勧め
画像化してクリップボード・ローカルファイルへエクスポートすることも
2022年9月9日 06:45
「やじうまの杜」では、ニュース・レビューにこだわらない幅広い話題をお伝えします。
今日は気軽に使えて、いい感じのJSONエディターを紹介したいと思います。以前に「GitHub」のTwitterアカウントでも紹介されていた「JSON Crack」というWebアプリです。
Looking to understand or explore some JSON? Just paste or upload to visualize it as a graph withhttps://t.co/HlKSrhKryJ😍
— GitHub (@github)April 27, 2022
Thanks to@aykutsarach!pic.twitter.com/0LyPUL8Ezz
かつては「JSON Visio」(jsonvisio.com )という名前だったようですが、レドモンドの方にある巨大IT企業を怒らせる可能性がなくもなかったので、今年の8月末に現在の名前へ変更されたようです。
⚠️ FYI, JSON Visio has been renamed to JSON Crack on all platforms to avoid trademark confusions.https://t.co/DZx851Fovs#jsonvisio#jsoncrack#githubpic.twitter.com/pESabgEBEE
— Aykut Saraç (@aykutsarach)August 30, 2022
「JSON Crack」は「jsoncrack.com」でホストされており、Webブラウザーさえあれば簡単に試すことができます。画面左側のエディター(「Visual Studio Code」と同じく「Monaco」エディターを利用しているそうです)にJSONデータを貼り付けると、右側にその構造がグラフとして描画される仕組みですね。ローカルのJSONファイルをアップロードすることもできます。
エディターとグラフは連動しており、エディターでJSONデータを編集すれば、グラフもリアルタイムでアップデートされます。スキーマがなくても自動でデータ構造を把握するようで、[Ctrl]+[Space]キーで入力補完されるのは便利ですね。初期状態ではダークモードになっていますが、ライトモードにすることもできます。
また、JSONの文法が間違っていれば下線などでその部分を指摘してくれます。エディター部分を折りたたんでグラフだけを表示したり、ノードを検索したり、ツリーを開閉したり、グラフの向きを変えたり、グラフを画像としてクリップボードへコピーしたり、ローカルにダウンロードすることも可能です。JSONデータの構造をわかりやすく可視化して、ブログやスライドに挿入したいといった場合にも役立ちそうですね。
便利そうだけど、社内からアクセスするのは情報漏洩が心配だなぁ……という場合は、「JSON Crack」を自前でホストすればよいでしょう。「Visual Studio Code」拡張機能になればいいのになぁという声も多く寄せられていたので、そのうち実現するかもしれませんね。
なお、最新版は2週間ほど前にリリースされたv2.0.0。ライセンスは「MIT」となっています。