HOME > アプリ開発 > chordView

chordView

(更新履歴)

1. 概要

　ギターのコード表示や歌詞とコードの表示を支援するJavascriptプログラムです。山口岩男さんの方言ソングのページを作った時に、どうせならいろいろ使えるようにと思い、作りました。

2. コード譜の表示(下記の例を表示)

　以下はコード譜の表示例です。以下、この画面を「view画面」と呼びます。

　ブラウザ画面の拡大縮小は、 Ctrl + + / Ctrl + - のキーボード操作や Ctrl を押しながらマウスホイール操作で行うことができます。

　view画面右下の を押すと、画面下に編集画面が現れます(下図)。

　編集画面の各行は以下のように解釈され、view画面に反映されます。

  1. 「//」から行末まではコメントです。「// --- ここから ---」や「// --- ここまで ---」はコメントでview画面には影響しません。
  2. タブなしの行は「曲名(タイトル)」です。この例では「循環進行 in C」が曲名(タイトル)としてview画面に反映されます。
  3. 曲名に続くタブ1段の行はその曲の内容、つまりコード譜データです。ここで、図ではわかりにくいのですが、「CΔ7」はタブでインデントされています。また、この例では「CΔ7」「A-7」「D-7」「G7」の間もタブで区切られていて、これにより、小節の区切りとして「|」が自動的に表示され、この位置で各行が揃います。

　内容を変更し を押すと、view画面が更新されます。また、変更した内容は保存され、次回以降も変更した画面が表示されます。元の内容に戻したい場合は を押します。なお、変更内容はブラウザに保存されるので、他のパソコンで見ても反映されません。

3. 歌詞とコードの表示(下記の例を表示)

　以下は歌詞とコードのview画面の例です。

　view画面右下の を押すと、画面下に編集画面が現れます(下図)。

　編集画面の各行は以下のように解釈され、view画面に反映されます。

  1. 「//」から行末まではコメントです。「// --- ここから ---」や「// --- ここまで ---」はコメントでview画面には影響しません。
  2. タブなしの行は「曲名(タイトル)」です。この例では「少年時代」が曲名(タイトル)としてview画面に反映されます。
  3. 曲名に続くタブ1段の行はその曲の内容、つまり歌詞・コードのデータです。ここで、図ではわかりにくいのですが、行の先頭はタブでインデントされています。
  4. 「[夏:G]が...」は、view画面では「夏Gが...」のような表示となります。歌詞の上にコードが表示されます。
  5. view画面の曲名の隣の を押すとコードの表示/非表示が切り替わります。
  6. コードはの箇所でKEYを変更できます(移調)。KEYの状態は曲ごとに保存されます。

　内容を変更し を押すと、view画面が更新されます。また、変更した内容は保存され、次回以降も変更した画面が表示されます。元の内容に戻したい場合は を押します。なお、変更内容はブラウザに保存されるので、他のパソコンで見ても反映されません。

4. メニュー画面の表示(1)(下記の例を表示)

　複数の曲が登録されていると、まずメニュー画面が表示されます(下図)。

　曲名の隣の[view]をクリックすると、その曲のview画面が表示されます。

　メニュー画面右下の を押すと、画面下に編集画面が現れます(下図)。

　編集画面の各行は以下のように解釈され、view画面に反映されます。

  1. 冒頭のタブ1段の行(この例では「ギター練習」)はメニュー画面のタイトルとなります。
  2. 更にタブ1段の行が続く場合(この例では「ギターのコード譜の例です」)は説明文となります。
  3. タブなしの行は「曲名(タイトル)」です。この例では「循環進行 in C」、「循環進行(ディグリーネーム)」、「Autumn Leaves」が曲名となります。
  4. 曲名に続くタブ1段の行はそれぞれの曲の内容、つまりコード譜データです。

5. メニュー画面の表示(2)(下記の例を表示)

　もうひとつの例です。

　曲名の隣の[view]をクリックすると、その曲のview画面が表示されます。

　メニュー画面右下の を押すと、画面下に編集画面が現れます(下図)。

　編集画面の各行は以下のように解釈され、view画面に反映されます。

  1. 冒頭のタブ1段の行(この例では「井上陽水」)はメニュー画面のタイトルとなります。
  2. 更にタブ1段の行が続く場合(この例では「歌詞とコードを表示する例です」)は説明文となります。
  3. タブなしの行は「曲名(タイトル)」です。この例では「少年時代」と「白い一日」が曲名となります。
  4. 曲名に続くタブ1段の行はそれぞれの曲の内容、つまり歌詞とコードのデータです。

6. メニュー画面の表示(3)(下記の例を表示)

　別ページへのリンクの例です。この例では、実際の歌詞やコードは別ファイル(yosui.htmlとtakuro.html)に記載されています。

　曲名の隣の[View]をクリックすると、その曲のview画面が表示されます。

　メニュー画面右下の を押すと、画面下に編集画面が現れます(下図)。

　編集画面の各行は以下のように解釈され、view画面に反映されます。

  1. 冒頭のタブ1段の行(この例では「陽水・拓郎」)はメニュー画面のタイトルとなります。
  2. 更にタブ1段の行が続く場合(この例では「リンクリストの例です...」)は説明文となります。
  3. タブなしの行は「曲名(タイトル)」です。この例では「少年時代」と「落葉」が曲名となります。どちらも、曲名に続いてタブ区切りでリンク先のURLのみが記載され、歌詞もコードも記載されていません。リンクの場合、表示は[View](Vは大文字)となります。なお、リンク先のページに複数の曲が記載されている場合、「?少年時代」のように曲名(キーワードを表すパラメータ)を記載すれば、該当する曲がすぐに表示されます。

7. HTMLファイルの作り方

　上記のようなページを新規に作る場合は、以下を参考にHTMLファイルを作成してください。

(1) 以下は本ページ冒頭で取り上げたHTMLファイルです。このままの内容で jazz1.html というファイルを作成すれば、すぐに動作を確認できます。

jazz1.html:

<!DOCTYPE html><html><head> <meta name=viewport content="width=device-width,initial-scale=1"> <meta charset="utf-8"> <style> .TABLE2{ background-color:whitesmoke;/* 背景色 */ padding:40px; /* マージン */ border:1px solid; /* 枠線幅 */ } td{ line-height:150%; /* 歌詞の行間調整 */ } rt{ color:crimson; /* コードの色 */ font-size:80%; /* コードのフォントサイズ */ } </style> <script src=https://koyama.verse.jp/apps/chordview/chordview.js> </script> </head><body> <div id=MENU></div> <div id=CONTENT></div> <div id=EDIT></div> <center><textarea id=CHORDTEXT rows=20 cols=60 style=display:none> // --- ここから --- 循環進行 in C CΔ7 A-7 D-7 G7 CΔ7 A-7 D-7 G7 // --- ここまで --- </textarea></center> </body></html>

(2) 「--- ここから ---」と「--- ここまで ---」の間を書き換えて、別のファイル名で保存してください。

(3) 背景色やフォントなど、デザインに関する箇所も好みに合わせて変更できます。

(4) chordview.jsをダウンロードして利用したい場合は、chordview.txtをダウンロードし、ファイル名をchordview.jsに変更し、HTMLファイルと同じ場所に置いてください。そして、HTMLファイルの

<script src=https://koyama.verse.jp/apps/chordview/chordview.js> </script> の箇所を <script src=chordview.js></script> に変更してください。

8. コード譜データとview画面

　上記の「--- ここから ---」と「--- ここまで ---」の間のコード譜データの書き方とview画面の関係をまとめました。

コード譜データview画面の表示
「//」から行末まではコメントです。 view画面には影響しません
タブなしの行は「曲名(タイトル)」です。 view画面にタイトルとして表示されます。
タブなしの行(続き)
「曲名(タイトル)」に続いてタブ区切りでリンク先(URL)を書くことができ、この場合は次行以降に歌詞やコードデータは書きません。
リンク先に複数の曲が記載されている場合、通常であれば曲の一覧が表示されますが、「?少年時代」のように曲名(キーワードを表すパラメータ)を指定することにより、その曲のview画面を直ちに表示できます。		 リンク先(URL)の歌詞やコードがview画面となります。
複数の曲が記載されている場合(タブなしの行が複数ある場合) はじめにメニュー画面が表示され、曲名の横の[view]または[View]をクリックするとその曲のview画面が表示されます。
冒頭、曲名(タイトル)の前にタブ1段の行がある場合 メニュー画面のタイトルとなります。
更にタブ1段の行が続く場合は、説明文として表示されます。
(タブなしで)「---」と書くとメニュー画面に区切り線が表示されます。曲数が多い場合に使います。
(タブなしで)「--- 小見出し ---」と書くとメニュー画面に小見出しが表示されます。曲数が多い場合に使います。
曲名に続くタブ1段の行はその曲の内容(コード譜または歌詞とコード)です。 指示に従いview画面に表示されます。
曲の内容(続き)
コード譜または歌詞とコードがタブで区切られている場合(小節区切り)		 view画面では各行がタブ位置で揃います。
4つ以上に区切られた場合は区切り位置に「|」が表示されます
曲の内容(続き)
歌詞の上にコードを表示したい場合は [夏:G]が... のように書きます。		夏Gが... のように表示されます。
曲名の隣に表示される を押すとコードの表示/非表示が切り替わります。
コードはでKEYを変更できます(移調)。変更したKEYは曲ごとに保存されます。
曲の内容(続き)
コード譜などの画像ファイル名(jpg, png, gif)を書くと		画像が表示されます。
曲の内容(続き)
演奏などのサウンドファイル名(mp3, wav)を書くと
のようにサウンドバーが表示されます。
曲の内容(続き)
リンク先のURL(https:..)を書くと		[リンク]が表示されます。リンク先がYoutubeの場合は[Youtube]となります。
曲の内容(続き)
(タブに続き)「---」と書くと		区切り線が表示されます。
曲の内容(続き)
(タブに続き)「--- 小見出し ---」と書くと		小見出しが表示されます。
view画面あるいはメニュー画面右下の を押すと view画面の下に編集画面が現れます。
編集画面でコード譜データを変更し を押すとview画面が更新されます。
変更した内容は保存され、次回以降も変更した画面が表示されます。
ただし、変更内容はブラウザに保存されるので、他のパソコンで見ても反映されません。
を押すと 初めの状態に戻ります。編集画面で変更した内容は保存されないので注意してください。
HTMLファイル中のコード譜データを変更すると HTMLファイルのコード譜データの画面となります。編集画面で変更した内容は保存されないので注意してください。