はじめに
Excelだと差分管理がしにくい。
CSVだと書式の設定ができない。
それなら、AsciiDocで実装して、HTMLファイルを生成しよう。
現状把握
こんなExcelがあったとします。
- セルの中で改行している。
- セルの中で異なるフォントサイズが混在している。
- 一部罫線を引かないセルがある。
やったこと
1. *.xlsxを*.csvにする
ExcelをCSV形式で保存します。
保存したCSVファイルがこちら。
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についてはこちらを参照↓
table.adoc
[%header,format=csv]
|===
include::resources/csv/items.csv[]
|===
このAsciiDocからHTMLファイルを生成すると、こう。
- セルの中で改行していない。
- フォントサイズがすべて同じ。
- すべてのセルに罫線が引かれている。
この辺を直していきます。
なお、スタイルシートはAsciiDocのデフォルトのものを流用しています。
3. 書式を設定する
改行する
改行についてはこちらを参照↓
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ファイルを生成すると、こう。
フォントサイズを変える
フォントサイズの変え方（クラスの設定の仕方）についてはこちらを参照↓
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ファイルを生成すると、こう。
不要な箇所の罫線を消す
ここは……力技で……。
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ファイルを生成すると、こう。
気になったので……
セルの幅
セルの幅を文字列の長さに合わる方法はこちらを参照↓
table.adoc
（略）
- [%header.reduced-border-tbl,format=csv]
+ [%header%autowidth.reduced-border-tbl,format=csv]
|===
include::resources/csv/items.csv[]
|===
このAsciiDocからHTMLファイルを生成すると、こう。
フォント
Webフォントの設定の仕方についてはこちらを参照↓
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ファイルを生成すると、こう。
できあがったもの
こちらがExcel↓
こちらがCSVファイルをAsciiDocでincludeして生成したHTMLファイル↓
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",×××を変更
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）で、それぞれ管理していけるといいんじゃないでしょうか。