実は密かに趣味のアコースティックギターの入門用のサイトを作ろうかと、ちょこちょこ作業をしていたのです。
acoustic-guitar.hatenablog.com
で、どうしても必要なものができて探したけれども、なんかシックリくるのがないので、ここはIT技術業界の片隅に住んでる者としては「作るしかない」ということで、作りました。
ギターコードダイアグラム（コード表）の画像を生成Javascript
何が必要だったかと言うとギターコードダイアグラム（コード表）の画像が欲しかった。
どうしてもアコースティックギターを語るのにギターコードダイアグラム（コード表）は必要だろうと。
タダで自由な画像はいっぱいあるんだけど、それを全部ダウンロードしてアップするのが面倒くさい。
ならば、動的に画像を作るスクリプト書けばいいじゃん。
で、結果はこれ。
まぁできてるか。
使い方
使い方は簡単でまずヘッダーで
<script src="http://tsugani.com/js/chord_maker.js" charset="Shift_JIS"></script>
と記述します。（JQueryも必要なんでロードしてない人はして下さい。）
次にギターコードダイアグラム（コード表）を表示したいところにcanvasタグを作ります。
<canvas class="gchord" width="128px" height="128px" chordwidth="64px" chordheight="64px" chord="0|1|0|2|3|0" chordname="C">
以上で表示する・・・はず。
注意事項は
- class名は「gchord」にします。（固定で必須です。）
- widthは「128px」にします。（固定で必須です。）
- heightは「128px」にします。（固定で必須です。）
- chordwidthは実際の表示される画像の横幅です（指定なしの場合は「128px」。）
- chordheightは実際の表示される画像の高さです（指定なしの場合は「64px」。）
- chordはダイアグラムのポジションです。左から１弦、２弦・・・と６弦まで指定します。開放弦は「0」です。ミュートは「x」です。（必須です。）
- chordnameは表示するコード名です。
今後の対応予定
現在のところ｢対応した方がいいよなぁ・・・」と思っていることは
- canvasの「width」「height」は指定しなくてもいいようにしたい
- ベース音は「◎」で表現したい
- コード名の「#」とか「7」などはちゃんと上付き、下付きの文字にしたい
でしょうか。
注意事項
現在はβバージョンのため動作は日々変わります。（正式バージョンになるかどうかも不明）
スクリプトのリンク元も変わるかもしれません。
今後はこのスクリプトに関する情報はアコースティックギター超入門でお知らせする予定です。
このスクリプトを利用して作成される画像はご自由に利用して下さって結構です。
ただしスクリプトの著作権は放棄しません・・・って２時間で作ったので誰でもできますけどね。
万が一このスクリプトを使用して問題が発生しても、いかなる責任は負えませんのであしからず。