アコースティックギター超入門

アコースティックギター超入門

アコースティックギター超初心者のための入門ブログ

ギターコードダイアグラム(コード表)の画像を生成するJavascript「コードメーカー(β)」を作成しました

ギターコードダイアグラム(コード表)の画像を生成するJavascriptを作成しました。

現在のバージョンはβです。

使いかた

1.ヘッダーでスクリプトを読み込む

HTMLのヘッダータグで以下のスクリプトを読み込みます。

<script src="http://tsugani.com/js/chord_maker.js" charset="Shift_JIS"></script>

※このスクリプトを動作させるにはJQueryの読み込みも必要です。

2.画像を表示したい箇所にcanvasタグを書く

ギターコードダイアグラム(コード表)を表示したいところに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は実際の表示される画像の高さです(指定なしの場合は「128px」。)
  • chordはダイアグラムのポジションです。左から1弦、2弦・・・と6弦まで指定。開放弦は「0」です。ミュートは「x」です。(必須。)
  • chordnameは表示するコード名です。(必須。コード名不要の場合は""を指定)

以上で画像を表示できます。

今後の対応予定(ただし必ず対応できるかどうかはわかりません。)

  1. canvasの「width」「height」は指定しなくてもいいようにしたい
  2. ベース音は「◎」で表現したい
  3. コード名の「#」とか「7」などはちゃんと上付き、下付きの文字にしたい
  4. canvasのサイズを「128px×128px」と過程して線を書いているので、本当の意味での画像の拡大・収縮をさせたい
  5. Internet Exploreでは表示した画像がダウンロードできない
  6. スマホへのやさしい画像の大きさにも対応したい

注意事項

  1. スクリプトのリンク元が変更になる可能性があります。
  2. スクリプトはダウンロードしていただいて利用されても構いません。
  3. スクリプトの著作権は放棄しません。
  4. スクリプトが生成した画像はダウンロードしてお使いください。改変も自由です。
  5. 万が一スクリプトを使用して問題が発生しても、いかなる責任は負いません。