やっぱりコードは出た方が良いなということで、コードを出せるようにしてみました。上記の画像は前回の説明記事(→簡易ギターコード移調プログラム(令和バージョン)を作りました)で触れた米津玄師のLemonを4カポになるようにトランスポーズさせた時のコードです。
EM7が表示されるようにしてみようと試みた所、何かしら内部的な処理に問題が出るような感じなのでメジャーセブンスは例えば、Emaj7と入力してみて下さい。
SVGで書き出すタイプのスクリプトがあったのでそれを圧縮して利用してます(chordJS)。画像が小さいので、指の数字が小さいのです。もっと大きくもできるんですが、スマホで見る場合これぐらいかなぁと思ったりもしたりしてます。
今どきならReactとかVueとかでこういったギターあるいは音楽のコードを表示するプログラムはあるんですが、前にも使っていたこともあってこのスクリプトを使わせてもらうことにしました。
と言っても、こいつの仕様は、リンク先のGithubを見てもらえればわかるんですが、独自htmlにコードの名前と位置、指を数字で指定すると言うもので、それをコード名から拾えるようにするためにJSONファイルを作らねばならず、前に作っていたものがあったらデータはあったのでそれを変換するようなものを作れば良かっただけだったんですが、バックアップするのを忘れて既に消滅済みだったんで、1からデータを作るのが大変でした。
このデータを追加していけば例えばonコードとか○m79とかも作れたりもするんですけれども、まぁ面倒くさいですよね。なので、基本的なよく見るようなコードを160個ぐらい作りました。
追加操作方法
- 何かしらのコード進行をテキストエリアに書くか、ローカルからテキストファイルを作って読み込む
- checkボタンを押して、output欄にデータを反映させる
- output欄をtap/clickすると、output欄下にコードを表示
こういう具合です。
トランスポーズでキーを上下させると、output欄のコードもそれに応じて変化します。その変化の都度タップしていけばコードは表示・更新されます。
基本的に、#のついたコードでキーを上下させているので♭なコード表示が欲しいと言う場合は、output欄左上の# -> bボタンを押すとoutput欄の表示が変わります。♭なコードで表示された時にtap/clickすると、♭なコードが再表示されます。
再表示されてはいるのですが、コード自体は名前が違うだけで同じものです。
例えば、G#m7 と Abm7 は同じです。
なので、ここから#なコードで裏側では動き、名前だけが変化するようになっています。
前述したように、JSONで160個のコードを書いたわけですが、曲によってはここから漏れているコードもあるかと思います。そういった登録がないコードはもちろん表示されません。
これは入れておいた方がいいなと思われるコードに気がついた場合は追加します。
また、全部のコードから重複を取り除いています。A/D7/E7/A/E7というようなコードがあった場合は、A、D7、E7のみが表示されるという具合です。
htmlにはきちんと反映されているのにずっとundefinedのエラーが出てて、その原因を掴むのに半日ぐらいかかりました。単純に登録がないコードを表示しようとしていただけだったのですが、何をこんなにハマってるんだと、これさえなければ今頃本編をアップロー…ｹﾞﾌﾝｹﾞﾌﾝ
というような1日でした。