KOOTD APIのレスポンスで受け取ったJSONを整理することが多かったんです。特にYouTubeショートを作る時、各項目を1つずつコピーしなきゃいけないのに、毎回ドラッグして選択するのが本当に面倒で。
既存のツールは「全体コピー」しかできないか、シンプルすぎるかのどちらか。自分が欲しいのは特定の値だけをピンポイントでコピーすること。だから作りました。
これは何かというと
JSONを入れるとツリー形式で展開して表示します。各値の横にコピーボタンがあってワンクリックで完了。ネストされたオブジェクトは折りたたみ/展開もできます。キー名でソートも可能。
実際にこうやって使ってます
Kortress YouTubeショートを作る時にJSONデータをよく扱うんです。以前は各項目をいちいちドラッグしてコピーしてましたが、今はボタン1つで終わります。開発中にAPIレスポンスを確認する時にも便利です。
作りながらハマったこと
最初はJSONをそのまま表示しようとしたんですが、ネストが深くなると可読性がゼロに。ツリービューに変えて折りたたみ/展開を入れたらかなり良くなりました。
コピー機能も最初はJSON全体しかコピーできなかったんですが、実際に使ってみると特定の値だけコピーしたい時の方がずっと多い。そこで各値にコピーボタンを付けました。Clipboard APIを使えば簡単です。
モバイルでテストしたらツリービューのボタンが小さすぎてタッチできませんでした。モバイル用にボタンサイズを大きくしてレイアウトを調整しました。
単純な「JSON整形ツール」として始めたのに、結局本当に必要だったのは「各値を楽にコピーできるツール」だったんですね。
試してみたい方はJSONツールからどうぞ。