<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Phlox 音楽用語辞典</title>
<link rel="stylesheet" href="phlox.css">
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 1em;
}
th, td {
border: 1px solid #ccc;
padding: 0.5em;
}
th {
background-color: #6666cc;
color: white;
}
td {
background-color: #f9f9ff;
color: #333;
}
</style>
</head>
<body>
<h1>Phlox 音楽用語辞典</h1>
<input type="text" id="searchInput" placeholder="キーワードを入力">
<button onclick="search()">検索</button>
<div id="result"></div>
<script>
let dictionaryData = [];
// CSVファイルを読み込む
fetch("phlox-dictionary.csv")
.then(response => response.text())
.then(text => {
const rows = text.trim().split("\n");
dictionaryData = rows.slice(1).map(line => {
const [term, meaning] = line.split(/,(.+)/); // 2つ目以降も意味に含める
return {
term: term.trim(),
meaning: meaning.trim().replace(/^"|"$/g, "").replace(/""/g, '"')
};
});
displayAll();
});
function search() {
const keyword = document.getElementById("searchInput").value.trim().toLowerCase();
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "";
if (!keyword) {
displayAll();
return;
}
const filtered = dictionaryData.filter(entry => {
const term = entry.term.toLowerCase();
return keyword.length <= 2 ? term.startsWith(keyword) : term.includes(keyword);
});
if (filtered.length === 0) {
resultDiv.innerHTML = `<p>「${keyword}」に一致する用語は見つかりませんでした。</p>`;
return;
}
resultDiv.innerHTML = generateTable(filtered);
}
function displayAll() {
const sorted = [...dictionaryData].sort((a, b) => a.term.localeCompare(b.term));
document.getElementById("result").innerHTML = generateTable(sorted);
}
function generateTable(data) {
let html = "<table><tr><th>用語</th><th>意味</th></tr>";
data.forEach(entry => {
html += `<tr><td>${entry.term}</td><td>${entry.meaning}</td></tr>`;
});
html += "</table>";
return html;
}
</script>
</body>
</html>
