개요

악곡의 코드 진행을 디그리 네임(도수 표기)으로 변환해 표시하는 어플리케이션을 만들었습니다.

프레임 워크는 Nuxt.js를 사용했습니다.

이 기사는 애플리케이션의 제동기 및 설계에 대해 작성되었습니다.

어떤 응용 프로그램입니까?

chord2degree
악곡의 코드 진행을 디그리네임(도수 표기)로 변환해 표시하는 어플리케이션입니다.



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 확장 기능) 등을 사용해 주세요.