先週末、こちらのオンラインイベントに参加してきました。
当日の配信はこちらです（勝手に貼り付けても良かったのか？）。connpassのイベントページから資料を見に行くと、各セッションごとに切り分けられた動画もあります。
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋
- 聴講の動機
- 全体を通しての感想
- 各セッションについて
- Vivliostyle CLIで広がるCSS組版のエコシステム
- スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト
- Vivliostyle Pub の現状と課題
- Vivliostyleで厚めの薄い本をCSSで組んだ話
- Rapid publishing for public health books against COVID-19
- 商業出版『そろそろ常識？マンガでわかる「正規表現」』の制作
- Paged.js について 〜Yet another CSS paged media polyfill〜
- より良いタイポグラフィのための知られざるCSS
- 今後の課題？
- まとめ
聴講の動機
そもそもVivliostyle、存在は知っていましたが利用経験がありません*1でした。
ただ印刷会社の制作部に身を置く者として、VivliostyleなりRe:VIEWなり、技術書界隈で利用されているPDF生成技術のひとつとして非常に興味を持っていて、これはいい機会だと思って情報収集の一貫と思って参加しました。
全体を通しての感想
セッションはconnpassにある通りの流れになっています。僕は家の都合で17:00までしか参加できなくて、全体が少し押してしまってQ&A以降が聴講できなかったのがちょっと残念でした。
各セッションの構成が非常によく考えられていたなと感じました。
まず第一部でVivliostyleの未来・展望を見せてもらい、ワクワクした気持ちと同時にこれからの課題について認識。
第二部で現状のVivliostyleにできること（利用例）を見ながら、実際にユーザーはどこで躓くのか、第一部で見た未来と課題を再認識しながら改めて課題と向き合う。
第三部ではドイツでの実例とより実際的なCSSの扱いという第二部をもう一歩掘り下げた内容でした。
若干長丁場でしたが、各セッションがしっかりまとまっていて「ダラダラ聞いてる」みたいな感覚はなかったです。
Q&A手前まででしたが、いいイベントに参加できたな〜という感じで終えることができました。
登壇者の方もTwitterで振り返っていらっしゃいましたが、やっぱりITエンジニア向けの色合いが濃かったですね。僕は印刷会社でDTPに従事していて毎日InDesignで仕事をしており、数年前までnpmなんて知らないしCLI（ターミナル）だってほとんどいじったことがなかったです*2。
今回のイベントはそういう「ITエンジニアリング」みたいなものから遠い層に対してはけっこう難しい（内容というより用語そのものレベル）印象を受けました。個人的な理解度でいえば十分わかりやすく楽しかったし、そういう層に対してセッションごとにしっかり配慮されていたようにも感じました。ただこればっかりは仕方がない*3ことだと僕は思います。
今回のイベントを通して個人的な感想を述べるとすれば非常にエキサイティングで刺激的でした。また、Vivliostyleというものが、きちっと組織立ってプロジェクトを動かしているという印象も受けました。その点も非常に勉強になりました。
各セッションについて
事実誤認などがあればご指摘いただきたいですが、基本的にここからは自分用のなぐり書きなメモみたいなものです。読みづらくてすみません。
一応スライドを探してきましたが、デモがあるものもあったので、YouTubeから見ていただいたほうがいいかも。
Vivliostyle CLIで広がるCSS組版のエコシステム
緑豆はるさめ（@spring-raining）さんのセッション。
speakerdeck.com
実際にデモを挟みながら、Vivliostyle CLIについて特に新しいバージョンである 3.0.0-pre3.0 でどんなことができるのかを体験しました。
- CLI（コマンドライン）でVivliostyleを操作できる＝自動化
- Node.jsがある環境でインストール可能
- 対話型CLI（これがめっちゃいい感じだった）によるテンプレートの生成（後のThemesとかかわる）
- CLI 3を使えばMarkdownファイル（VFM）を書く＝執筆するだけで一冊のPDFが完成する
- 課題としてPDFレンダリング環境の統一、PDF/X規格対応などを想定
Vivliostyleはあくまでツールであって、欲しいのは印刷できるPDF（印刷すらしないかもしれないけど）なんですよね。CLIの操作でほぼ自動でPDFをビルドできる環境は非常に魅力的に見えました。
一方で、緑豆はるさめさんも最後に課題として挙げていた「PDF生成環境を固定して安心して出力できるようにする」というのがすごく大事なポイントだと僕も思いました。お手伝いしている合同誌でも、著者AさんがビルドしたPDFと著者BさんがビルドしたPDFとで総ページ数が違ってしまった、ということが実際にありました…。この問題は実はけっこうクリティカルなので最後にまとめて書きます。
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト
やましー（@yamasy1549）さんのセッション。
www.slideshare.net
- 緑豆はるさめさんのセッションでも使われたThemesの実際
- 文庫、スライド、技術書、レポートの4種類の公式テーマがある
- このスライドもVivliostyle（マジかよと思った）
- 文庫テーマでは縦書きで、ルビも縦中横も対応している
- ほかにもテーマごとに特徴がある（技術書はSCSS？で書けるらしい。つよそう）
- 最後の時間につぶやきを拾ってもらったけど、テーマとテーマの間に別のテーマを挟みたいよね
こちらも非常にワクワクするセッションでした。テーマを決めるとある程度の体裁が整ったものが構成できて、必要に応じてCSSを書けば独自にカスタマイズできるというもの。期待したい〜。
Vivliostyle Pub の現状と課題
なかひこくん（@takanakahiko）さんのセッション。
- Vivliostyleをブラウザで編集できる
- GitHubのリポジトリが必要
- テーマの選択、PDFの出力（ダウンロード）がブラウザからできる
- 現在はGitHubに代わるようなストレージの用意がない（が用意したい）
- PDF出力エンジンが固定されている？（というようなツイートを読んだ気がするが見つからない）
これこそノンプログラマー向けの至高のプロダクトだなーと思いました。まだ課題はあるようでリリースは少し先のようですが、こちらも非常に期待しています。
Vivliostyleで厚めの薄い本をCSSで組んだ話
みこう悠長（@y_mikou）さんのセッション。 sway.office.com
- やっぱりノンプログラマーには難しいよ
- エンジニアリングがプロダクトを縛ってはいけないは至言
- ぶら下げを全部手作業で解決した
- Chromeのアップデートを境にビルドしたPDFの表示が総崩れした
さまざまな苦労を経て、分厚い薄い本が出来上がった過程を聞きました。
Rapid publishing for public health books against COVID-19
ドイツ国立科学技術図書館がVivliostyleを利用して7つの書籍を公開しました。これを受けて、プロジェクトをリードしたSimon Worthington氏とCSS組版を担当したRaquel Eulate氏のコメントが動画で紹介されました（日本語字幕付き）。 github.com
動画のあとマシントラブルがあって僕はこのあとの動画の解説を聞けませんでした（アーカイブで今後拝聴する予定）。
Fidus Writerという学術出版用のオンライン・エディターを使って執筆陣は原稿を書いたようです。先のみこう悠長さんのセッションで挙がっていた執筆者のエディタ（入稿データ）問題を、このような統一された執筆環境を用意するということで解決できるのかなと思いました。
商業出版『そろそろ常識？マンガでわかる「正規表現」』の制作
あり（@arinoth）さんのセッション。
www.slideshare.netやべーやつでした。「CSSガチ勢だ」というコメントもあったくらい。CSSが使えるとこの書籍のマンガページまで含めてVivliostyleで組めるよ！ というつよつよな実例でした。
なんとこの書籍のマンガ部分（セッションでは動画で実演されました）はGitHubで公開されています。
確かにこれをInDesignでやるとめちゃくちゃ大変。でもCSSならここまでほぼ自動でできる…というのはすごいワクワクしました。
- 本当は2色で作りたかったがVivliostyleでは難しい（今回は黒1色）
- VivliostyleではRGBベースになるので、いわゆる2色印刷のためのPDF生成は非常に難しい気がする
- PDFの出力インテントをJapan Color 2001 Coatedや2011 Coatedとして書き出せるのだろうか？
- 柱やノンブルなど扉では非表示にしたかったが、対応しきれずデザインで目隠しする形で乗り切った
- 印刷会社に相談したところ（透明の画像があるから*4）PDF/X4で入稿して欲しいと言われた
Paged.js について 〜Yet another CSS paged media polyfill〜
アカベコ（@akabekobeko）さんのセッション。
speakerdeck.com
- Paged.jsはCSS Paged Mediaに基づく組版エンジン
- 先のドイツ国立科学技術図書館の件でもたくさん出てきたのですが、CSS Paged Media Module Level 3というウェブコンテンツでページ概念（ノンブルとかヘッダー・フッターとか）を利用するためのCSSの標準規格らしい
- Vivliostyle CLIで比較検証したがVivliostyleが善戦
- お互いに良いところ取り入れながら共存共栄していきたい
このような競合との比較検証、非常に良い試みだと思いました。
より良いタイポグラフィのための知られざるCSS
鈴木丈（@terkel）さんのセッション。
speakerdeck.com
なんとフォントワークスの方でした（お世話になっております！）。
ブラウザ別の対応状況やフォールバックの対処など非常に実務的なCSSのセッションでした。PDF生成がどうしてもブラウザのPDF出力エンジンに左右される現状、一部のブラウザが対応している組版処理がそのままVivliostyleに対応されているわけではない、ということは知っておかないとですね。
今後の課題？
今後の課題とかいうとちょっと大げさかもですが。
実際の商業印刷*7に携わる身からすると、PDF出力結果が環境によって異なるというのは非常に厳しいです。
聴講した限りで感じた、いわゆる商業印刷の文化とVivliostyleとで相性が悪いと思ったのは下記です。
- ビルド環境によってPDF出力結果が変わりかねない
- 特定のページだけPDFを出力できない（重版への対応が難しい）
- フォントのエンベッドが必須
- 印刷はCMYK（プロセスカラー）、一方でVivliostyleはRGBベースのPDFになる
ビルド環境によってPDF出力結果が変わりかねない
次の課題とも関係するのですが、現在の印刷のPDFワークフローと同じ土俵に立つなら、この問題は避けては通れないと思います。ブラウザのバージョンなど、マシン環境によって出力されるPDFが一意にならないのは非常に困ります。
特定のページだけPDFを出力できない（重版への対応が難しい）
書籍にはこれまでのデータを用いて一部だけ修正する重版というものがあります。修正するページ以外のデータは、それ以前のものと全く同一でなくてはいけません。
例えばある書籍の34ページに修正が入ったとき、「34ページだけ修正して、34ページだけPDFを出力し、34ページが面付けされている台*8の34ページだけを新しいPDFに差し替える」という作業を行います。
Vivliostyleがこうした旧来のやり方に合わせる必要はないかもしれませんが、ありさんのセッションであったようにビルドしたPDFをInDesignに貼ってそれを最終データとする、という方法が実は現実的な対応なのかなとすら思いました。
フォントのエンベッドが必須
PDFビルド環境がマシンに依存するのと同じで、フォント環境もマシンによって様々です。PDFにフォントをエンベッドできないと、開く環境によってPDFの見え方が変わることになります。ビルドした当人の見ているPDFと、入稿された印刷会社で見ているPDFの見た目が変わっていたら困るわけです。
印刷はCMYK（プロセスカラー）、一方でVivliostyleはRGBベースのPDFになる
ありさんのセッションで挙げられた「2色印刷」にもつながるのですが、4Cフルカラー印刷か1Cモノクロ印刷であれば、Vivliostyleで出力したPDFで印刷会社は十分対応できるでしょう。しかしRGBで出力されたPDFをカッチリと2Cに振り分けるというのはそう簡単ではないと思います。ありさんもおっしゃっていましたが、2色で印刷費を浮かせながら、モノクロよりももっと訴求力のあるものが作れる（意訳？）のが2色印刷です。
2「色」と書いていますが、実際には2「版」です。例えばプロセスカラー4Cのオフセット印刷では、シアン版、マゼンタ版、イエロー版、ブラック版という4版を使います。それらの版のうち2つしか使わないようなデータにするのが2色印刷です*9。技術的に可能かどうかわかりませんが、仮にVivliostyleで2色印刷用のPDFが出力できたらすごいことです、たぶん。
まとめ
- Vivliostyleはいまなお進化している
- Vivliostyle ver.3では、CLI、ThemesがVFMを活用してよりスピーディに、カスタマイズ可能になる
- Vivliostyle Pubでは、完全にノンプログラミングでGUIだけでPDFを生成できる
- しかし課題も多い
- PDF出力エンジンの固定
- フォントのエンベッド
- 出力インテント、色空間
- 活用事例は広がっている＝ノウハウがしっかり蓄積されている
今回のイベント後、僕もSlackに参加しました。
VFMを楽しみにしつつ、来年あたりの同人誌執筆の際には利用してみようと思います！
*1:お手伝いしている技術同人誌『週刊IM@Study』の組版ワークフローにVivliostyleが実は使われていました。参加当時は知らなかったけど、という感じ
参考：私が組版オペレータになっても？
*2:今でこそ僕はJavaScriptやAppleScript、Google Apps Scriptやシェルスクリプトなどを書いてますが、いわゆる印刷会社やDTPの制作会社では圧倒的多数の人間がnpmナニソレ、というレベルのはず
*3:セッションの途中でいちいち用語の解説を差し挟むと話の腰が折れるし、その塩梅が難しいのは重々理解できるし、万人が100%理解できるセッションはおそらく存在しない。聴講者の80%が理解できれば「合格」で、残り20%の層まで完全理解を求めると登壇する側の手間が見合わないように思う
*4:PDF/X規格についてはこちらなどを参照：PDF/Xとは《PDF/X-1a・PDF/X-4など》｜DTPサポート情報
*5:グレースケール用の出力インテントのひとつ。印刷会社によってDot Gain 10%のところもあります。出力インテントとは、Dot Gainとはみたいな話は長くなるので割愛
*6:以前、このスクリプトの改変記事を書きました
uske-s.hatenablog.com
*7:同人誌印刷に対して、一般に流通している書籍等の印刷、という意味合いです。実際に「商業印刷」という言葉があるかどうか知りません
*8:書籍の印刷は1ページを1枚の紙に印刷するわけではなく、4〜8ページくらいを「面付け」し、表裏をまとめて印刷します。その「表」と「裏」をそれぞれ1台と呼び、「表裏」をあわせて1折と呼びます。印刷会社によって呼び方は多少変わるかもしれません
*9:実際に印刷される際の色はDICやPANTONEなどの特色が使われることが多いです。また、最近増えているデジタル印刷ではまたちょっと事情が違います。これはオフセット印刷とデジタル印刷とで印刷の仕組みが違うためです。詳細は割愛します
