Vivliostyleで旅行エッセイを
共同編集／オンデマンド印刷

本日お伝えしたいこと

• フォトアルバムをCSS組版で本にしました
• そのリポジトリを公開しています
• 注目してほしいのはスタイルシート
• そこには2020年秋以来の開発履歴が詰まっています
• 同時に、OSによってページがずれる課題も明らかに

元は海外旅行のフォトアルバム

CSS組版したPDFを印刷

仕様

• 書名：海外旅行記 上巻（全3巻）
• 判型：A5判
• 製本：並製
• 頁数：284
• 印刷：欧文印刷㈱（オンデマンド印刷）
  • 参照→Vivliostyle Pubで作成したPDFファイルを印刷するサービスが開始（なお、PDF出力はVivliostyle CLI）
• 内容：村上代表のご両親のフォトアルバムをデジタル化したもの

作業分担とそれぞれの居住地

• CSS作成：村上代表（さいたま市）
• 編集制作：小形（横須賀市）
• 校正：@まや（村上姉、山形市）
• 著者：（仙台市）
  • →クラウド（GitHub／Slack／Dropboxなど）による共同編集が必須

制作の経緯

• 2020-10-30：最初のcommit
• 2021-04-10 ：イベントにて小形が「Create Bookを使った旅行エッセイ本の制作」として途中経過を報告
• 2022-04-13：欧文印刷からの申し出によりテスト印刷
• 2022-10-：@まやが参加し作業が加速
• 2023-02-24：校了、欧文印刷入稿
• 2023-03-16：完成
• 2023-05-23：リポジトリをkaigainotabi1として公開

制作フロー（表紙以外）

1. カラー写真をスキャン
2. Wordファイルからテキスト変換
3. スタイルシートを設計
4. テキストデータをMarkdownに変換
5. プレビューを見ながら写真を配置
6. PDFを出力し著者へ（校正出し）
7. データに著者校を反映（4校まで繰り返す）
8. PDFを出力し印刷所へ入稿

theme.cssの変遷①

• 2020年秋以降のVivliostyle開発履歴そのもの
  • 2020-10-31版（82行）と2023-5-25版（460行）のDiff画面→
  • GitHub DesktopのHistory画面→
• 2020-10-31
  • CSS Paged Media Module Level 3によるページ分割
  • CSS Generated Content for Paged Mediaによる柱
  • CSS Page Floatsによる画像配置

theme.cssの変遷②

• 2020-11-05
  • 画像がページに1つ入るクラスの新設
  • 画像がページに2つ入るクラスの新設
• 2020-11-13 -太ゴシックのクラスを新設
• 2020-12-09
  • Sassに対応
• 2020-12-24
  • 節と項にもIDを付加するように

theme.cssの変遷③

theme.cssの変遷④

theme.cssの変遷⑤

theme.cssの変遷⑥

浮上した課題

• 組版エンジン（Vivliostyle.js）とフォントは同じなのに、OSが異なると組版結果が違ってしまう
  • Same fonts, but different output by OS #1098 (Vivliostyle.js)

issue #1098の影響

• Vivliostyleのプロダクトは層状に構成されている
  • →Vivliostyle.jsのバグは、全プロダクトに影響