Google Chrome内でJSONファイルを編集する7つのツール

JSON 形式は Javascript から派生したもので、サーバーと Web アプリケーションの間でデータを送信するためによく使用されます。これは XML に代わるもので、プログラマーが任意の数のツールを使用して作業できるようにします。しかし、ブラウザを使用して JSON ファイルを操作したい場合はどうすればよいでしょうか? プログラマーによる JSON ファイルの編集を支援することを目的とした、Google Chrome 用の Web アプリと拡張機能がいくつかあります。

1. オンライン JSON エディター

利用可能な形式: Web アプリケーション

JSON Editor Online は、 JSON を表示、編集、フォーマットするためのツールです。この Chrome アプリはブラウザ内でテキスト エディタを開き、別のアプリケーションに切り替えることなくコードを編集できます。アプリには 2 つのテキスト ボックスが並べて表示されます。左側のフィールドにはコードがそのまま表示され、右側のフィールドにはテキストが読みやすい形式で表示されます。

アプリはローカル ファイルと URL の両方を開くことができます。どのように作られたのか知りたい人のために、ソースコードも公開されています。最大 512 MB のファイルを開くことができます。一見すると大した量ではないように見えますが、膨大な量のデータが含まれる可能性があります。非常に大きなファイルの場合は、これらのツールをチェックして、遅延なくファイルをすばやく表示することをお勧めします。

JSON エディターは単なるエディターではありません。これはフォーマッタ、パーサー、さらには修復アシスタントでもあります。これは間違いなく、すべてのソフトウェア開発者のツールキットに組み込まれるに値します。

2. JSON フォーマッタ

利用可能な形式: Chrome 拡張機能

JSON Formatter Chrome拡張機能は、JSON コードを読みやすくするオープンソース ツールです。JSON と JSONP の両方の形式のサポートを宣伝し、構文の強調表示、折りたたみ可能なツリー、インデント ガイド、クリック可能な URL を提供します。これは、有効な JSON ページおよびローカル ファイルでも機能します。

この拡張機能は、インターネット上で提供される JSON ファイルでも機能します。ただし、JSON データが HTML 部分上で生のまま提供される場合、HTML サイトのスタイルと競合することがあります。これは、 JSON 公式 Web サイトのサンプル ページで発生する傾向があり、背景色が消えます。

ただし、これは拡張機能であるため、簡単にオフにしたり、シークレット ページでの動作を無効にしたりできます。さらに、オープンソースなので、ソース コードをいじってさらに多くのことを実行できるようにすることができます。

3.JSONビュー

利用可能な形式: Chrome 拡張機能

Google Chrome 用の JSONView は、Firefox アドオンとして誕生しました。JSON パスまたは値をコピーするためのコンテキスト メニュー オプションが備わっています。テーマをカスタマイズするための組み込みのスタイル エディターもあります。

別の開発者によって作成された拡張機能として、JSONVue は、 JSONLintを使用して JSON ドキュメントを検証する JSONView の機能を拡張します。

JSONView は、JSON ファイルにいくつかの整形印刷も適用します。これにより、JSON キーに太字の印刷が追加され、太字でない括弧やコロンに対して読みやすくなります。

4. JSON ビューティファイアーおよびエディター

利用可能な形式: Chrome 拡張機能

JSON Beautifier & Editor は、 Chrome ブラウザをデータの編集、処理、分析のための JSON ツールに変えます。キーと値を変更したり、ダウンロード可能な JSON 出力ファイルに変更を保存したりできます。

おそらく、JSON Beautifier & Editor の最大の機能は、JSON ファイルの空白を追加および削除できる機能です。コーディング中にいくつかの点を変更した場合に備えて、オブジェクトを並べ替える方法もあります。

全体として、この拡張機能は通常の JSON Chrome 拡張機能の機能を拡張し、Web ブラウザを JSON ファイル用のオフライン テキスト エディタに変えます。

5.コード美化JSONエディター

利用可能な形式: Web アプリケーション

Code Beautify JSON エディターは、 Code Beautify のコード美化アプリ スイートで利用できる他の多くのツールの 1 つにすぎません。JSON エディターに注目すると、Web ブラウザーから JSON ファイルを表示する他の方法がいくつか見つかります。

このアプリはコード ビューを備えていますが、これはほとんどが単なる整形されたテキスト ビューです。ただし、コンパクトな JSON を表示する場合はテキスト ビューから独立しています。一方、フォーム ビューには、折りたたまれた各行内の各配列のサイズが表示されます。オブジェクトの場合、その中に存在するキーの数が表示されます。

この拡張機能が便利になるもう 1 つの点は、編集された JSON ファイルと元の JSON ファイルの大きさが表示されることです。ファイル サイズに非常に特殊なプロジェクトに取り組んでいる場合、これはその仕事に適したツールとなる可能性があります。

6. チュートリアル ポイント オンライン JSON エディター

利用可能な形式: Web アプリケーション

Tutorials Point のOnline JSON Editor は、目にも優しい優れた JSON 編集ツールです。視覚要素を切り替えることができるため、深くネストされた JSON コード内の空白を視覚化するのに役立ちます。さらに、変更可能なテーマもあります。

おそらく、このエディターの主な魅力は、チュートリアルのライブラリへのアクセスも提供していることです。このため、主にオンライン リソースに依存しながら、新しいプログラミング言語を学習しようとしている人にとって便利なツールになります。

他のすべてのオンライン JSON 編集ツールと同様に、このエディターを使用すると、編集した JSON をブラウザーからダウンロードできます。そうすれば、これを使用して、JSON コードで必要なほぼすべてのことを行うことができます。

7. Dan’s Tools の JSON エディター

利用可能な形式: Web アプリケーション

Dan’s Tools の JSON エディターは、クリーンでミニマリストな外観を特徴とする無料のオンライン JSON エディターです。機能に欠けている部分は、URL を入力するとすぐに読み込まれるクイックロードで補われます。

すぐに編集できるものが必要な場合には十分です。ただし、一部のブラウザでは広告ブロック拡張機能を使用していると、画面下部に「ファイル読み込み」機能が表示される場合があり、不便な場合があります。

このアプリの開発者である Clean CSS (別名 Dan’s Tools) には、JSON を CSV、XML、TSV、さらには HTML などの他の形式に変換するための他のツールもあります。

JSON ファイルに簡単にアクセス

すべての画像とスクリーンショット by Terenz Jomar Dela Cruz