ギターの指板
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | |
| 高E弦 | ||||||||||||
| B弦 | ||||||||||||
| G弦 | ||||||||||||
| D弦 | ||||||||||||
| A弦 | ||||||||||||
| 低E弦 |
以下が、指板とボタンを表示するHTMLと、指板上のメジャースケールを表示するJavaScriptの実装例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>ギターの指板</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
width: 40px;
height: 40px;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>ギターの指板</h1>
<table>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>高E弦</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>B弦</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>G弦</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>D弦</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>A弦</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>低E弦</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div>
<button onclick="showScale('c')">C</button>
<button onclick="showScale('c#')">C#</button>
<button onclick="showScale('d')">D</button>
<button onclick="showScale('d#')">D#</button>
<button onclick="showScale('e')">E</button>
<button onclick="showScale('f')">F</button>
<button onclick="showScale('f#')">F#</button>
<button onclick="showScale('g')">G</button>
<button onclick="showScale('g#')">G#</button>
<button onclick="showScale('a')">A</button>
<button onclick="showScale('a#')">A#</button>
<button onclick="showScale('b')">B</button>
</div>
<script type="text/javascript">
var selectedNotes = [];
function showScale(note) {
// 全てのノートを空欄にする
for (let i = 1; i <= 12; i++) {
for (let j = 1; j <= 6; j++) {
document.querySelector(`tr:nth-of-type(${j+1}) td:nth-of-type(${i+1})`).innerHTML = "";
}
}
// 選択されたノートを記憶する
if (selectedNotes.includes(note)) {
selectedNotes.splice(selectedNotes.indexOf(note), 1);
} else {
selectedNotes.push(note);
}
// 各弦の指板を更新する
for (let j = 1; j <= 6; j++) {
var basePosition = 0;
var string = "";
switch (j) {
case 1:
basePosition = 4;
string = "E";
break;
case 2:
basePosition = 11;
string = "B";
break;
case 3:
basePosition = 7;
string = "G";
break;
case 4:
basePosition = 2;
string = "D";
break;
case 5:
basePosition = 9;
string = "A";
break;
case 6:
basePosition = 4;
string = "E";
break;
}
for (let i = 1; i <= 12; i++) {
var notePosition = (i - basePosition + 12) % 12;
if (selectedNotes.includes(getNoteName(notePosition))) {
document.querySelector(`tr:nth-of-type(${j+1}) td:nth-of-type(${i+1})`).innerHTML = string + getNoteName(notePosition);
}
}
}
}
function getNoteName(note) {
switch (note) {
case 0:
return "C";
case 1:
return "C#";
case 2:
return "D";
case 3:
return "D#";
case 4:
return "E";
case 5:
return "F";
case 6:
return "F#";
case 7:
return "G";
case 8:
return "G#";
case 9:
return "A";
case 10:
return "A#";
case 11:
return "B";
}
}
</script>
</body>
</html>
```
このアプリでは、12本の弦のそれぞれのノートを、指定されたボタンによって指定した色で表示することができます。また、選択したノートに対応するメジャースケールのポジションが、自動的に指板上に表示されます。