11日目に公開されるはずだった16日目に公開された記事です。これまでに8冊の技術同人誌を作ってきた間で、技術同人誌というジャンルがめちゃめちゃな勢いで普及し、本を書く手段もいろいろな選択肢が用意されるようになりました。Vivliostyleというニッチな方法で作り続けた体験談は意外と参考になることもあるのでは、ということで、今までにどのような方法で執筆してきたかを振り返ります。pentapod/C90-builder記念すべき1冊目。viewerでPDF出力するという流れを作っています。この頃は同じくCSS組版で作られた「CSSシークレット」のサンプルコードが公開されており(2019年12月時点で非公開)、紙面レイアウトを作る上で大いに参考にした記憶があります。pentapod/tbf02-builder2回めの即売会となる技術書典2では、初の合同誌を制作。それぞれの原稿はMarkdownで書きますが、この回ではWeb上で原稿の入力とプレビューが同時にできる簡易的なプレビューアーを用意しました。ページ数などの目安が即座に分かるなど色々なメリットがあったので、できることなら今後もぜひ用意したいツールです。spring-raining.hatenablog.comまた、この本では唯一本文だけでなく表紙もHTML・CSSで作りましたが、目的のレイアウトを実現するまでの時間対効果が恐ろしく悪かったため、以降では普通にIllustratorで作っています。pentapod/tbf03-previewerこの頃は原稿を書くのに必死過ぎて、特に環境の変更は試さずとにかく前回のものをそのまま使っていました。このタイミングで何故かCSSリセットをnormalize.cssからressに変えてます。あと自分が描いたわけではないですが、「やっていく合同誌」の表紙がお気に入りです。技術書典4ごろからMarked.jsから拡張性の高いRemarkへの乗り換えを視野に入れ、Dewritefulと名付けたRemark用のオレオレMarkdown拡張ライブラリをちょくちょく作ったりしていました。放置状態なので時間ができたらなんとかしたいです。pentapod/tbf05-draftC94はC92で出した「CSSではじめる同人誌制作」の増訂版ということで、原稿執筆はほどほどに執筆環境の改善に力を入れていました。文章校正ライブラリのTextlintを導入し、誤字や日本語のミスを防いでいます。巻末に索引を入れるためのPugフィルターなどを用意しています(このあたり)。PDFの出力周りでは、CLIツールのvivliostyle-cli(旧viola-savepdf)によりトライ&エラーが劇的にやりやすくなりました。レイアウト上で良かった変更点は、画面表示やPDF出力用のCSSと入稿時に用いるCSSを分けた点です。カラーディスプレイと黒のインクで印刷される紙面は見栄えが全然違うため、2つのメディアに合ったスタイルが必要でした。積極的に使い、図表の線は細くくっきりを心がけるようにします。Vol.1」で、ついにMarkdownトランスパイラをMarked.jsからRemarkに乗り換えました。これで、今まではHTMLタグ直書きで凌いでいた図表の相互参照などを、書きやすい記述ルールで実現できるようになりました。RemarkのプラグインにはDewritefulだけでなく、Paperistのプラグインなどを使っています。Vol.2この回では今まで引き継ぎ使っていたソースコードを一新し、akabekobeko/env-create-bookをベースとした構成に移行しました。これにより、今までだましだまし使い限界を迎えつつあったGulpのタスクランナーをnpm-scriptsに載せ替えることができました。このタイミングでStylusからSCSSを使うようにしています。いうスタイルは、完成後のメンテナンスを考える必要のあるWeb開発の考えとは異なり、普段使わないライブラリを執筆時に試せる良い機会です。約束通り無料公開に切り替えています。月別アーカイブはてなブログをはじめよう!spring_rainingさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。