概要
JSON ファイルを視覚化したいと思ったことはないでしょうか？
JSONファイルは「JavaScript Object Notation」の略称で、プログラム言語の 1 つです。
Object Notation とは人間が容易に読み書きしながらデータを簡単に扱えるようにフォーマットして構造化した記述方法を意味しています。
JSON はテキストをベースとした軽量なデータ交換を行うためのフォーマットとして作成されており、人間が見た時に一目でわかるような構成のため読み込んだり加工しやすくなっております。
しかしながら、やはりテキストベースのため構造が複雑になったり文字量が多くなると、プログラマーの方でも見づらい場合はあります。
そんな中、その JSON をダイアグラム図に変換して一目でわかりやすく描画してくれる Web アプリを発見しましたので、今回はそちらをご紹介いたします。
今回ご紹介する OSS は、JSON オブジェクトからダイアグラム図を生成するツール「JSON Crack」になります。
こちらの JSON Crack はテキスト形式よりもはるかに視認性がよく操作性も良くなるダイアグラムを生成してくれるツールで、画像としてダウンロードしたりクリップボードにコピーすることもできます。
特徴
JSON Crack は以下のような特徴があります。
- 検索ノード
- リンクの共有と埋め込みウィジェットの作成
- 画像としてのダウンロード・クリップボードコピー
- JSON のローカルアップロード、URL フェッチ機能
- 優れた UI/UX
- ライトモード/ダークモード
- エラーメッセージの表示
そのほか素晴らしい機能が盛りだくさんにあります。
もっと詳細が知りたい場合は、以下のページを参照して見てください。
利用手順
それでは早速こちらの OSS の使い方について見ていきましょう！
一般利用
以下の URL からアクセスして利用することができます。
開発時
本リポジトリを開発する際はクローンした後、必要なモジュールをインストールしてローカルサーバーで起動します。
git clone https://github.com/AykutSarac/jsoncrack.com.git cd jsoncrack npm install npm run dev
Docker 利用時
Docker を利用する際は、以下コマンドから実行することができます。
docker run -p 8888:8080 jsoncrack
起動後は、http://localhost:8888 ヘアクセすることで利用することができます。
なお、Docker イメージをビルドする際は以下のコマンドを入力します。
docker build -t jsoncrack .
使用感
私も早速こちらの JSON Crack を利用して見ました。
左側に JSON ファイル、右側にダイアグラムが表示されており、視覚で内容を確認をすることができるので、もし配列が多くなって複雑性が高くなってもわかりやすいですね。
また、右側のダイアグラム図の項目を変更することで JSON ファイルを修正することができるので、操作性も抜群です。
将来的には Swagger Editor のように普及しそうな感じがしてたまりません！
まとめ
今回は JSON オブジェクトからダイアグラム図を生成するツール「JSON Crack」をご紹介しました。
これまで JSON ファイルはテキストベースで編集されていた方も多かったと思いますが、こちらのようにダイアグラム形式で内容を確認することができるので、複雑な JSON ファイルも見やすくなりますね！
また、初心者の方にとっても敷居がグッと低くなったので、もっと JSON ファイルの利用率が高くなるといいですね。
また、こちらの JSON Crack ですが、GitHub 公式アカウントでも取り上げられていました。
今後のバズりに期待ですね ♪
Looking to understand or explore some JSON? Just paste or upload to visualize it as a graph with https://t.co/HlKSrhKryJ 😍
— GitHub (@github) 2022年4月27日
Thanks to @aykutsarach! pic.twitter.com/0LyPUL8Ezz
興味を持たれた方は、ぜひ一度こちらの JSON Crack を使って見てはいかがでしょうか？
ライセンス
GNU General Public License v3.0
