あらまし
ブラウザでコード譜を書くためのMarkdownベースのJavascriptライブラリ fumen の紹介です。
Github : https://github.com/hbjpn/fumen/
ドキュメント : https://hbjpn.github.io/fumen/
プレイグラウンド : https://fumenbook.com/
Wordpress Plugin: https://wordpress.org/plugins/fumen/
ずいぶん前(2013年〜)から公開していましたが、以前のバージョンは速度が遅かったり描画の純軟性にかける問題があったので、根本的な作り直しを行いました。また、fumenをコアにしたコード譜作成WEBサービスfumenbookも作りました。
モチベーション
譜面を作るツールは多くあるのですが、音符等まで含めた綺麗な譜面を作ることを主眼においたものが殆どです。一方でポピュラー音楽をバンドで合わせるような場面では、コード、尺、構成（繰り返し）、シンコペーションといったレベルでの演奏指示がわかれば十分で、音符レベルの情報が必要なケースは多くありません。実際のところコード譜をテキストで書いている人も多いくらいですので、マークアップ形式とした方が手軽で便利だろうとの観測のもと作りました。
マークアップ形式の楽譜作成ソフトにはlilypond等がありますが、fumenはコード譜作成に特化したシンプルな構文になっており、より直感的に簡単に作ることができます。
何ができるの？
- 平易な構文に基づいたマークダウンテキストを入力として、HTML Canvasエレメント上にコード譜を描画します。
- ポピュラーミュージックではよく使われるコード譜、マスターリズム譜と言われる譜面が作れます。
- キーのトランスポーズを自動化できます。
- マークダウンソースコード自体が、コード譜としてヒューマンリーダブルです。ただのテキストなのでバンドメンバや仲間との共有も簡単です。
- Clientオンリーで動くので、HP, ブログ等に簡単に埋め込みできます(Wordpressプラグインもあります)
サンプル
%TITLE="サンプル"
%SUB_TITLE="〜サブタイトル〜"
%ARTIST="アーティスト"
%SHOW_STAFF="YES"
[A]
| <S> CM7 | Am7 | FM7 | F/G |
| Em7 | Am7 | Dm7 | G7 |
[B]
||: '(コメント)' Am7:1 | CM7:4. FM7:8~ :2 | [1.] `歌詞`@Dm7:2 `など`@C/E:2 | `かける`@F:2 `さ`@F/G:2 :||
>| [2.] Dm7:1 | G7:1 <D.S.> |
レンダリングイメージは下記の様になります。
Cheat Sheet
下記のような要素をサポートしています。詳しくは https://hbjpn.github.io/fumen/ を参照ください。
| Markdown | Description |
|---|---|
| Cm7-5#11 | コード. |
| C/D | On bass表記付きのコード |
| /D | On bass表記のみ |
| C:4. | 長さ指定付きのコード. 付点四分の例. |
| C:4.~ | 長さ指定付きのコード. 付点四分 + 次のコードにタイで連結. |
| r:4. | 休符 |
| -2- | 小節休符 |
| | | 小節境界(１本線) |
| || | 小節境界(2本線) |
| ||. | 小節境界(2本線, 二本目太め表示) |
| ||: | リピート開始 |
| :|| | リピート終了 |
| :||x3 | リピート終了(リピート数つき) |
| :||: | リピート終了と開始のコンビネーション |
| ./|/. | Simileマークがオーバーレイされた小節境界 |
| > | 右揃え(行の先頭に指定) |
| < | 左揃え(行の先頭に指定) |
| (4/4) | 拍子記号 |
| <Coda> | コーダ. "Coda"に続き整数番号を指定できる. |
| <to Coda> | To コーダ. 整数番号を指定可能. |
| <S> | セーニョ. 整数番号を指定可能. |
| <D.S.> | ダルセーニョ. 整数番号を指定可能. |
| <D.S. al Coda> | ダルセーニョ アル コーダ. アルフィーネも同様に指定可能. |
| <D.C.> | ダカーポ |
| <D.S. al Coda> | ダカーポ アル コーダ. アルフィーネも同様に指定可能. |
| <Fine> | フィーネ |
| [1.] | ヴォルタ記号(1番カッコ、2番カッコ)等の指定 |
| ./. | Simile 記号(シングル) |
| .//. | Simile 記号(ダブル) |
| "text" | テキスト. コードと同じ縦位置に描画. |
| 'text' | テキスト. コードの一個上の行に描画. |
| 'text'@ C7 | 特定コードの上にテキストを描画 |
| `text`@ C7 | 特定コードの下にテキストを描画. 歌詞などに使用. "/"で改行可能. |
| , | 空白(1コード分に相当)を挿入 |
Fumenbook
fumenbookはfumenで書いたコード譜をクラウド上へ保存するWEBサービス・Mobile Appです。スコアはクラウド上に保存され、複数の端末ブラウザで同期されます。セットリスト機能、PDFエクスポート機能など便利な機能搭載しています。主にリハやライブでモバイル端末から参照することを念頭に置いています。マークアップ形式での記述がベースですが、モバイル端末からだと書きにくい部分もあるので、GUIベースでの編集も可能になっています。
WEB: https://fumenbook.com/
iOS : https://apps.apple.com/jp/app/fumenbook/id1511784636
Android: https://play.google.com/store/apps/details?id=com.fumenbook
