概要
- 楽曲のコード進行をディグリーネーム（度数表記）に変換して表示するアプリケーションを作りました。
- フレームワークは Nuxt.js を使用しました。
- この記事はアプリケーションの制作動機と設計について書かれています。
どんなアプリケーションか？
chord2degree
楽曲のコード進行をディグリーネーム（度数表記）に変換して表示するアプリケーションです。
なぜ、作ったのか？
- コード弾きのために度数表記の譜面を作成したかった。
- 邦楽に典型的なパート区分（AメロやBメロなど）に対応した譜面を作成したかった。
どんな作りか？
データ設計
楽譜のデータ構造は以下です。
// score[ part{id, name, bars[[note, note],[note, note, ...] ...]} ...]
const Score = [
{
id, // partのid
name, // partの名前(AメロやBメロ等)
// パートの中の小節
bars: [[note, note], [note, note, ...] ...]
},
...
]
// 具体例
const Score = [
{
id: 1,
name: 'A',
bars: [
['Em', 'D'],
['C', 'G'],
['C', 'G'],
['A#dim', 'B'],
['Em', 'D'],
['C', 'G'],
['C', 'G'],
['D', 'G', 'N.C']
]
}
]
コンポーネント設計
主要なコンポーネントは以下の四つです。（楽譜・パート・小節・音符です。）
- Score
- tonic
- Part
- tonic
- name (...AメロやBメロなどの区分)
- Bar
- tonic
- degreeName
- Note
主音(tonic)とディグリーネーム(degreeName)は、各コンポーネントが保有するようにしました。
主音は、各コンポーネント（Note以外）がデータオブジェクトで管理します。
ディグリーネームは、Bar（小節）が算出プロパティで管理します。
度数表記への変換
コード表記から度数表記への変換は、音楽理論のライブラリである tonal を使用しました。
tonal には、コード進行の他にも音符やスケールなどの音楽理論に関するモジュールがあります。
今回は progression を使用しました。
import { Progression } from "@tonaljs/tonal";
Progression.toRomanNumerals("C", ["CMaj7", "Dm7", "G7"]);
// => "IMaj7", "IIm7", "V7"]
その他
その他には以下のような技術を使いました。
- CSSフレームワーク： Bulma
- ホスティング： Netlify
スマートフォンではレイアウトが崩れます。また印刷時にもレイアウトが崩れます。
もし印刷される場合は Awesome Screenshot（chrome拡張機能） などを使用して下さい。