これをベースに、jsonをformatするツールに書き直してください
September 10, 2023
Anonymous
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="URLを解析するWebツール">
<meta name="keywords" content="URL解析, クエリパラメータ, url parse, Parsing, Tool, Web">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<title>Web URL Parser - URL解析ツール</title>
<style>
html, body {
height: 100%;
}
.content-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.footer {
margin-top: auto;
padding: 2rem;
}
.table td {
vertical-align: middle;
}
.field {
padding-bottom: 1rem;
}
</style>
<script>
window.addEventListener("load", () => {
const inputElement = document.getElementById('inputURL');
const defaultURL = 'https://takuan.me/url-parser/?utm_source=instagram&utm_medium=social&utm_campaign=story&name=%E3%81%9F%E3%81%8F%E3%81%82%E3%82%93#section1';
inputElement.value = defaultURL;
parseURL();
inputElement.addEventListener('input', parseURL);
});
function parseURL() {
const inputURL = document.getElementById('inputURL').value;
const url = new URL(inputURL);
populateComponentsTable(url);
populateParamsTable(url);
}
function populateComponentsTable(url) {
const componentTable = document.getElementById('componentsTable');
componentTable.innerHTML = `
<tr>
<td>プロトコル</td>
<td>${url.protocol}</td>
</tr>
<tr>
<td>ホスト名</td>
<td>${url.hostname}</td>
</tr>
<tr>
<td>パス名</td>
<td>${url.pathname}</td>
</tr>
<tr>
<td>フラグメント</td>
<td>${url.hash}</td>
</tr>
`;
}
function populateParamsTable(url) {
const paramsTable = document.getElementById('paramsTable');
paramsTable.innerHTML = "<thead><tr><th>パラメータ</th><th>値</th></tr></thead>";
url.searchParams.forEach((value, name) => {
const row = document.createElement('tr');
const cell1 = document.createElement('td');
const cell2 = document.createElement('td');
const inputField = document.createElement('input');
inputField.className = 'input';
inputField.value = value;
inputField.addEventListener('input', () => {
url.searchParams.set(name, inputField.value);
document.getElementById('inputURL').value = url.toString();
populateComponentsTable(url);
});
cell1.textContent = name;
cell2.appendChild(inputField);
row.appendChild(cell1);
row.appendChild(cell2);
paramsTable.appendChild(row);
});
}
</script>
</head>
<body>
<div class="content-wrapper">
<div class="hero is-info is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">Web URL Parser - URL解析ツール</h1>
<h2 class="subtitle">URLをパースして表示するオンラインツール</h2>
</div>
</div>
</div>
<section class="section">
<div class="container">
<div class="field">
<label class="label">解析するURLを入力してください</label>
<div class="control">
<input class="input" type="text" id="inputURL">
</div>
</div>
<h2 class="subtitle">URLの構成要素</h2>
<table class="table is-bordered is-striped" id="componentsTable">
<thead>
<tr>
<th>構成要素</th>
<th>値</th>
</tr>
</thead>
</table>
<h2 class="subtitle">クエリパラメータ</h2>
<table class="table is-bordered is-striped" id="paramsTable">
<thead>
<tr>
<th>パラメータ</th>
<th>値</th>
</tr>
</thead>
</table>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>takuan.me / <a href="https://chat.openai.com/share/3a9bb370-b39e-43a9-a4ab-763e81fbd014">ChatGPT</a>で作った</a>
</div>
</footer>
</div>
</body>
</html>
```
これをベースに、jsonをformatするツールに書き直してください
ChatGPT
HTMLとJavaScriptを使ってJSONをフォーマットするオンラインツールのためのコードを以下に示します。このコードは元々のURLパーサーを参考にしています。
html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="JSONをフォーマットするWebツール">
<meta name="keywords" content="JSON, フォーマット, Format, Tool, Web">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<title>Web JSON Formatter - JSONフォーマットツール</title>
<style>
html, body {
height: 100%;
}
.content-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.footer {
margin-top: auto;
padding: 2rem;
}
.field {
padding-bottom: 1rem;
}
</style>
<script>
window.addEventListener("load", () => {
const inputElement = document.getElementById('inputJSON');
const defaultJSON = '{"name": "John", "age": 30, "city": "New York"}';
inputElement.value = defaultJSON;
formatJSON();
inputElement.addEventListener('input', formatJSON);
});
function formatJSON() {
const inputJSON = document.getElementById('inputJSON').value;
try {
const parsedJSON = JSON.parse(inputJSON);
const formattedJSON = JSON.stringify(parsedJSON, null, 2);
document.getElementById('formattedJSON').innerText = formattedJSON;
} catch(e) {
document.getElementById('formattedJSON').innerText = 'Invalid JSON';
}
}
</script>
</head>
<body>
<div class="content-wrapper">
<div class="hero is-info is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">Web JSON Formatter - JSONフォーマットツール</h1>
<h2 class="subtitle">JSONを整形して表示するオンラインツール</h2>
</div>
</div>
</div>
<section class="section">
<div class="container">
<div class="field">
<label class="label">フォーマットするJSONを入力してください</label>
<div class="control">
<textarea class="textarea" id="inputJSON" rows="10"></textarea>
</div>
</div>
<h2 class="subtitle">整形後のJSON</h2>
<pre id="formattedJSON"></pre>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>takuan.me / <a href="https://chat.openai.com/share/3a9bb370-b39e-43a9-a4ab-763e81fbd014">ChatGPT</a>で作った</a>
</div>
</footer>
</div>
</body>
</html>
このコードは以下のように動作します：
- ページがロードされたときにデフォルトのJSONをテキストエリアに設定します。
- ユーザーがテキストエリアにJSONを入力すると、それを自動的にフォーマットして表示します。
- JSONが無効な場合、"Invalid JSON"と表示します。
スタイルとレイアウトは元のURLパーサーコードを維持しています。
Anonymous
JSONに色をつけることはできますか？
ChatGPT
もちろん、JSONに色を付けることは可能です。JavaScriptでJSONオブジェクトを解析し、それぞれのデータ型（数値、文字列、オブジェクト、配列、真偽値、null）に基づいて色を付けることができます。
以下はJSONに色を付けるために改良されたコード例です：
html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="JSONをフォーマットするWebツール">
<meta name="keywords" content="JSON, フォーマット, Format, Tool, Web">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<title>Web JSON Formatter - JSONフォーマットツール</title>
<style>
html, body {
height: 100%;
}
.content-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.footer {
margin-top: auto;
padding: 2rem;
}
.field {
padding-bottom: 1rem;
}
.json-key {
color: brown;
}
.json-string {
color: green;
}
.json-number {
color: darkorange;
}
.json-boolean {
color: blue;
}
.json-null {
color: magenta;
}
</style>
<script>
window.addEventListener("load", () => {
const inputElement = document.getElementById('inputJSON');
const defaultJSON = '{"name": "John", "age": 30, "city": "New York", "isAlive": true, "children": null}';
inputElement.value = defaultJSON;
formatJSON();
inputElement.addEventListener('input', formatJSON);
});
function formatJSON() {
const inputJSON = document.getElementById('inputJSON').value;
try {
const parsedJSON = JSON.parse(inputJSON);
const formattedJSON = JSON.stringify(parsedJSON, null, 2);
const coloredJSON = colorizeJSON(formattedJSON);
document.getElementById('formattedJSON').innerHTML = coloredJSON;
} catch(e) {
document.getElementById('formattedJSON').innerText = 'Invalid JSON';
}
}
function colorizeJSON(jsonString) {
jsonString = jsonString.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return jsonString.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
let cls = 'json-number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'json-key';
} else {
cls = 'json-string';
}
} else if (/true|false/.test(match)) {
cls = 'json-boolean';
} else if (/null/.test(match)) {
cls = 'json-null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
</script>
</head>
<body>
<div class="content-wrapper">
<div class="hero is-info is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">Web JSON Formatter - JSONフォーマットツール</h1>
<h2 class="subtitle">JSONを整形して表示するオンラインツール</h2>
</div>
</div>
</div>
<section class="section">
<div class="container">
<div class="field">
<label class="label">フォーマットするJSONを入力してください</label>
<div class="control">
<textarea class="textarea" id="inputJSON" rows="10"></textarea>
</div>
</div>
<h2 class="subtitle">整形後のJSON</h2>
<pre id="formattedJSON"></pre>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>takuan.me / <a href="https://chat.openai.com/share/3a9bb370-b39e-43a9-a4ab-763e81fbd014">ChatGPT</a>で作った</p>
</div>
</footer>
</div>
</body>
</html>
このコード例では、色付きのJSONを<pre>タグ内でHTMLとして安全に表示するために、colorizeJSON関数を用いています。各JSONデータ型に対応するCSSクラスが適用されるため、結果的に読みやすい色付きのJSONが表示されます。