CSS組版で作った技術同人誌8作の変遷

この記事は技術同人誌 Advent Calendar 2019 の11日目に公開されるはずだった16日目に公開された記事です。正直すまんかった。

これまでに8冊の技術同人誌を作ってきた間で、技術同人誌というジャンルがめちゃめちゃな勢いで普及し、本を書く手段もいろいろな選択肢が用意されるようになりました。その中でも、一貫してCSS 組版 + Vivliostyleというニッチな方法で作り続けた体験談は意外と参考になることもあるのでは、ということで、今までにどのような方法で執筆してきたかを振り返ります。

C90

Source: GitHub - pentapod/C90-builder

記念すべき1冊目。この段階で、原稿をPug + Markdown、レイアウトをStylusで書き、Gulpでビルド、だいたいできてきたらVivliostyle viewerでPDF出力するという流れを作っています。この頃は同じくCSS 組版で作られた「CSSシークレット」のサンプルコードが公開されており（2019年12月時点で非公開）、紙面レイアウトを作る上で大いに参考にした記憶があります。

技術書典2

Source: GitHub - pentapod/tbf02-builder

2回めの即売会となる技術書典2では、初の合同誌を制作。それぞれの原稿はMarkdownで書きますが、この回ではWeb上で原稿の入力とプレビューが同時にできる簡易的なプレビューアーを用意しました。ページ数などの目安が即座に分かるなど色々なメリットがあったので、できることなら今後もぜひ用意したいツールです。

spring-raining.hatenablog.com

また、この本では唯一本文だけでなく表紙もHTML・CSSで作りましたが、目的のレイアウトを実現するまでの時間対効果が恐ろしく悪かったため、以降では普通にIllustratorで作っています。

C92/技術書典3

Source: GitHub - pentapod/c92-previewer

Source: GitHub - pentapod/tbf03-previewer

この頃は原稿を書くのに必死過ぎて、特に環境の変更は試さずとにかく前回のものをそのまま使っていました。このタイミングで何故かCSSリセットをnormalize.cssからressに変えてます。なんでだろう多分何か理由があったはずですが思い出せない… あと自分が描いたわけではないですが、「やっていく合同誌」の表紙がお気に入りです。

技術書典4ごろからMarked.jsから拡張性の高いRemarkへの乗り換えを視野に入れ、Dewritefulと名付けたRemark用のオレオレMarkdown拡張ライブラリをちょくちょく作ったりしていました。放置状態なので時間ができたらなんとかしたいです。

C94/技術書典5

Source: GitHub - pentapod/c94-draft

Source: GitHub - pentapod/tbf05-draft

C94はC92で出した「CSSではじめる同人誌制作」の増訂版ということで、原稿執筆はほどほどに執筆環境の改善に力を入れていました。文章校正ライブラリのTextlintを導入し、誤字や日本語のミスを防いでいます。また、巻末に索引を入れるためのPugフィルターなどを用意しています（このあたり）。 PDFの出力周りでは、CLIツールのvivliostyle-cli（旧viola-savepdf）によりトライ&エラーが劇的にやりやすくなりました。

レイアウト上で良かった変更点は、画面表示やPDF出力用のCSSと入稿時に用いるCSSを分けた点です。やはりカラーディスプレイと黒のインクで印刷される紙面は見栄えが全然違うため、2つのメディアに合ったスタイルが必要でした。紙面ではWebデザインで避けられがちな #000000 を積極的に使い、図表の線は細くくっきりを心がけるようにします。

技術書典6

Source: GitHub - spring-raining/tbf06-draft: Vivliostyleで本を作ろう Vol.1

「Vivliostyleで本を作ろう Vol.1」で、ついにMarkdownトランスパイラをMarked.jsからRemarkに乗り換えました。これで、今まではHTMLタグ直書きで凌いでいた図表の相互参照などを、書きやすい記述ルールで実現できるようになりました。RemarkのプラグインにはDewritefulだけでなく、Paperistのプラグインなどを使っています。

技術書典7

Source: GitHub - spring-raining/tbf07-draft: Vivliostyleで本を作ろう Vol.2

この回では今まで引き継ぎ使っていたソースコードを一新し、akabekobeko/env-create-bookをベースとした構成に移行しました。これにより、今までだましだまし使い限界を迎えつつあったGulpのタスクランナーをnpm-scriptsに載せ替えることができました。また、このタイミングでStylusからSCSSを使うようにしています。Stylus確かにすごく良い仕様なんですけどね…