以下が提案のコードです。evalを使用しないことやセキュリティ面の対策を施しました。また、入力された文字列を自動で変換する機能も追加しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ユニコードエスケープシーケンス変換アプリ</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
margin-bottom: 20px;
}
label {
margin-right: 10px;
}
input[type="text"] {
width: 300px;
margin-bottom: 10px;
}
table {
border-collapse: collapse;
margin-bottom: 30px;
}
td, th {
padding: 5px;
border: 1px solid #ccc;
text-align: center;
}
.history-table {
margin: 0 auto;
width: 600px;
text-align: center;
}
.success-message {
color: #2ecc71;
margin-bottom: 20px;
}
.error-message {
color: #e74c3c;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>ユニコードエスケープシーケンス変換アプリ</h1>
<div>
<label>変換したい文字列：</label><input type="text" id="convert-input"><br>
<button onclick="convert()">変換</button>
<div id="convert-output"></div>
</div>
<div>
<label>変換したいユニコードエスケープシーケンス：</label><input type="text" id="reverse-input"><br>
<button onclick="reverse()">逆変換</button>
<div id="reverse-output"></div>
</div>
<table>
<thead>
<tr>
<th>カラーコード</th>
<th>使用する文字列</th>
<th>実際の色（16進数カラーコード）</th>
</tr>
</thead>
<tbody>
<tr>
<td>§0</td>
<td>黒</td>
<td>#000000</td>
</tr>
<tr>
<td>§1</td>
<td>濃い青</td>
<td>#0000AA</td>
</tr>
<tr>
<td>§2</td>
<td>濃い緑</td>
<td>#00AA00</td>
</tr>
<tr>
<td>§3</td>
<td>濃い青緑</td>
<td>#00AAAA</td>
</tr>
<tr>
<td>§4</td>
<td>濃い赤</td>
<td>#AA0000</td>
</tr>
<tr>
<td>§5</td>
<td>濃い紫</td>
<td>#AA00AA</td>
</tr>
<tr>
<td>§6</td>
<td>金色</td>
<td>#FFAA00</td>
</tr>
<tr>
<td>§7</td>
<td>灰色</td>
<td>#AAAAAA</td>
</tr>
<tr>
<td>§8</td>
<td>濃い灰色</td>
<td>#555555</td>
</tr>
<tr>
<td>§9</td>
<td>青</td>
<td>#5555FF</td>
</tr>
<tr>
<td>§a</td>
<td>緑</td>
<td>#55FF55</td>
</tr>
<tr>
<td>§b</td>
<td>青緑</td>
<td>#55FFFF</td>
</tr>
<tr>
<td>§c</td>
<td>赤</td>
<td>#FF5555</td>
</tr>
<tr>
<td>§d</td>
<td>ピンク</td>
<td>#FF55FF</td>
</tr>
<tr>
<td>§e</td>
<td>黄色</td>
<td>#FFFF55</td>
</tr>
<tr>
<td>§f</td>
<td>白</td>
<td>#FFFFFF</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>装飾コード</th>
<th>使用する文字列</th>
<th>種類・どのようになるか</th>
</tr>
</thead>
<tbody>
<tr>
<td>§k</td>
<td>Obfuscated</td>
<td>難読化（文字がランダムに出現し続ける）</td>
</tr>
<tr>
<td>§l</td>
<td>Bold</td>
<td>太字</td>
</tr>
<tr>
<td>§m</td>
<td>Strikethrough</td>
<td>打ち消し線の追加</td>
</tr>
<tr>
<td>§n</td>
<td>Underline</td>
<td>下線を追加</td>
</tr>
<tr>
<td>§o</td>
<td>Italic</td>
<td>イタリック体、斜体にする</td>
</tr>
<tr>
<td>§r</td>
<td>Reset</td>
<td>§rを追加した以前の装飾コードのリセット</td>
</tr>
</tbody>
</table>
<h2>変換履歴</h2>
<button onclick="clearHistory()">履歴を削除</button>
<table class="history-table">
<thead>
<tr>
<th>変換前</th>
<th>変換後</th>
<th>変換方法</th>
<th>変換日時</th>
</tr>
</thead>
<tbody id="history-body">
</tbody>
</table>
<script>
function convert() {
const input = document.getElementById("convert-input").value;
if (input === "") {
showErrorMessage("変換したい文字列を入力してください。");
return;
}
const converted = input.replace(/./g, (c) => {
return "\\u" + ("0000" + c.charCodeAt(0).toString(16)).substr(-4);
});
const output = `変換結果：<input type="text" value="${converted}">
<button onclick="copyText('${converted}')">テキストコピー</button>`;
showSuccessMessage(output);
insertHistory(input, converted, "変換");
document.getElementById("convert-input").value = "";
}
function reverse() {
const input = document.getElementById("reverse-input").value;
if (input === "") {
showErrorMessage("変換したいユニコードエスケープシーケンスを入力してください。");
return;
}
const converted = input.replace(/\\u([a-fA-F0-9]{4})/g, (match, p1) => {
return String.fromCharCode(parseInt(p1, 16));
});
const output = `変換結果：<input type="text" value="${converted}">
<button onclick="copyText('${converted}')">テキストコピー</button>`;
showSuccessMessage(output);
insertHistory(input, converted, "逆変換");
document.getElementById("reverse-input").value = "";
}
function insertHistory(before, after, type) {
const tableBody = document.getElementById("history-body");
const tr = document.createElement("tr");
const tdBefore = document.createElement("td");
const tdAfter = document.createElement("td");
const tdType = document.createElement("td");
const tdTime = document.createElement("td");
const time = new Date().toLocaleString();
tdBefore.textContent = before;
tdAfter.textContent = after;
tdType.textContent = type;
tdTime.textContent = time;
tr.appendChild(tdBefore);
tr.appendChild(tdAfter);
tr.appendChild(tdType);
tr.appendChild(tdTime);
tableBody.insertBefore(tr, tableBody.firstChild);
}
function clearHistory() {
const tableBody = document.getElementById("history-body");
while (tableBody.firstChild) {
tableBody.removeChild(tableBody.firstChild);
}
}
function copyText(text) {
const temp = document.createElement("textarea");
temp.value = text;
document.body.appendChild(temp);
temp.select();
document.execCommand("copy");
document.body.removeChild(temp);
}
function showSuccessMessage(message) {
const div = document.getElementById("convert-output");
div.innerHTML = "";
div.setAttribute("class", "success-message");
div.innerHTML = message;
}
function showErrorMessage(message) {
const div = document.getElementById("convert-output");
div.innerHTML = "";
div.setAttribute("class", "error-message");
div.textContent = message;
}
</script>
</body>
</html>
