はじめに

技術書典に自分で本を出してみたいと考えました。実際に執筆して、本にするまでにどうすればいいかを調べてみました。

この記事は、調べてこれならできそうだというのをまとめたものです。

ツールとしてはVivliostyleを使用するのがよさそうです。

Vivliostyle とは何か

Vivliostyle は「Web 標準をベースにした CSS 組版エンジン」を掲げる OSS プロジェクトです。ブラウザ同等のレンダリングを行いながら、CSS Paged Media 仕様に従ってページ区切り・マスターページ・欄外注などを制御できます。CLI 版は 2025 年 3 月に v8.19.0が公開済みで、内部で動く Vivliostyle.jsもv2.31.1 へ更新されました。

Web 技術者ならおなじみの flexbox / grid / variable fonts をそのまま紙面に持ち込めるのが最大の特徴です。

メリット:6点

  1. CSS だけで段組やノンブル（柱・ノンブル）を指定できる
    – @page や running() でヘッダー・フッターを再利用、column-count で段組を簡単に切替。
  2. 既存のフロントエンド資産を転用可能
    – コンポーネント指向の CSS 設計や PostCSS/Sass などをそのまま適用できる。
  3. マルチプラットフォーム & 無償
    – Electron も不要、Node.js が動けば macOS/Windows/Linux いずれでも同一結果を得られる。
  4. CI/CD と相性抜群
    – vivliostyle build を GitHub Actions や GitLab CI に仕込めば push → 自動 PDF 生成 → Release Assets という流れがYAMLで実現できる。
  5. 反復ビルドが高速
    – 同一ツリーをキャッシュすれば数十ページのリフローは数秒〜十数秒程度。
  6. MIT ライセンスで商用利用も安心

デメリット：5点

  1. CSS Paged Media の学習コスト
    – @page :left / :right、bleed や crop など、Web では触らないプロパティが多く「InDesign に慣れた DTP 担当者」と逆転現象が起こることも。
  2. 高精度タイポグラフィは依然課題
    – JIS 組版例外処理や約物半角アキ調整、禁則の詳細制御は LuaTeX／InDesign ほど自在ではなく、微調整 CSS が膨らみがち。
  3. 大規模本（300 ページ超）のビルド時間とメモリ
    – DOM 全展開のアプローチゆえ、数百ページ＋高解像度図版では数 GB の RAM を要求するケースがある。
  4. 印刷所要件とのギャップ
    – リッチ PDF/X-1a 指定、フォント完全埋込、透明効果フラット化などは別途 Ghostscript 等でパイプを組む必要がある。
  5. CLI の Breaking Changes
    – 2025 年 4 月の 9.0.0-next 系からは Node.js v18 以上必須 になり、旧 CI が落ちた事例も。パイプライン固定バージョン管理が欠かせない。

参考（GitHubActions）

ポイントは以下の部分。何もしないと日本語が豆腐で表示されました。これを回避するために、日本語フォントを入れています。

    - name: Install Japanese fonts
      run: |
        sudo apt-get update
        sudo apt-get install -y fonts-noto-cjk fonts-ipafont-gothic fonts-ipafont-mincho
yaml

以下のGitHubActionsで動作確認済み。

name: Build Technical Book with Vivliostyle

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  # 手動実行を可能にする
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout repository
      uses: actions/checkout@v4
      
    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '22'
        
    - name: Install Japanese fonts
      run: |
        sudo apt-get update
        sudo apt-get install -y fonts-noto-cjk fonts-ipafont-gothic fonts-ipafont-mincho
                
    - name: Install dependencies
      run: |
        npm install -g @vivliostyle/cli
        # プロジェクト固有の依存関係がある場合
        if [ -f package.json ]; then
          npm install
        fi
                
    - name: Install additional tools (optional)
      run: |
        # 必要に応じてマークダウン処理ツールなどをインストール
        npm install -g marked
                
    - name: Build PDF with Vivliostyle
      run: |
        # 基本的なビルドコマンド
        vivliostyle build
        
        # または、より詳細な設定でビルド
        # vivliostyle build --input manuscript/ --output book.pdf --theme @vivliostyle/themes/bunko
                
    - name: Upload PDF artifact
      uses: actions/upload-artifact@v4
      with:
        name: technical-book-pdf
        path: '*.pdf'
        retention-days: 30
        
    - name: Upload HTML artifact (optional)
      uses: actions/upload-artifact@v4
      with:
        name: technical-book-html
        path: |
          *.html
          css/
          images/          
        retention-days: 30
        
    # リリース時にPDFを自動アップロード（オプション）
    - name: Create Release
      if: startsWith(github.ref, 'refs/tags/')
      uses: softprops/action-gh-release@v1
      with:
        files: '*.pdf'
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
yaml