インフラエンジニアを募集中です。表示・整形ツールWeb制作ツールtanaka2011.07.05Ajaxでデータ通信するときのデータ形式ではJSONがよく使われます。JSONはJavaScriptのオブジェクトを表現するときの形式とほぼ同じなので、そこそこ読みやすいです。(適切に改行されていれば)今日は実際にJSONを利用するときにブラウザ上で見やすくするツールと整形する方法を紹介します。Chromeは2つともブラウザ上でJSONを見やすく表示するツールです。通常JSONデータをダウンロードしようとしますが、この拡張をインストールすればブラウザで表示してくれるようになります。Firebugを使えば、Webページ内の通信内容にJSONデータがあれば、階層表示してくれますが、URLをアドレスバーでしたいときは、JSONViewが断然便利です。Chromeでも色つき・整形で見やすくなります。使った整形ブラウザで表示したJSONをファイルに保存するとたいていの場合改行がないファイルを保存することになります。調査するのに不便なので、整形したほうがいいでしょう。私が愛用しているPhpStormはJSON形式のテキストも整形してくれます。こちらは整形前のJSONです。Code...→ダイアログでRunを選択すると、整形されます。まとめ今回はJSONをブラウザに見やすく表示する方法を紹介しました。JSONテキストを整形する方法を通じてやや強引にPhpStormを紹介しました。メモブラウザ&アドオンsakai2007.02.01はてブバシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。