Create Book で Vivliostyle を始める

はじめに

七尾百合子さん、お誕生日 251日目 おめでとうございます！ nikkieです。

これまで他の方に作ってもらった Vivliostyle のリポジトリに原稿を追加¹しかしてこなかった私ですが、そのようなリポジトリはどう作るのだろうと手を動かしました

目次

• はじめに
• 目次
• Vivliostyle のチュートリアル
• 環境の用意
• Create Book
• 手になじんだ Sphinx と比べると
• 終わりに

Vivliostyle のチュートリアル

Vivliostyle を使った CSS 組版のチュートリアルです。

チュートリアルは7章構成です。
②まで進めると、Markdown を書いて PDF をビルドできました。
③以降はまさしく CSS 組版で、SCSS を書いています。

環境の用意

チュートリアル①インストール | Vivliostyle

• Node.js
• テキストエディタ
• ターミナル

このチュートリアルはソフトウェアエンジニアでない方向けに丁寧に書いてある印象です。
Node.js がインストール済み²なことを確認しました

% node --version
v25.2.1
% npm --version
11.6.2

Create Book

これだけでした

% npm create book mybook

対話的に設定していきます。

• description
• author name
• author email
• license
• choose theme

  • @vivliostyle/theme-techbook……技術同人誌をふくむ横書き冊子

mybook/ディレクトリができています！

mybook/
├── .git/
├── .gitignore
├── LICENSE
├── README.md
├── manuscript.md
├── node_modules/
├── package-lock.json
├── package.json
└── vivliostyle.config.js

npm create bookってなんだろうと思ったら、npx create-bookみたいです。
https://www.npmjs.com/package/create-book
Vivliostyle：とにかくCreate Bookのサンプルをビルドしてみる（中編その1）

まずnpm createはnpm initのエイリアスです。npm init のドキュメントによると、npm create book（すなわちnpm init book）はnpx create-bookと解釈されます。

生成されたmanuscript.mdはサンプル原稿です。
このまま PDF をビルドできます！

% npm run build

mybook.pdfができました。
Markdown を HTML に変換し³、CSS で組版して PDF を作成しているそうです（playwright が見えたので、ブラウザ使ってそう）

今回生成したファイル一式はこちら：

手になじんだ Sphinx と比べると

慣れ親しんでいる Sphinx と比べて、簡単に PDF ができていると感じます。
CSS 組版すげ〜

npm create bookに相当するのはsphinx-quickstartでしょうか。

npm create bookならぬuvx sphinx-quickstartはこちら
uvx（やpipx）により、Python製CLIツールも開発者による仮想環境管理が不要になってるじゃん！ Sphinxを例に - nikkie-ftnextの日記

Sphinx で PDF を作るには、LaTeX の環境が必要です。
私は Docker イメージを使っています

終わりに

Vivliostyle は Create Book で簡単に PDF を作る環境を用意できます！

• Node.js を用意（Homebrew など）
• npm create book
• npm run build

CSS を自在に書けるなら組版の自由度が高いのだと思います（私は超苦手⁴）。
Markdown 原稿をスライドにするテーマもあるようで、少し気になりました（回収されるか分からない積ん読）