LoginSignup
5
2

More than 3 years have passed since last update.

コード進行をディグリーネーム(度数表記)に変換して表示するアプリの制作

Last updated at Posted at 2020-04-03

概要

  • 楽曲のコード進行をディグリーネーム(度数表記)に変換して表示するアプリケーションを作りました。
  • フレームワークは Nuxt.js を使用しました。
  • この記事はアプリケーションの制作動機と設計について書かれています。

どんなアプリケーションか?

 chord2degree
 楽曲のコード進行をディグリーネーム(度数表記)に変換して表示するアプリケーションです。

lemon.png

 GitHubのリポジトリ

なぜ、作ったのか?

  • コード弾きのために度数表記の譜面を作成したかった。
  • 邦楽に典型的なパート区分(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拡張機能) などを使用して下さい。

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2