やじうまの杜

JSONデータをキレイに可視化してくれるオンラインツール「JSON Crack」は手軽でお勧め

画像化してクリップボード・ローカルファイルへエクスポートすることも

2022年9月9日 06:45

　「やじうまの杜」では、ニュース・レビューにこだわらない幅広い話題をお伝えします。

オンラインJSONエディター・ビジュアライザー「JSON Crack」

　今日は気軽に使えて、いい感じのJSONエディターを紹介したいと思います。以前に「GitHub」のTwitterアカウントでも紹介されていた「JSON Crack」というWebアプリです。

　かつては「JSON Visio」（jsonvisio.com ）という名前だったようですが、レドモンドの方にある巨大IT企業を怒らせる可能性がなくもなかったので、今年の8月末に現在の名前へ変更されたようです。

　「JSON Crack」は「jsoncrack.com」でホストされており、Webブラウザーさえあれば簡単に試すことができます。画面左側のエディター（「Visual Studio Code」と同じく「Monaco」エディターを利用しているそうです）にJSONデータを貼り付けると、右側にその構造がグラフとして描画される仕組みですね。ローカルのJSONファイルをアップロードすることもできます。

画面左側のエディターにJSONデータを貼り付けると、右側にその構造がグラフとして描画される
ローカルのJSONファイルをアップロードすることも

　エディターとグラフは連動しており、エディターでJSONデータを編集すれば、グラフもリアルタイムでアップデートされます。スキーマがなくても自動でデータ構造を把握するようで、［Ctrl］＋［Space］キーで入力補完されるのは便利ですね。初期状態ではダークモードになっていますが、ライトモードにすることもできます。

［Ctrl］＋［Space］キーで入力補完
ライトモードにすることも

　また、JSONの文法が間違っていれば下線などでその部分を指摘してくれます。エディター部分を折りたたんでグラフだけを表示したり、ノードを検索したり、ツリーを開閉したり、グラフの向きを変えたり、グラフを画像としてクリップボードへコピーしたり、ローカルにダウンロードすることも可能です。JSONデータの構造をわかりやすく可視化して、ブログやスライドに挿入したいといった場合にも役立ちそうですね。

エラーの検出
グラフの向きを変えた様子
グラフを画像としてクリップボードへコピーしたり、ローカルにダウンロードすることも。その際は背景色を設定できる
ダウンロードしたファイルを画像ビューワーで表示した様子

　便利そうだけど、社内からアクセスするのは情報漏洩が心配だなぁ……という場合は、「JSON Crack」を自前でホストすればよいでしょう。「Visual Studio Code」拡張機能になればいいのになぁという声も多く寄せられていたので、そのうち実現するかもしれませんね。

　なお、最新版は2週間ほど前にリリースされたv2.0.0。ライセンスは「MIT」となっています。