五度圏は演奏や作曲の心強い味方

五度圏(Circle of Fifths)とは音楽のキー（CメジャーとかAマイナーとか）の関係性が一眼で理解できる表のことです。

キーというのは、CメジャーとかAマイナーとか、その音を特徴つける調性のことです。

カラオケの「キーを上げる／下げる」と言った方が伝わりやすいかもですね。

この表を見ることでいろんなことがわかります。例をあげるとこんな感じです。

①調号記号からキーがわかる
→ フラットが２つだから、B♭のキーだな

②ドミナント進行（完全５度下降）が並んでいる
→ G7のあとはCにコード進行だな
→ ジャズで頻出のツー・ファイブ・ワン進行もわかる

③ダイアトニックコードがわかる
→ （説明が難しいので省略します。興味がある人は上記サイトを参照ください）

世の中に五度圏の画像やアプリはたくさん出てきます。

しかし、それらはシャープ（♯）が増える方向が時計まわりになっています。

私はドミナント進行の方向と同じである、フラット（♭）側が時計まわりになる方が良いと思っています。
→ドミナント進行の方向が時計回りになるからです
→この考えはJazzミュージシャンの方に多い気がします

そんなわけで、僕にとって一番使いやすい五度圏のスマホアプリを作ってみようと思います。

SVG勉強の題材としました

僕の本業は小説家ですが（冗談です）、生活費を稼ぐためにITエンジニアをしています（これは本当）

実は案件でSVG画像を扱うことになったので、その勉強の題材として五度圏を選びました。
（Qiitaでやれ！とは言わないお約束です）

それと、年に１度くらいの割合で無性にコード（音楽のそれではなく、プログラムのコード）を書きたくなる時ってあるのです。

というわけで、SVGをガリガリと書いていきます。

ドラフト版が完成したので意見が欲しいです

そんなこんなで出来ました。
https://7010oncajon.github.io/apps/circle-of-fifths/index.html

出来たこと（アプリのポイント）

* Webなので上記URLにアクセスすればすぐ使えます
* きちんとフラット（♭）が増える方向を時計回りにしています
* サークルの周りをドラッグするとぐるぐる回ります

出来なかったこと（改善の課題）

* 思ったより見づらかった
→ デザインの再考が求められている気がします
アルファベットが円に沿った向きになっています（伝われ！）
→ 回転したとしても上下が揃う方が良いでしょう（実装が少し面倒ですが。。。）

* ドラッグでぐるぐる回る操作感はどうなんでしょうか？
→ 動いた時は楽しかったですが、実際に使ってみると使いづらいかも
→ シャープボタンとフラットボタンを用意して、押すたびに回るという方がいいかも
* スマホにサイズの最適化が出来ていない
→ いわゆるレスポンシブ対応になっていないです
→ 実際にはやってみたのですが、画面サイズが変わるとドラッグによる回転角の計算がうまくいかなった

課題は残りましたが、作っている時は楽しかったのでよかったです。

この後も改善したいと思います（多分。記事として続くのかな。これ）

こんなことして遊んでいたせいで、次作の小説が遅々として進みません。。。