Web APIなどで返されるJSONのデータをChromeブラウザで見やすくフォーマット表示させる：Tech TIPS

通常、WebブラウザでWeb APIを直接実行したときに返されるJSONのデータはプレーンテキストとして表示され、非常に読みにくい。Chromeの場合、拡張機能を利用すれば、JSONの階層構造や日本語テキストを人間に分かりやすく表示してくれる。

[島田広道，デジタルアドバンテージ]

印刷

通知 連載「％」の新着をメールで通知

鬯ｯ�ｯ�ｽ�ｮ�ｽ�ｽ�ｽ�ｫ鬯ｩ蛹�ｽｽ�ｨ驛｢�ｧ隰�∞�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｹ鬮ｫ�ｴ髮懶ｽ｣�ｽ�ｽ�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽPost

Shareシェア

はてなブックマーク

SharePocket Button

連載目次

対象ソフトウェア：デスクトップ版Google Chromeブラウザ

　Web API（RESTful API）の動作をちょっと確認したいとき、しばしばWebブラウザでAPIのURLを開き、そのレスポンスを表示させることがある。だがレスポンスがJSON（JavaScript Object Notation）だと、次の画面のようにレスポンスの内容がただプレーンテキストとして表示され、見にくいことこの上ない。

JSONのデータを返すWeb APIをChromeで開いてみる
ただテキストでズラズラと表示されるだけで、JSONの階層化データ構造が全く把握できない。また日本語のテキストが「\u」から始まるUnicode文字コードのままなので、全く理解できない。人間にとって可読性は無きに等しい。

　こんなとき、Chromeブラウザであれば次のような拡張機能を利用することで、JSONのデータを人間に見やすいツリー形式のフォーマットで表示できる。

• JSON Formatter［英語］（Chromeウェブストア）
• 「JSON Formatter」のソースコード［英語］（GitHub）

　インストール方法は通常の拡張機能と同じく、Chromeで上記のウェブストアを開き、ウィンドウ右上の［CHROMEに追加］ボタンをクリックする。

拡張機能「JSON Formatter」をChromeにインストールする
これはChromeでChromeウェブストアの「JSON Formatter」配布ページを開いたところ。拡張機能をインストールするときには最低限、以下のようにマルウェアとの報告がないことを事前に確認しよう（もちろんウイルス対策のリアルタイム検索も有効にしておく）。
　 （1）まず［レビュー］タブを選ぶ。
　 （2）［すべての言語］を選ぶ。
　 （3）［新着順］を選ぶ。
　 （4）レビューの新着分を幾つか読んでみて「マルウェアである」といった報告がないことを確認する。［概要］タブや［サポート］タブも見て、不審な点がないか確認しよう。
　 （5）（4）が済んだら、［CHROMEに追加］ボタンをクリックする。これでChromeにJSON Formatterが追加される。

　あとは特に設定を変更することもなく、JSONデータを表示させると、自動的にツリー形式にフォーマットされて表示される。

拡張機能「JSON Formatter」によるJSONデータの表示
ツリー形式だけではなく、UTF-8の日本語データが正しくデコードされ、大変見やすくなる。
　 （1）ツールバーに追加されたJSON Formatterのアイコン。設定オプションはない。
　 （2）［Parsed］を選ぶと、ツリー形式のフォーマットで見やすく表示される。
　 （3）［Raw］を選ぶと、フォーマット前の生のテキストデータとして表示される。
　 （4）ツリーの途中にある三角マークをクリックすると、その下の階層を閉じたり開いたりできる。
　 （5）テキストを選択してクリップボードにコピーできる。
　 （6）URLは自動的にリンクとなり、クリックすればそのページを開ける。

■この記事と関連性の高い別の記事

• Google Chromeの「拡張機能」とは何か？（TIPS）
• Chromeブラウザのタスクマネージャで重い処理を調べる（TIPS）
• Google Chromeの拡張機能を追加・削除する（TIPS）
• Google Chromeブラウザーのバージョン番号を確認する（Windows編）（TIPS）
• Google ChromeのWindows 8モードを使う（TIPS）

「Tech TIPS」

鬯ｩ謳ｾ�ｽ�ｵ�ｽ�ｽ�ｽ�ｺ鬯ｮ�ｦ�ｽ�ｮ髯ｷ�ｻ�ｽ�ｻ�ｽ�ｽ�ｽ�ｿ�ｽ�ｽ�ｽ�ｽ鬯ｯ�ｯ�ｽ�ｨ�ｽ�ｽ�ｽ�ｾ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�｣鬯ｯ�ｮ�ｽ�ｴ髣費ｿｽ�ｽ�･�ｽ�ｽ�ｽ�ｳ�ｽ�ｽ�ｽ�ｨ�ｽ�ｽ�ｽ�ｽ髯懶ｽ｣�ｽ�､�ｽ�ｽ�ｽ�ｸ�ｽ�ｽ�ｽ�ｲ鬯ｩ蠅捺��ｽ�ｿ�ｽ�ｽ�ｽ縺､ﾂ€�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�｣鬯ｯ�ｮ�ｽ�ｴ鬯ｩ蟶壽桶�ｽ�ｭ鬮ｮ�｣�ｽ�ｿ�ｽ�ｽ�ｽ�ｽ�ｽ�ｨ鬮ｯ蛹ｺ�ｻ繧托ｽｽ�ｿ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｺ鬮｣蛹�ｽｽ�ｵ髫ｴ謫ｾ�ｽ�ｴ�ｽ�ｽ隶難ｽ｣�守｢托ｽｭ雜｣�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｩ鬯ｩ蟷｢�ｽ�｢髫ｴ雜｣�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｼ鬯ｩ蟷｢�ｽ�｢髫ｴ荳ｻ�ｽ隶捺ｻゑｽｿ�ｽ邵ｺ�､�つ€鬯ｯ�ｮ�ｽ�ｦ�ｽ�ｽ�ｽ�ｪ鬩包ｽｶ闔ｨ�ｽ�ｽ�ｦ�ｽ�ｴ�ｽ縺､ﾂ€髯ｷ闌ｨ�ｽ�ｷ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｻ鬯ｯ�ｯ�ｽ�ｪ�ｽ�ｽ�ｽ�ｭ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｲ鬯ｩ謳ｾ�ｽ�ｵ�ｽ�ｽ�ｽ�ｺ鬮ｯ�ｷ�ｽ�ｷ�ｽ�ｽ�ｽ�ｶ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ New