超複雑な表を超簡単に書く：マークアップ言語markgaabの紹介（１）

# 要約

**複雑な表作成が簡単にできるマークアップ言語が出来たよ。markgaabというんだ。html5に特化したマークアップ言語で、perlとWini.pmというツールを通して使えるよ。**

# しばしば求められる「複雑な表」

ウィキペディア日本語版のとある記事には、こんな表が掲載されている。

![ouisen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383429/0f3a09a7-234c-15cc-cd35-54606dcdd4e5.png)


元ネタ:
[Wikipedia 王位戦_(将棋)#方式の遍歴](https://ja.wikipedia.org/wiki/%E7%8E%8B%E4%BD%8D%E6%88%A6_(%E5%B0%86%E6%A3%8B)#%E6%96%B9%E5%BC%8F%E3%81%AE%E9%81%8D%E6%AD%B4)

巷で日々生産される報告書のたぐいの中では、こういうノリで作られた表はそれほど珍しくはないだろう。
こうしたセンスが罷り通っているところに筆者としては思うところがないではないが、罷り通っているという現実を否定することは出来ないのである。

# 作表対応ツールはいろいろあるが……

こういった表を皆さんはどのように書いているだろうか。ワード？ エクセル？ まさかパワーポイント？ 理工系の人ならLaTeXと答える人も居るだろうか。

どのツールを使っても面倒なはずだ。

さて、素のhtmlよりはお手軽に編集できるのがwikiマークアップの売りである。そのwikiマークアップで当該の表はどのように表現されているのだろうか。ウィキペディアの編集画面を覗いてみよう。

* [https://ja.wikipedia.org/w/index.php?title=%E7%8E%8B%E4%BD%8D%E6%88%A6_(%E5%B0%86%E6%A3%8B)&action=edit&section=6](https://ja.wikipedia.org/w/index.php?title=%E7%8E%8B%E4%BD%8D%E6%88%A6_(%E5%B0%86%E6%A3%8B)&action=edit&section=6)
![wikitable_snap.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383429/a680d757-6c91-025e-0682-6200ccc64cb8.png)

うーん。素敵に複雑。これを素手で入力していくのは勘弁してほしいと思うところだろう。

どれもこれも面倒だ。本当にもっと簡単に編集する手段はないのだろうか？

# 遥かにお手軽に作表できるツールが誕生した！

あるのである！ というか、ないから作ったのである！

拙作[Wini.pm](https://github.com/Koji-Doi/wini)が、そのソリューションとなる。

筆者は、複雑な表の表現にも対応した簡易マークアップ言語であるmarkgaabと、そのサポートツールのWini.pmを開発して公開している。

上で掲げたのと同じ表をmarkgaabで表現すると、こうなる。
![ouisen2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383429/4d483ece-dc9a-bfe3-a270-45e47be91050.png)

どうですお客さん。上で示したウィキペディアのマークアップともう一度見比べてみて欲しい。ずいぶん直感的で見やすいでしょう？

その上、markgaabは表現力が強力無比である。セル結合・セル内箇条書き・注釈・罫線表示切り替え・行幅列幅調節・字配りの変更などなど、自由自在に実現できる。ソースコードの可読性を全く損なわずにだ。

易しさと強さを兼ね備えた最新のマークアップ言語。それがmarkgaabなのである。

# markgaab/Wini.pmを導入しよう

今まさに作表案件を抱えている皆さん。きょうもエクセルで消耗しますか？ Wini.pmに乗り換えましょう、今日！

ほんの**１０分だけ**準備に使えばいいから！

## perl

Wini.pmを利用するには、まずperlというものを使えるようにしなければならない。

残念ながらwindows10においてperlは標準装備ではない。もしWSL2が導入されているなら問題はない。本格的にやりたいなら他の様々な有用なテキスト操作ツールも使えるWSL2上のperlを使い倒すのが良い。そこまで深入りしたくないという人は、とりあえずportable版strawberry perlをもってくるのが手っ取り早いだろう。

参考：
[自宅でも職場でもネカフェでもperl - Qiita](https://qiita.com/doikoji/items/2280ff1e29b610bd07a3)

linux, MacOSなどを使っている人は、すでにperlが使える状況にあるだろう。次のステップに進んでほしい。

## 導入 (Wini.pm)

perlが使える様になったら、次に[github](https://github.com/Koji-Doi/wini)にアクセスしてzipファイルを展開、あるいは`git clone git@github.com:Koji-Doi/wini.git`する。

取得したアーカイブの中に入っているWini.pmをPATHの引かれたディレクトリにコピーすれば、セットアップ完了である。

# クイックスタート！ 超カンタンな表を書いてみよう

前述のとおり、超絶複雑な表を簡単に書けるのがmarkgaabのウリではあるが、まあ最初は至極簡単な表を取り上げ、基本について説明したい。

元ネタ: [公立の小学1.2.3年生の時間割はこんな感じ！ : himag](http://himag.blog.jp/52984664.html)

```
|- じかんわり １ねん２くみ | border="1" |
|!!    | 月                 | 火       | 水       | 木       | 金       |
|!!! 1 | こくご             | こくご   | こくご   | こくご   | こくご   |
| 2    | さんすう           | たいいく | こくご   | こくご   | さんすう |
| 3    | ずこう             | こくご   | たいいく | たいいく | さんすう |
| 4    | ずこう             | せいかつ | せいかつ | せいかつ | こくご   |
| 5    | がっきゅうかつどう | どうとく | おんがく | さんすう | おんがく |
```

上のようなコードを書いてこれを例えば`input.txt`としてセーブする。そして、コマンドラインから以下のような感じにコマンドを打ち込む（パス設定とかカレントディレクトリの違いとか適当に考慮して変更してほしい）。

```
perl Wini.pm < input.wini > output.html
```
すると、次のような内容のoutput.htmlが得られる。

```
<table id="winitable1" class="winitable" border="1" style="border-collapse: collapse; border: solid 1px; ">
<caption> じかんわり １ねん２くみ</caption>
<tbody>
<tr><th></th><th>月 </th><th>火 </th><th>水 </th><th>木 </th><th>金 </th></tr>
<tr><th>1 </th><td>こくご </td><td>こくご </td><td>こくご </td><td>こくご </td><td>こくご </td></tr>
<tr><th>2 </th><td>さんすう </td><td>たいいく </td><td>こくご </td><td>こくご </td><td>さんすう </td></tr>
<tr><th>3 </th><td>ずこう </td><td>こくご </td><td>たいいく </td><td>たいいく </td><td>さんすう </td></tr>
<tr><th>4 </th><td>ずこう </td><td>せいかつ </td><td>せいかつ </td><td>せいかつ </td><td>こくご </td></tr>
<tr><th>5 </th><td>がっきゅうかつどう </td><td>どうとく </td><td>おんがく </td><td>さんすう </td><td>おんがく </td></tr>
</tbody>
</table>
```

# markgaab tableの超カンタンな文法入門！ 以下を理解すればとりあえずOK

上で取り上げた小学校の時間割の例をざっとみていただければ、markgaabがどういう指向性のものか大体の見当はつくだろう。これを踏まえて改めて基本事項を整理しよう。

### 用語の整理

* 表は「セル」が縦横に配置されたテキストである。
* セルをヨコに並べたものが「列」である。
* セルをタテに並べたものが「行」である。

### 表データの基本構造
* それぞれの行はセパレータとセル内容が交互に並んだテキストとして表現される。
* `|`で始まり1つ以上のスペースで終わる文字列が、「セパレータ」である。
* `|`で始まらずスペースで挟まれた文字列が、「セル内容」である。

# 次回予告

詳細は次回記事に書くことにしよう。もう少しだけ複雑な表を書き、さらに超複雑な表の作成に話を進めていく。

# おわりに

なお、当然だがmarkgaabは作表**専用**言語ではない。markdownやwiki記法、LaTeXなど、先行システムをいろいろ研究した上で、究極にして至高で高機能なマークアップ言語たらんとして開発を続けている。それでいてperlとたった1つのスクリプトファイル(Wini.pm)のみあれば利用でき、スタートアップの敷居は至極低い。詳細については[公式マニュアル](https://zenn.dev/kojidoi/books/6831494c86db9b)を参照して欲しい。そして、とにかく使ってみていただきたい。

<!--
```
|- 表のタイトル |   option                          |
|  見出し0   | 列見出しA | 列見出しB | 列見出しC |
|  行見出し1 |    セル1A | セル1B   | セル1C    |
|  行見出し2 |    セル2A | セル2B   | セル2C    |
```

# ほんの少しだけ複雑な文法入門

元ネタ: [王位戦 (将棋) - Wikipedia](https://ja.wikipedia.org/wiki/%E7%8E%8B%E4%BD%8D%E6%88%A6_(%E5%B0%86%E6%A3%8B)#%E6%96%B9%E5%BC%8F)

```
|-     | border="1" | 
|!! 期 |   :王位戦   |   王位戦リーグ  |-             |-                 |-       |-           |-                      |-             | 
|^^    |   :七番勝負 |                 |              |                  |-       |-           |-                      |-                     |
|^^    |   :(2日制)  |                 |              |                  |        |            |                       |                      |
|^     |^            |!! 持ち時間3列め | 挑戦者決定戦 | 挑戦者決定リーグ |-       |-           |-                      |-                     |
|^     |!! 持ち時間  |^                | 方式         | 出場人数         | 組順位 | シード条件 | 組優勝決定方法        | 残留者決定方法       |
```

## 以下を理解すればとりあえずOK

* ヘッダーの定義
* エクセルでいうセル結合（HTMLでいうcolspan, rowspan）の方法
* 行融合
-->
<!--

# そうとう複雑な表

これはウィキペディアから拝借してきた題材である。ウィキペディアの将棋系の記事には複雑な表がたくさんあり、サンプルに事欠かない。
ここで取り上げた例はそうした中でも特に程よく「複雑」で、複雑な表にありがちないくつかの特徴が認められる。

* セルが縦横に連結されまくっている。
* それに伴い罫線が縦横無尽に描かれ、表全体が迷路のよう。
* 一部のセルには長い長いテキストが書きこまれている。
* セルの中に「箇条書き」がたくさん含まれる。

```
|-        | border="1"                                                               | 
|!! 期    |<01c1   |<01c2  |-      |-         |-         |-         |-     |-     |<01c9 |-      | 
|^        |^       |<02c2  |<02c3  |<02c4     |-         |-         |-     |-     |<02c9 |<02c10 | 
|^        |<03c1   |^      | 方式  |$100<03c4 |<03c5$100 |<03c6$100 |<03c7 |<03c8 |^     |^      | 
|!!! 1    | 10時間 | 7時間 | -     |<1c4      |<1c5      | -        |<1c7  |<1c8  | 10名 |<1c10  | 
| 2       |^       |^      |<2c3&c |^         |^         |<2c6      |^     |^     | 7名  |<2c10  | 
| 3       |^       |^      |^      |<3c4      |^         |<3c6      |^     |^     | 6名  |^      | 
| 4~8     |^       | 6時間 |^      |^         |^         |^         |^     |^     |^     |^      | 
| 9~17    | 9時間  |^      |^      |^         |^         |^         |^     |^     |^     |^      | 
| 18~26   |^       |^      |^      |<18c4     |^         |^         |^     |^     | 8名  |^      | 
| 27~29   |^       |^      |^      |^         |<27c5     |^         |<27c7 |<27c8 |^     |^      | 
| 30~36   | 8時間  | 5時間 |^      |^         |^         |^         |^     |^     |^     |^      | 
| 37~44   |^       |^      |^      |^         |<37c5     |^         |^     |^     |^     |<37c10 | 
| 45~55   |^       |^      |^      |^         |^         |^         |^     |^     |^     |^      | 
| 56~     |^       |^      |^      |^         |<56c5     |^         |<56c7 |-     |^     |^      |
|01c1 王位戦七番勝負（2日制）                                                                    |
|01c2 王位戦リーグ                                                                               |
|01c9 予選トーナメント                                                                           |
|02c2 待ち時間                                                                                   |
|02c3 挑戦者決定戦                                                                               |
|02c4 挑戦者決定リーグ                                                                          |
|02c9 通過人数                                                                                   |
|02c10 出場条件                                                                                  |
|03c1 待ち時間                                                                                   |
|03c4 出場人数                                                                                   |
|03c5 組順位                                                                                     |
|03c6 シード条件                                                                                 |
|03c7 組優勝決定方法                                                                             |
|03c8 残留者決定方法                                                                             |
|1c4  ;10名                                                                                      |
|^^   :*A組5名                                                                                   |
|^^   :*B組5名                                                                                   |
|1c7  成績首位全員の{{*|トーナメント}}で決定                                                     |
|^^   (奇数の際のシード者に前年の成績は考慮されない)                                             |
|1c8  残留ライン上全員の{{*|トーナメント}}で決定                                                 |
|^^   (奇数の際のシード者に前年の成績は考慮されない)                                             |
|1c10 棋士全員                                                                                   |
|2c3  {{v|紅白の優勝者で決勝}}                                                                   |
|2c6  ;3名                                                                                       |
|^^   :*前期七番勝負敗者                                                                         |
|^^   :*前期リーグ2位                                                                            |
|2c10 {{*|棋士全員}}（シード者以外）                                                             |
|3c4  ;10名                                                                                      |
|^^   :*紅組5名                                                                                  |
|^^   :*白組5名                                                                                  |
|3c6  ;4名                                                                                       |
|^^   :*前期七番勝負敗者                                                                         |
|^^   :*前期リーグ2位以上                                                                        |
|18c4 ;12名                                                                                      |
|^^   :*紅組6名                                                                                  |
|^^   :*白組6名                                                                                  |
|27c5 :1位：残留者2名                                                                            |
|^^   :2位：予選突破者4名                                                                        |
|27c7 成績首位全員の {{*|トーナメント}}で決定（前年の成績考慮は後述）                            |
```

## 文法詳解


### 表内マクロ

#### 表構造定義とセル内容とを分離して管理する

#### link in table

#### macro definition

# conclusion

-->
# 参考リンク

* [WINI ━ WIKIやMARKDOWNを超えた新しいマークアップ言語](https://qiita.com/doikoji/items/f6139b7d91b48e50dcef)
* [Markdown, wiki markup, html5そしてWINI: 簡易マークアップ言語書法の比較早見表（チートシート）](https://qiita.com/doikoji/items/a11b0c9b00e1f0107cf7)
* [ウェブサイトらくらく作成 軽量マークアップ言語markgaab/Wini](https://zenn.dev/kojidoi/books/6831494c86db9b) -- 公式マニュアル。最新かつ包括的な情報はこちらにある。