HULKはHTML/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

JSONを使ってWebアプリケーションを開発する事が増えてきましたが、そのデータは一行にまとめられる場合が多く、人の眼では確認しづらいのが難点です。そこで使ってみたいのがHULK、WebベースのJSONエディターです。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.54.21_thumb.1375792376.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.54.21.1375792376.png)
上にあるのがデモのJSONです。大抵はこれが一行で出力されるでしょう。下にあるのがHULKを使った表示です。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.54.21_thumb.1375792380.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.54.21.1375792380.png)
データがテキストボックスなどを使って表示されているのが分かるでしょうか。長文は自動的にテキストエリアになっています。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.54.33_thumb.1375792384.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.54.33.1375792384.png)
項目が多いとデフォルトでは折り畳まれた状態になります。ボタンを押して伸張できます。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.54.44_thumb.1375792389.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.54.44.1375792389.png)
新しい項目を追加すると、上に表示されているJSONが自動的に更新されます。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.54.52_thumb.1375792392.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.54.52.1375792392.png)
全て折り畳むとこのようにコンパクトになります。

HULKはあくまでもサンプルなので、任意のJSONを表示させるためには別途画面を作らないといけないでしょう。しかしそれさえ用意してしまえばJSONの確認作業が随分楽になるはずです。

MOONGIFTはこう見る

JSONはいわばデータがダンプされた状態と言えます。この手のシステム出力は常に整形するニーズが存在します。RubyやPHPなど各言語についてデータを見やすく整形したり、カラーリングすることで見やすくするライブラリが存在します。

そうしたライブラリを使うことで見逃しや見落としを未然に防げるようになります。見づらいデータは余計なバグを含ませる可能性がありますので、なるべく可読性を高めるツールを使うのが良いでしょう。

HULK

kevinburke/hulk