Excelを卒業してAsciiDocに乗り換えた話

# はじめに

Excelだと差分管理がしにくい。
CSVだと書式の設定ができない。
それなら、AsciiDocで実装して、HTMLファイルを生成しよう。

# 現状把握
こんなExcelがあったとします。

<img width="240" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878141/61b4b246-9018-a85e-4658-f9a678210cf3.png" />

* セルの中で改行している。
* セルの中で異なるフォントサイズが混在している。
* 一部罫線を引かないセルがある。


# やったこと
## 1. \*.xlsxを\*.csvにする
ExcelをCSV形式で保存します。
保存したCSVファイルがこちら。

```csvs:items.csv
改訂年月日,項番,改訂内容
2017.01.01,－,新規作成
2019.01.01,全体,"×××に対応
×××に対応"
,6.1,×××を追加
2022.01.01,2.1,"×××を変更
※ 旧：○○○→新：△△△"
,6,×××を変更
2023.01.01,3.6,×××を追加
,1.1,×××を変更
2024.01.01,"2.2
3.2
4",×××を変更
```

## 2. CSVファイルをAsciiDocでincludeする

includeについてはこちらを参照↓

https://docs.asciidoctor.org/asciidoc/latest/tables/data-format/

```markdown:table.adoc
[%header,format=csv]
|===
include::resources/csv/items.csv[]
|===
```

このAsciiDocからHTMLファイルを生成すると、こう。

<img width="480" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878141/4d49b665-256f-b808-c0ed-d67d4bb18518.png" />

* セルの中で改行していない。
* フォントサイズがすべて同じ。
* すべてのセルに罫線が引かれている。

この辺を直していきます。
なお、スタイルシートはAsciiDocのデフォルトのものを流用しています。

## 3. 書式を設定する

### 改行する

改行についてはこちらを参照↓

https://docs.asciidoctor.org/asciidoc/latest/blocks/hard-line-breaks/

```diff_csvs:items.csv
改訂年月日,項番,改訂内容
2017.01.01,－,新規作成
- 2019.01.01,全体,"×××に対応
+ 2019.01.01,全体,"×××に対応 +
×××に対応"
,6.1,×××を追加
- 2022.01.01,2.1,"×××を変更
+ 2022.01.01,2.1,"×××を変更 +
※ 旧：○○○→新：△△△"
,6,×××を変更
2023.01.01,3.6,×××を追加
,1.1,×××を変更
- 2024.01.01,"2.2
- 3.2
+ 2024.01.01,"2.2 +
+ 3.2 +
4",×××を変更
```

このAsciiDocからHTMLファイルを生成すると、こう。

<img width="480" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878141/f77db3ec-e74d-2f35-513a-963302d71d24.png" />

### フォントサイズを変える

フォントサイズの変え方（クラスの設定の仕方）についてはこちらを参照↓

https://docs.asciidoctor.org/asciidoc/latest/text/custom-inline-styles/

```diff_csvs:items.csv
改訂年月日,項番,改訂内容
2017.01.01,－,新規作成
2019.01.01,全体,"×××に対応 +
×××に対応"
,6.1,×××を追加
2022.01.01,2.1,"×××を変更 +
- ※ 旧：○○○→新：△△△"
+ [.small]#※ 旧：○○○→新：△△△#"
,6,×××を変更
2023.01.01,3.6,×××を追加
,1.1,×××を変更
2024.01.01,"2.2 +
3.2 +
4",×××を変更
```

このAsciiDocからHTMLファイルを生成すると、こう。

<img width="480" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878141/89e36ea7-68fa-4bcb-c037-7249fd6d6fd5.png" />

### 不要な箇所の罫線を消す

ここは……力技で……。

```diff_markdown:table.adoc
+ ++++
+ <style>
+ .reduced-border-tbl td {
+     border-bottom-width: 0 !important;
+ }
+ 
+ .reduced-border {
+     border-top-width: 0 !important;
+ }
+ </style>
+ 
+ <script>
+ window.addEventListener('load', () => {
+     document.querySelectorAll('.reduced-border-tbl td').forEach(cell =>
+         !cell.textContent.trim() && cell.classList.add('reduced-border')
+     );
+ });
+ </script>
+ ++++
+ 
- [%header,format=csv]
+ [%header.reduced-border-tbl,format=csv]
|===
include::resources/csv/items.csv[]
|===
```

このAsciiDocからHTMLファイルを生成すると、こう。

<img width="480" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878141/820ed045-6753-e631-320b-dce1e1d3619f.png" />

### 気になったので……

#### セルの幅

セルの幅を文字列の長さに合わる方法はこちらを参照↓

https://docs.asciidoctor.org/asciidoc/latest/tables/width/

```diff_markdown:table.adoc
（略）

- [%header.reduced-border-tbl,format=csv]
+ [%header%autowidth.reduced-border-tbl,format=csv]
|===
include::resources/csv/items.csv[]
|===
```

このAsciiDocからHTMLファイルを生成すると、こう。

<img width="480" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878141/d4b17eb1-a664-4492-9818-83d009e67e13.png" />

#### フォント

Webフォントの設定の仕方についてはこちらを参照↓

https://docs.asciidoctor.org/asciidoctor/latest/html-backend/default-stylesheet/

```diff_markdown:table.adoc
（略）

+ @import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&display=swap');
+ 
+ .reduced-border-tbl {
+     font-family: "BIZ UDGothic", sans-serif;
+ }

（略）

[%header%autowidth.reduced-border-tbl,format=csv]
|===
include::resources/csv/items.csv[]
|===
```

このAsciiDocからHTMLファイルを生成すると、こう。

<img width="480" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878141/4f125a5a-4057-d76e-1813-6862fda7cd4d.png" />

# できあがったもの

こちらがExcel↓

<img width="240" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878141/61b4b246-9018-a85e-4658-f9a678210cf3.png" />

こちらがCSVファイルをAsciiDocでincludeして生成したHTMLファイル↓

<img width="480" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878141/4f125a5a-4057-d76e-1813-6862fda7cd4d.png" />

```csvs:items.csv
改訂年月日,項番,改訂内容
2017.01.01,－,新規作成
2019.01.01,全体,"×××に対応 +
×××に対応"
,6.1,×××を追加
2022.01.01,2.1,"×××を変更 +
[.small]#※ 旧：○○○→新：△△△#"
,6,×××を変更
2023.01.01,3.6,×××を追加
,1.1,×××を変更
2024.01.01,"2.2 +
3.2 +
4",×××を変更
```

```markdown:table.adoc
++++
<style>
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&display=swap');

.reduced-border-tbl {
    font-family: "BIZ UDGothic", sans-serif;
}

.reduced-border-tbl td {
    border-bottom-width: 0 !important;
}

.reduced-border {
    border-top-width: 0 !important;
}
</style>

<script>
window.addEventListener('load', () => {
    document.querySelectorAll('.reduced-border-tbl td').forEach(cell =>
        !cell.textContent.trim() && cell.classList.add('reduced-border')
    );
});
</script>
++++

[%header%autowidth.reduced-border-tbl,format=csv]
|===
include::resources/csv/items.csv[]
|===
```

（CSSは外部ファイルに書く方がよりスッキリするかも）

# おわりに

文字列情報はCSVで、書式情報はAsciiDoc（CSS）で、それぞれ管理していけるといいんじゃないでしょうか。