JSON Checker (Validator) の提供の種類
JSON Checker (Validator)は、記述したJSONの構文が正しいかを検証するツールやサービスのことです。
種類として主に、
- Webブラウザ拡張
- Webサービス
- エディタ拡張
- 専用ソフトウェア
等の形態で提供されています。
通常はこれらから好みのものを利用すればいいのですが、企業ポリシーなどでそう簡単にはできないような作業環境もあります。
厳しい環境だと、
- ホワイトリストで指定されたソフトウェア以外をインストールしてはならない
- Webブラウザやコードエディタに、アドオンツールをインストールしてはならない
- 記述したコードやデータをインターネットへ送信してはならない（チェッカーの利用でも）
- データを編集する作業端末は、インターネットに接続してはならない
等の制限がかけられていることがあります。
オフラインのJSON Validator
そんな時はオフラインのHTMLファイルです。
アドオンも、追加のソフトウェアインストールも不要で、データをインターネットへ送信もしません。
もちろんWebサービスにあるような広告も表示されず、動作は最軽量です。
HTMLでの実装例
以下が実装例です。
HTMLをPCのローカルに保存します。（厳しい作業環境にあるオフラインのPCへ保存するには、書き写すしかないかもしれませんが・・・がんばって・・・）
<!DOCTYPE html>
<meta charset="utf-8">
<title>JSON Validator</title>
<body>
<span>JSON Validator</span><br>
<textarea id="area" style="width:80%; height: 30em;"></textarea><br>
<span id="errmsg"></span>
<script>
area.addEventListener("input", () => {
let area = document.getElementById("area");
let color;
try{
color = "white";
if(area.value.replace(/[ \n]/g, "").length){
JSON.parse(area.value);
color = "#dff";
}
document.getElementById("errmsg").innerText = "ok";
}
catch(e){
document.getElementById("errmsg").innerText = e.toString();
color = "#fac";
}
area.style.backgroundColor = color;
});
</script>
</body>
特徴として、文字を入力するたびにチェックされます。つまりチェックのボタン操作が不要です。
背景色で判定結果を表示します。水色(OK)、ピンク(NG)、です。
NGの場合は例外メッセージが下部に表示されます。
ロジックは単純で、Javascript の JSON.parse() でエラーするかどうかで判定しています。
利用ケース
1つ目のケースとして、既に実装済みJSONの書き換えが挙げられます。
JSONに慣れていない作業者がJSONの値を書き換えるように指示を受けているが、誤ってダブルクォーテーションやコロンを削除したり、カンマが多かったりしていないか、念のためにチェックをする、という使い方です。
2つ目のケースとして、JSONの学習用です。
文字を入力するたびに判定するので、ボタンを押すという手間がなく効率的です。
誤っている箇所を表示しないので、自力で誤りを特定することで、忘れにくいという効果もあると思います。
YAMLの場合
JSONではなくYAMLの場合の実装例です。
以下のライブラリをダウンロードして、ローカルPCに保存します。
その後、以下のHTMLを記述して、yaml.min.js と同じ階層に保存します。
<!DOCTYPE html>
<meta charset="utf-8">
<title>YAML Validator</title>
<script src="yaml.min.js"></script>
<body>
<span>YAML Validator</span><br>
<textarea id="area" style="width:80%; height: 30em;"></textarea><br>
<span id="errmsg"></span>
<script>
area.addEventListener("input", () => {
let area = document.getElementById("area");
let color;
try{
color = "white";
if(area.value.length > 0){
YAML.parse(area.value);
color = "#dff";
}
document.getElementById("errmsg").innerText = "ok";
}
catch(e){
document.getElementById("errmsg").innerText = e.toString();
color = "#fac";
}
area.style.backgroundColor = color;
});
</script>
</body>
動作仕様はJSONのものと同じです。
