[ツール] ブラウザでJSONをフォーマット（整形）できるツールを作りました

こんにちは。きんくまです。

APIのレスポンスでJSONが返ってきたときに、平文でしか文字列を見れない場合があったりします。 そんなときに気軽に整形したり、インデントを変えたりしたいなーと思って、ブラウザでできるツールを作成しました。

動作デモ

JSON Formatter

使い方

例えばこんなJSON文字列があるとします。

{"glossary":{"title":"example glossary",
"GlossDiv":{"title":"S","GlossList":{"GlossEntry":
{"ID":"SGML","SortAs":"SGML","GlossSee":"markup"}}}}}

サンプルのJSONはこちらからいただきました。 JSON Example

1. これを入力欄にペースト
2. フォーマットボタンを押す
3. 出力欄に書き出されます

オプションで、インデントに使えるスペースの数を変更できます。

出力欄はコピーボタンを押すと、クリップボードにコピーされます。

デモページはhttpなので、セキュリティの関係かクリップボードのペーストができなかったのですが、ローカルで動作させるとペーストできたので、その場合はペーストボタンが表示されて使用できます。

IE11でも動作確認してあります。

作った動機

XcodeでAPIから返ってきて出力されたJSON文字列を気軽に整形したかったです。でも、オンラインサービスでJSON整形するものはいくつもあるのですが、それが通信を行わず処理されるかどうかはよくわかりませんでした。（サーバーにアップされないようにしたい）

案件のデータを外に出すわけにはいかなかったので、ローカルで動作するフォーマットツールが欲しくなり、作りました。

ダウンロード

JSONFormatter.1.0.1.zip

index.htmlをダブルクリックするか、お好みのブラウザにドラック＆ドロップしてください。

自己責任にてご使用くださいませ。

ソースコード

KinkumaDesign/JSONFormatter

実装のポイント

JSONのフォーマット

JavaScriptをご存知の方なら知っているかと思うのですが、JSONのフォーマット自体は簡単にできます。

result.text = JSON.stringify(JSON.parse(inputText), null, indent);

最後の引数のindentに数値を渡してあげると、それの分だけインデントされます

クリップボードへの書き込み

outputTextArea.select();
document.execCommand('copy');
showToastText('コピーしました');

textareaを選択して、execCommand('copy')でクリップボードに転送されます

クリップボードからの読み込み

クリップボードのテキストを、入力欄に転送する機能があるのですが、環境によってできたり、できなかったりしました。 セキュリティが関係しているのではないかと思います。

function pasteClipboardTextToInputTextArea(){
    //Chromeなど
    if(navigator.clipboard && navigator.clipboard.readText){
        navigator.clipboard.readText()
            .then(function(text){
                inputTextArea.value = text;
            }).catch(function(error){
                inputTextArea.value = 'クリップボードが読み込めませんでした。\n' + error;
                //console.log(error);
            })
    //IEなど        
    }else if(window.clipboardData){
        inputTextArea.value = window.clipboardData.getData('Text');
    }
}

上のコードはhtmlをダブルクリックしてローカルでファイルを直接読み込んだ状態だったり、ローカルに立てたサーバーのときは動くのですが、最初に書いたデモページのようにhttpスキームのサーバーにアップしたときは動きませんでした。

そのため使えないときは、ペーストボタンを隠す処理をいれています。

function checkPasteClipboardAvailable(){
    if(navigator.clipboard && navigator.clipboard.readText){
        pasteButton.setAttribute('style', 'visibility: visible;');
    }else if(window.clipboardData){
        pasteButton.setAttribute('style', 'visibility: visible;');
    }else{
        pasteButton.setAttribute('style', 'visibility: hidden;');
    }
}

感想

こういうテキスト処理のツールは以前からよく作ってまして、htmlのツール作りは、GUIのパーツを気軽に構成して、修正もすぐにできるので楽しいです。

今回初めてGitHubのreleaseページを使ってみたところ、簡単に使えたのでよかったです。

ではでは。