🔍 ?
深掘りラボ
📝 やってみた 更新: 2026年2月3日 12分

Re:VIEW + Vivliostyleで技術書を作ってみた【今はおすすめしない理由】

Re:VIEW + Vivliostyleで技術書を作ってみた【今はおすすめしない理由】

【読了時間：約12分 / 要約のみなら3分】

この記事で分かること（3行まとめ）

  • Re:VIEW + VivliostyleはCSS組版で自由度が高いが、学習コストも高い
  • LINEチャット風レイアウトを実装したら1235行のCSSになった
  • 大扉やページ番号の制御が難しく、今はおすすめしない

【この記事の位置づけ】 技術同人誌制作の全体像は「技術書典に初出展してみた」をご覧ください。この記事は、Re:VIEW + Vivliostyleという特定の技術スタックで「凝ったレイアウトに挑戦してハマった話」です。

【最終確認：2023年5月時点】 この記事は技術書典14（2023年5月）での体験に基づいています。Re:VIEW StarterやVivliostyleのバージョンは変わっている可能性があります。

正直な結論：今はおすすめしない

先に結論を言います。

Re:VIEW + Vivliostyle（CSS組版）は、今はおすすめしません。

理由：

  1. Re:VIEW Starterのバージョンが古い：印刷原稿や大扉の出力でハマる
  2. 大扉・ページ番号の制御が難しい：CSSでの調整に限界がある
  3. 学習コストが高い：Ruby + CSS + Vivliostyleの知識が必要

「CSSなら書ける」と思って選んだのですが、書籍レイアウトのCSSは想像以上に複雑でした。

それでも「Vivliostyleでやりたい」という人のために、私のハマりポイントを共有します。

【経緯】なぜVivliostyleを選んだのか

やりたかったこと

私が最初に書いた技術書は「LINE BOTではじめる！「居心地の良い」コミュニケーションの実践」というタイトルで、技術書典14（2023年5月）に出しました。

LINE Botの解説本なので、LINEのチャット画面風のレイアウトを再現したかったのです。

※技術書典への参加については「技術書典に初出展してみた」で詳しく書いています。

Re:VIEW Starterを選んだ理由

環境構築にはRe:VIEW Starterを使いました。

選んだ理由は、会話形式のやりとりのサンプルが載っていたからです。「吹き出し形式に少しアレンジすれば、LINEチャット風も作れそう！」と思いました。

また、Re:VIEW StarterはLaTeX出力だけでなく、Vivliostyle（CSS組版）出力にも対応していました。「CSSなら書ける」と思い、Vivliostyleを選択。

これが苦難の始まりでした。

【問題1】Re:VIEWのバージョンが古すぎた

Re:VIEW Starterで生成したテンプレートは、Re:VIEWのバージョンが古かったのです。

起きた問題

  • 印刷用原稿の出力がうまくいかない
  • 大扉（タイトルページ） のレイアウトが崩れる
  • ググって出てくる情報と挙動が違う

どっちに転んでもハマる

新しいバージョンのRe:VIEWの機能を使おうとすると動かない。

かといってバージョンを上げると設定ファイルの書き方が変わっていて互換性がない。

どっちに転んでもハマる状態でした。

【問題2】LINEチャット風レイアウトに時間を溶かした

ここからが本題の「ハマった話」です。

Rubyでブロック命令を定義する

Re:VIEWでカスタムの吹き出しブロックを作るには、Rubyでブロック命令を定義する必要があります。

# review-ext.rb - カスタムブロック命令の定義
ReVIEW::Compiler.defblock :imagetalkl, 1..2  # 左吹き出し（アイコン付き）
ReVIEW::Compiler.defblock :imagetalkr, 1..2  # 右吹き出し（アイコン付き）
ReVIEW::Compiler.defblock :talkl, 1          # 左吹き出し（アイコンなし）
ReVIEW::Compiler.defblock :talkr, 1          # 右吹き出し（アイコンなし）

Rubyを書いたことがなかったので、erukiti氏のGistを見様見真似でコピペ。動くまで何度もエラーと格闘しました。

CSSは1235行になった

そしてCSSは……1235行になりました。

/* 吹き出しのCSS（一部抜粋） */
.balloon_l,
.balloon_r {
    width: 100%;
    margin: 2px 0px 0px 0px;
    overflow: hidden;
    page-break-inside: avoid;  /* 改ページで崩れないように */
}

.balloon_l .says_l {
    float: left;
    margin: 5px 0px 5px 50px;
    background: #f0f0f0;
    border-radius: 12px;
    padding: 7px 10px;
    font-family: "IPAexGothic";
    font-size: 0.9rem;
}

.says_l:after {
    content: "";
    position: absolute;
    top: 7px;
    left: -22px;
    border: 12px solid transparent;
    border-right: 12px solid #f0f0f0;  /* 三角形を作る */
}

吹き出しの三角形を:after疑似要素で作り、アイコンの配置を調整し、改ページで崩れないようにpage-break-inside: avoidを設定し……。

テンプレートのCSSも膨大

ちなみに、Re:VIEW Starterのテンプレートには、画像サイズ調整用のクラスが101個も定義されていました。

.width-000per { width: 0%; }
.width-001per { width: 1%; }
.width-002per { width: 2%; }
/* ... 中略 ... */
.width-099per { width: 99%; }
.width-100per { width: 100%; }

これ自体はテンプレートに元から入っていたものですが、こういうコードの上に自分のカスタマイズを重ねていくので、最終的に1235行のCSSになったわけです。

Git履歴が語る試行錯誤

当時のGit履歴を見ると、44コミット中、吹き出し関連だけで5回以上の修正がありました。

521f953 LINE風吹き出し追加
7a31c1c LINE風アイコンの画像追加
83f765e アイコン表示がない版のtalklとtalkrを追加
c6cf03e LINE風アイコンをカラーに変更（グレースケールはやめる）
01ef69b 吹き出しアイコンのサイズ微調整

「アイコン付き版」「アイコンなし版」を両方作り、グレースケールで作ったのに「やっぱりカラーがいい」と作り直し、サイズを微調整して……。

文章を書くより、見た目を調整している時間のほうが長かったのは間違いありません。

【問題3】大扉・ページ番号の制御が難しい

Vivliostyle（CSS組版）で特に困ったのが、大扉やページ番号の制御です。

大扉のレイアウト

大扉（タイトルページ）は、通常の本文とは違うレイアウトにしたいことが多いです。

  • タイトルを中央に大きく配置
  • 著者名を下部に配置
  • ページ番号を振らない

CSSでこれを実現しようとすると、:firstや@pageの指定が必要ですが、Vivliostyleでの挙動が微妙で、なかなか思い通りになりませんでした。

ページ番号の制御

「前付（目次など）はローマ数字、本文はアラビア数字」というページ番号の振り分けも、CSSだけでは難しかったです。

結局、完璧には実現できず、妥協したレイアウトで入稿しました。

【深掘り】Re:VIEW + Vivliostyleのファイル構成

【時間がない方へ】 要点だけ知りたい方は「まとめ」へどうぞ。

Re:VIEW + Vivliostyleのファイル構成を理解しておくと、トラブル対応がしやすくなります。

基本的なディレクトリ構成

book/
├── catalog.yml      # 章構成の定義
├── config.yml       # 書籍の設定（タイトル、著者など）
├── review-ext.rb    # カスタムブロック命令（★Vivliostyle用）
├── style.css        # CSSファイル（★Vivliostyle用）
├── Predef.re        # はじめに
├── chapter1.re      # 第1章
├── chapter2.re      # 第2章
├── Postscript.re    # あとがき
└── images/          # 画像ファイル

LaTeX出力との違いは、review-ext.rbとstyle.cssが核心部分になることです。

catalog.yml：目次の順番を決める

PREDEF:
  - Predef.re        # 前付（はじめに）

CHAPS:
  - chapter1.re      # 本文
  - chapter2.re
  - chapter3.re

POSTDEF:
  - Postscript.re    # 後付（あとがき）

ハマりやすいポイント

  • 章をまたいだ画像参照ができない：@<img>{image_name}で参照できるが、別の章の画像は参照不可
  • コラム内の脚注は警告が出る：ビルドは成功するが「推奨されない使い方」と出る
  • review-ext.rbのデバッグが難しい：Rubyのエラーメッセージが分かりにくく、特定に時間がかかる
  • CSSの@pageルールが複雑：ページ番号、ヘッダー、フッターの制御に@pageルールを使うが、Vivliostyleでの挙動理解に時間がかかった

よくある質問

Q. Re:VIEW + Vivliostyleは初心者におすすめ？

A. おすすめしません。 Ruby、CSS、Vivliostyleの3つを理解する必要があり、学習コストが高いです。初めての技術書なら、Re:VIEW + LaTeXか、Markdown + Pandocがおすすめです。

Q. Re:VIEW StarterでVivliostyle出力できる？

A. できますが、バージョンが古いです。 Re:VIEW Starterは現在Re:VIEW 2.5のみ対応で、最新のRe:VIEW 3.0/4.0には非対応です。最新機能を使いたい場合は、手動でのセットアップが必要です。

Q. CSS組版のメリットは？

A. CSSの知識があればレイアウトを自由にカスタマイズできることです。 ただし、書籍特有のレイアウト（大扉、ページ番号、柱）の制御はCSSだけでは難しく、想像以上に複雑です。

Q. 技術同人誌を作るなら何がおすすめ？

A. 最初の1冊は「Re:VIEW + LaTeX」か「Markdown + Pandoc」がおすすめです。 情報が多く、安定しています。凝ったレイアウトは2冊目以降で挑戦しましょう。

まとめ：Vivliostyleは上級者向け

Re:VIEW + Vivliostyleで技術書を作ってみて、強く思ったことがあります。

「凝ったレイアウトは、2冊目以降で十分」

おすすめしない理由

  1. Re:VIEW Starterのバージョンが古い：最新のRe:VIEWの情報が使えない
  2. 大扉・ページ番号の制御が難しい：CSSだけでは限界がある
  3. 学習コストが高い：Ruby + CSS + Vivliostyleの3つを理解する必要がある

代替案

今なら、以下の方法をおすすめします。

  • Re:VIEW + LaTeX：情報が多く、安定している
  • Markdown + Pandoc：シンプルで学習コストが低い
  • Re:VIEW + Affinity Publisher：本文はRe:VIEW、レイアウトはAffinity Publisherで調整（ハイブリッド）

最大の学び

文章書けるほうが大事。

読者が求めているのは「カッコいいレイアウト」ではなく「わかりやすい説明」です。

レイアウトに時間を溶かすより、文章を書く時間を確保しましょう。

参考情報

私がよく見たサイト

環境構築・ツール

関連書籍

著者の技術同人誌

この記事で触れた「LINE BOTではじめる！〜」の後継本として、LINE BOT × Gemini AIの本を頒布しています。

📚 『推しキャラを召喚！LINE BOTで実現する日常』

関連記事

タグ: #Re:VIEW #Vivliostyle #CSS組版 #技術書 #同人誌 #失敗談
共有:

📚関連記事

📝tried

技術書典に初出展してみた