JSON整形ツール？を作りました

はじめに

整形されていないJSON形式の文字列を整形するツールです。
Webサイトで公開されているものが多々ありますが、入力情報を取得されていたら困ります。

そこで、ローカルで同じことができるものを作成しました。
「JsonFormatter.html」とでも名前をつけて、ローカルに保存してお使いください。

ただし、CDNを使用してるため、通信は発生しているという中途半端さがあります…。

内容はこちら

・エラー処理はしていないので、お好みで変更してください。
・インデントは半角スペース4つです。これもお好みで変更してください。
・CDNを使用してるため、通信は発生します…。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Json Formatter</title>
        <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script type="text/javascript">
        <!--
            $(function() {
                var sampleText = '{"id":12345,"code":10,"detail":{"name":"Foobar","size":"50.00"}}';
                $('#input-area').val(sampleText);

                $('#formatter').on('click', function() {
                    var inputData = $('#input-area').val();
                    try {
                        var jsonBefore = JSON.parse(inputData);
                    } catch(e) {
                        return false;
                    }
                    var outputData = JSON.stringify(jsonBefore, null, "    ")
                    $('#output-area').val(outputData);
                });
            });
        // -->
        </script>
    </head>
    <body>
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <textarea class="form-control" id="input-area" rows="10"></textarea>
            <button id="formatter" class="btn btn-primary btn-lg">Format</button>
            <textarea class="form-control" id="output-area" rows="20"></textarea>
        </div>
        <div class="col-md-2"></div>
    </body>
</html>