はじめに：コード進行を語れるブログプラットフォームがほしい

# はじめに

音楽についてのブログを書いていて、コード進行について触れたくなったとき、せっせとローマ数字に変換しながら進行を書いたり、何かしら別のツールで作成した譜面を画像として貼り付けたりするのは面倒です。

また他のコード譜投稿サイトだと実音コードで記述せねばならず（たぶん）、ディグリーで書きたいときに不便な時があります。

これは、それを解決するために Markdown 内でコード譜を直接書けるようにすることを目指した [mizchi/markdown.mbt](https://github.com/mizchi/markdown.mbt) のフォークプロジェクトです。

# "Chord Block" がある Markdown エディタ

通常の Markdown と同様に *斜体*・**太字**・`インラインコード`・[リンク](https://github.com/seo1nk/markdown.mbt)・リストや引用・通常のコードブロックはそのまま書けます。

そこに `:::` だけのフェンスを置くと、中身が **コード譜ブロック**（ディグリー記法）としてレンダリングされます:

```
:::
---
key: Eb
---
[サビ]
| NC |
> ぼく
| 1(9) b3@red 2m 37 |
> の記憶 が_すべ て消えて も
| 6m7 3m/5 6m6 4m/5@green |
| 1/3 4 5 37/b6@red |
> _ _ _ 満
| 6m7 3m/5 4m % |
> 月のよ る_君 をみつけ た
:::
```

上記の記述によってレンダリングされたコード譜がこちらです↓

:::
---
key: Eb
---
[サビ]
| NC |
> ぼく
| 1(9) b3@red 2m 37 |
> の記憶 が_すべ て消えて も
| 6m7 3m/5 6m6 4m/5@green |
| 1/3 4 5 37/b6@red |
> _ _ _ 満
| 6m7 3m/5 4m % |
> 月のよ る_君 をみつけ た
:::

試してみてください:

- [ ] タブを **コード** に切り替える（ローマ数字 ⇄ 実音）
- [ ] キーのプルダウンで **移調** する
- [ ] **▶** で再生する（譜面の設定に従ってコードとベースが鳴ります）
- [ ] **📷️** で表示中の譜面を PNG としてコピーする

## 記法のあらまし

コード譜を記述するための独自の DSL を定義しています。この DSL では、実音ではなく「ディグリー（度数）」でコードを表記します。

- `1`〜`7` で度数を記述
- シャープは `#`/`s`、フラットは `b`
- クオリティ: `m` `dim` `aug`, `q`（４度堆積和音）
- セブンス: `7` `M7`/`maj7`, `m7-5` `6` `add9` など
- テンション: カッコ内で `(#11)` など
- スラッシュベース: `1/3` などでベース音を記述
- 強調色 `@red @blue @green`

基本的にこれらを使って、ディグリーでコード進行を記述します。

```
:::
1maj7 6m7(9) 2m7 5(b9,#11) |
#4dim 47/6 b7@blue 1
:::
```

:::
1maj7 6m7(9) 2m7 5(b9,#11) |
#4dim 47/6 b7@blue 1
:::

また、他にもこういったものがあります:
- 小節線: `|` 
- `-` グループ: 1 スロット（拍）を分け合って複数コードを鳴らす
- 繰り返し: `%`
- 無音: `NC`
- コードを伸ばす空拍: `_` 

執筆時は、フロントマター（`key` / `bpm` / `time`）を使うと表示・再生に用いるキーやテンポ、拍子を指定できます。
省略可能で、省略時は Key C・120 BPM・4/4 拍子になります。

```
:::
---
key: Bb
bpm: 160
time: 6/8
---
1maj7 6m7(9) 2m7 5(b9,#11) |
#4dim 47/6 b7@blue 1
:::
```

:::
---
key: Bb
bpm: 160
time: 6/8
---
1maj7 6m7(9) 2m7 5(b9,#11) |
#4dim 47/6 b7@blue 1
:::

オプショナルな機能として、コードの下部で `>` から始まるブロックを書くことで、直上のコード譜に対応した歌詞を表示することもできます。この記事の Markdown を観察してみてください！

# おわりに

執筆時はチートシートを確認しながら書くことができ、プレビューでコード譜の見え方を確認しながら進められます👍️

投稿は「新規投稿」から誰でもすることが可能で、いちおうなりすませないように投稿者名でユーザー登録できます。ただメール登録などはないので、パスワードを忘れたらそのユーザーはそれまでです；；