こんにちはあおいです！うららかな春の日にこんにちは。
私はこれまで同人誌といえば漫画本しか作ったことがなかったのですが、技術同人誌といえば文章の本、みんながつくっているものを私も作りたい、ということでエッセイに挑戦してみた次第です（一応エンジニアな私のキャリアの本ということで技術本に含まれると思っております・・・）。
ここではどうやって本を作ったのかみなさんにご紹介します！！
まずは完成品の宣伝です
電子版
物理版
先に言っておきますが、電子版と物理版は書式スタイルがだいぶ違います。物理版は印刷ページ数の制約があったため、色々といじりました。
CSS組版とは？
まず組版について。
組版（くみはん、英: typesetting）とは、原稿およびレイアウト（デザイン）の指定に従って、文字・図版・写真などを配置する作業の総称。印刷の一工程としては、文字や図版などの要素を配置し、紙面を構成すること。 by wikipedia
もともと活版印刷ではその名の通り版を物理的に組むというところから来ているようです。
古のオタクたちよ！！！！CSSで！！！！組版できるのじゃぞ！！！！！！
Vivliostyleを使う
CSS組版、いきなり自分でゼロからやるのは結構大変なことです。
そこでVivliostyle！
まず本を買います。
Web技術で「本」が作れるCSS組版Vivliostyle入門 https://www.amazon.co.jp/dp/4863544189
もうね、ここに書かれていることそのままやればよい！以上！
と言いたくなるくらいわかりやすく簡潔に書かれている本です。
公式ページもあります。
なんでCSS組版？
今回のエッセイは縦書きで書くと決めていました。Wordを使える環境であればWordをそのまま使えたと思うのですが、私が普段使っているGoogle docsは縦書きに対応していませんでした。
そこで何かしらのソフトウェアを使う必要が出てきました。
ちょうど家に上に貼った書籍が置いてありCSSもそこそこ馴染みがあったので、まずは本を一通り読んでみました。
縦書きに対応していそうなことと、かなりかわいく書籍をデザインできそうだなと感じられたので
VivliostyleでCSS組版の本を作ろうと決めました。
Vivliostyleが使いやすいところ
- Webブラウザで簡単にプレビューを行うことができるところ
vivliostyle preview というコマンドでプレビューを行うことができます。
修正し、プレビューし、というサイクルを高速に回すことができてデザインを直しやすくてよかったです。
- テンプレが豊富に用意されているので、テンプレ通りの紙面にするのは簡単
CSSを何もないところから書いていくのは大変な作業です。
Vivliostyle公式のGitHubリポジトリにたくさんテーマがのっています。
このテーマを読み込むだけで綺麗な紙面を作ることができます。
- Markdownで紙面を書くことができる
Markdown使う人からするとめちゃくちゃ便利です！！
Google Docsがmarkdownに対応したおかげで書いた文章をvivliostyleで組版するっていうのがサクッとできて超最高〜〜〜〜
— あおい（Aoi） (@_a0i) 2024年10月13日
ハマったところ
色々と簡単ではある一方、カスタマイズするのに結構ハマりました。
これはCSS組版というよりCSS自体のハマりポイントかなと思います。
どの要素がどこに効くかわからなくなり、Webページで開いてデベロッパーツールを開いてデバッグしたり...
CSS組版むずい〜数字が横向きになってしまっている...ページ番号を消したいページで消えないのに全然違うページのページ番号が消えたりしている pic.twitter.com/4M9lwt39Mj
— あおい（Aoi） (@_a0i) 2024年11月9日
↑Xでは突然シュッとやってきてVivliostyleの困りごとを解決してくれる方がいて助かりました。
今回「さくらももこエッセイ本のような本をつくる」というこだわりを長短時間で解決しようとしたため困りましたが、
テンプレ通りにやるとか、もう少し真面目に時間かけてやるとかであればもっと思い通りにいったのだろうなと思います。
最後に
総じてVivliostyleでCSS組版は楽だった！！！CSS知ってる人からするととっつきやすいし！！おすすめ！！
再度宣伝失礼します！！
電子版
物理版
こちらの本、「第9回刺され！技術書アワード」の大賞を受賞しました！！！Vivliostyleありがとう！！！
