JSON Byte
(json-byte.pages.dev)JSONの可視化ツールです。JSONの可視化ツールには優れたものがたくさんあります。GeekNewsでもこれまで何度か紹介されたことがあります。私自身もそれらのツールをとても便利に使ってきました。
それでも、いつものようにいくつか物足りない点が目につき、そこで自分で作ってみることにしました。基本的な機能は次のとおりです。
- JSONデータをグラフ形式で可視化
- エディタで編集すると可視化に反映
- ノード検索機能
- 型ごとの色分け
私が不便だと感じていた点は次のとおりです。
- 今見ている画面を共有したい
- YMLに対応しているとうれしい
- モバイルでもきちんと表示されるとうれしい
こうした違いがあります。必要に応じて少しずつ機能を追加していくつもりです。もしフィードバックをいただける方や、貢献してくださる方がいれば歓迎します。
ありがとうございます。
26件のコメント
JSONPathで探したいノードだけを強調表示したり、フィルタリングできるとさらに良いと思います。
ミニマップでドラッグして移動できる機能もあると良いのでは、という意見です.. haha 大きなJSONでは目的のノードを見つけるのがなかなか簡単ではないですね（泣）
サイズが大きくなると、レンダリングがかなり大変そうですね（笑）うぅ だいたい50万バイトほど使っています
xyflow は DOM ベースなので、node が多くなるとパフォーマンスがやや低下するようです。パフォーマンス改善も目標の一つとして取り組みたいと思っています。ありがとうございます。
基本的に、すべて折りたたまれた状態でレンダリングされるようにしていただくのも一つの解決策だと思います。どうせ私が見たいのもごく一部ですし。
お、すっきりしていていいですね。合間に使わせてもらいます
フィードバックありがとうございます。
とてもすっきりしていてきれいです。
ただ、ダークテーマに切り替えると、コードウィンドウだけ反映されません。
コードウィンドウは別のテーマとして管理しています。Export の横にある設定を使ってテーマを変更できます。最初は連動させようかと思いましたが、より幅広い選択肢にするため、別作業にしました。
こういうのが必要だったので、とても良いですね。
長くなったリストをまとめて表示する機能があると嬉しいです！
ありがとうございます。
show/lessのようにまとめる機能は、子ノードのレンダリングに関する問題があるため、現行バージョンでは除外しました。良い方法がないか、もう少し検討してみます。いいですね！
ありがとうございます。
Safariだからかもしれませんが、iPadでは正常に表示されませんね
私のiPhoneでは問題なく表示されたので安心していましたが、iPad系はまた違うんですね。時間があるときに確認してみます。ありがとうございます。
よさそうですね！
フィードバックありがとうございます 👍
これはすごく良いですね。コメントするためにログインしました。笑
フィードバックありがとうございます 👍
お、いいですね
フィードバックありがとうございます 👍
ビジュアライゼーション側で変更した内容がエディタにも反映されるようになると、さらに良いと思います
良いアイデアですね。どのように適用するか検討してみます。
複数のJSONファイルをタブなどで切り替えながら扱えるとよいと思います。
タブをサポートしようとしましたが、export/import 時に複雑になりそうだったので、最初のリリースでは除外しておきました。近いうちに追加してみます。
いいですね。これ、Chrome拡張機能 + ファイルシステムの読み取り対応があるといいですね。
でも個人的には、JSONはやっぱりエディタで見るのがいちばん良いと思いました ^_T
インポートを使えばファイルのアップロードが可能です。Chrome拡張機能は検討してみます。ありがとうございます！