0. 目次

　

1. 作ったもの

1.1. デモ

https://mtside01.github.io/BluesCode/

上記で公開しています。

プルダウンメニューから選んだKeyに対応した、ブルースコード進行を表示してくれます。

最近ブルースギターを練習する機会が多く、セッションの時にこういうのがあったら便利だなと思って作ってみました。

BluesCode

1.2. ソースコード

https://github.com/mtside01/BluesCode 　

　

2. ポイント（備忘録）

2.1. 複数のHTML要素に同一の名前を与えて一括変更する

デモサイトを見て頂ければなんとなくわかると思いますが、 ブルース進行は基本的に3つのコードのみで構成されます。 （トニック、サブドミナント、ドミナントとか言いますが音楽サイトではないので詳細は割愛します。）

それらを表示している要素を、プルダウンメニューに応じて同時に操作したかったため、 今回は以下の手順で実現しています。

2.1.1. 複数のHTML要素に同一の名前を与える

以下あたりがわかりやすいでしょうか？

name="subDominant"およびname="root"を与えている要素が複数あることが見て取れると思います。

<form class="row g-3">
    <div class="col-md-1">
        <h3 name="subDominant">D7</h3>
    </div>
    <div class="col-md-2">
        <h3 style="text-align: right">|</h3>
    </div>
    <div class="col-md-2">
        <h3 name="subDominant">D7</h3>
    </div>
    <div class="col-md-1">
        <h3 style="text-align: right">|</h3>
    </div>
    <div class="col-md-1">
        <h3 name="root">A7</h3>
    </div>
    <div class="col-md-2">
        <h3 style="text-align: right">|</h3>
    </div>
    <div class="col-md-1">
        <h3 name="root">A7</h3>
    </div>
</form>

2.1.2. プルダウンメニューの変更に応じて表示更新用JavaScript関数を呼び出し

以下で、変更がある度に表示更新用JavaScript関数selectedKey()を呼び出しています。

<div class="col-md-2">
    <select class="form-select" onchange="selectedKey()" id="key">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
        <option value="4">E</option>
        <option value="5">F</option>
        <option value="6">G</option>
    </select>
</div>

2.1.3. HTML要素の更新

getElementsByNameを使って同名で用意したHTML要素をまとめて取得し、innerTextの変更を行っています。

for (var i = 0; i < rootCodeNum; i++)
{
    document.getElementsByName("root")[i].innerText = codeArray[key] + seventhString;
}

　

2.2. CDNを使ったBootstrapの簡易導入

そのままのHTMLでは見た目が味気ないかなと思い、CDN(コンテンツ・デリバリーネットワーク)を使ってBootstrapを導入してみています。 やっていることは以下のような記載をindex.htmlに追加しただけ。これだけでBootstrap用のclassを使えるようになります。

<head>
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 </head>
<body>
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>

クラス一覧については以下公式ドキュメントを参照

https://getbootstrap.jp/docs/5.0/getting-started/introduction/

　

3. 感想・改善したい点

  • 数行の記載だけでBootstrapが使える（ちょっとモダンな見た目にできる）のはありがたい。今後も使っていきたい。
  • ただし、フレームワーク導入しただけではいい感じのUI/UXになるわけではないよなあ、ということを実感。余裕があればデザインも勉強したい。
  • 現状だと画面横幅に応じて勝手に改行してしまい、スマホ表示した時に上手く4小節*3行を維持してくれない。スマホとかタブレットで見やすいようにしないと実際のセッション時使いづらいよなあ。