【保存版】GUI/WebベースJSONエディタの作り方！jQuery、Ajax、JSONでプロパティエクスプローラーを実現

2024-05-18

GUIベースまたはWebベースのJSONエディタ（プロパティエクスプローラー機能付き）のプログラミング解説

概要

JSONエディタは、JSON形式のデータを編集するためのツールです。従来のテキストエディタとは異なり、JSONの構造を視覚的に表示し、編集を容易にする機能が備わっています。

今回紹介するJSONエディタは、プロパティエクスプローラーのように、JSONデータの階層構造をツリー形式で表示します。ユーザーは、ツリーを展開/折りたたんだり、ノードをクリックして値を編集したりすることができます。

構成

このJSONエディタは、以下の要素で構成されます。

HTML: エディタのレイアウトと構造を定義します。
CSS: エディタのスタイルを定義します。
JavaScript: エディタの機能を実装します。
jQuery: DOM操作やAjax通信を簡略化します。
JSON: 編集対象のデータ形式です。

実装

HTML

<!DOCTYPE html>
<html>
<head>
  <title>JSON Editor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="editor"></div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS

#editor {
  width: 500px;
  height: 400px;
  border: 1px solid #ccc;
}

.node {
  padding: 5px;
  border: 1px solid #ddd;
}

.key {
  font-weight: bold;
}

.value {
  margin-left: 10px;
}

JavaScript

$(document).ready(function() {
  // JSONデータを読み込む
  var data = {
    "name": "John Doe",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "Anytown",
      "state": "CA"
    }
  };

  // JSONデータをツリー構造に変換する
  var tree = buildTree(data);

  // ツリーをDOMに追加する
  $('#editor').append(tree);

  // ノードクリック時のイベントハンドラを設定する
  $('.node').click(function() {
    var key = $(this).find('.key').text();
    var value = $(this).find('.value').text();

    // 値編集用のダイアログを表示する
    showDialog(key, value);
  });
});

function buildTree(data) {
  var tree = <span class="math-inline">\('<div class\="node"\>'\);
if \(typeof data \=\=\= 'object'\) \{
for \(var key in data\) \{
var value \= data\[key\];
var childNode \= buildTree\(value\);
tree\.append\(</span>('<span class="key">').text(key));
      tree.append(<span class="math-inline">\('<span class\="value"\>'\)\.text\(value\)\);
tree\.append\(childNode\);
\}
\} else \{
tree\.append\(</span>('<span class="key">').text(key));
    tree.append($('<span class="value">').text(value));
  }

  return tree;
}

function showDialog(key, value) {
  // 値編集用のダイアログを作成する
  var dialog = <span class="math-inline">\('<div id\="dialog"\>'\);
dialog\.append\(</span>('<label>').text('Key:'));
  dialog.append(<span class="math-inline">\('<input type\="text" id\="keyInput" value\="' \+ key \+ '"\>'\)\);
dialog\.append\(</span>('<label>').text('Value:'));
  dialog.append(<span class="math-inline">\('<input type\="text" id\="valueInput" value\="' \+ value \+ '"\>'\)\);
dialog\.append\(</span>('<button id="saveButton">').text('Save'));

  // ダイアログを表示する

GUIベースまたはWebベースのJSONエディタ（プロパティエクスプローラー機能付き）サンプルコード

index.html

<!DOCTYPE html>
<html>
<head>
  <title>JSON Editor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="editor"></div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

style.css

#editor {
  width: 500px;
  height: 400px;
  border: 1px solid #ccc;
}

.node {
  padding: 5px;
  border: 1px solid #ddd;
}

.key {
  font-weight: bold;
}

.value {
  margin-left: 10px;
}

#dialog {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
}

#keyInput, #valueInput {
  width: 100%;
  margin-bottom: 10px;
}

#saveButton {
  padding: 5px 10px;
  border: 1px solid #ccc;
  background-color: #eee;
  cursor: pointer;
}

script.js

$(document).ready(function() {
  // JSONデータを読み込む
  var data = {
    "name": "John Doe",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "Anytown",
      "state": "CA"
    }
  };

  // JSONデータをツリー構造に変換する
  var tree = buildTree(data);

  // ツリーをDOMに追加する
  $('#editor').append(tree);

  // ノードクリック時のイベントハンドラを設定する
  $('.node').click(function() {
    var key = $(this).find('.key').text();
    var value = $(this).find('.value').text();

    // 値編集用のダイアログを表示する
    showDialog(key, value);
  });

  // ダイアログ表示/非表示を切り替える
  $('#dialogCloseButton').click(function() {
    $('#dialog').toggle();
  });

  // 値編集を保存する
  $('#saveButton').click(function() {
    var key = $('#keyInput').val();
    var value = $('#valueInput').val();

    // JSONデータを更新する
    updateData(key, value);

    // ツリーを更新する
    updateTree(data);

    // ダイアログを閉じる
    $('#dialog').toggle();
  });
});

function buildTree(data) {
  var tree = <span class="math-inline">\('<div class\="node"\>'\);
if \(typeof data \=\=\= 'object'\) \{
for \(var key in data\) \{
var value \= data\[key\];
var childNode \= buildTree\(value\);
tree\.append\(</span>('<span class="key">').text(key));
      tree.append(<span class="math-inline">\('<span class\="value"\>'\)\.text\(value\)\);
tree\.append\(childNode\);
\}
\} else \{
tree\.append\(</span>('<span class="key">').text(key));
    tree.append($('<span class="value">').text(value));
  }

  return tree;
}

function showDialog(key, value) {
  // 値編集用のダイアログを作成する
  var dialog = $('#dialog');
  dialog.find('#keyInput').val(key);
  dialog.find('#valueInput').val(value);
  dialog.show();
}

function updateData(key, value) {
  // JSONデータを更新するロジック
  // 例：
  data[key] = value;
}

function updateTree(data) {
  // ツリーを更新する