アカベコマイリ

HEAR NOTHING SEE NOTHING SAY NOTHING

CSS 組版 Vivliostyle ユーザーと開発者の集い 2020 秋

November 04, 2020イベントVivliostyle

去る 2020/10/24 (土) に開催された「CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋」へ参加 (登壇) したので感想を書く。

第 1 部 Vivliostyle の現在

現在の Vivliostyle が提供している機能紹介とその課題について。

Vivliostyle CLI で広がる CSS 組版のエコシステム

vivliostyle/vivliostyle-cli の紹介。

安定版の最新 v2.1.0 の目玉として以下を紹介。

  • 出力 PDF へ目次・アウトラインを追加する機能 #47
  • --verbose オプション #53

PDF 目次は PR がきたとき開発陣が盛り上がっていたのを覚えている。--verbose オプションは指定されると Vivliostyle の処理中に console 出力が得られるというもの。例えば以下の例では Building pages... と Generating PDF... の間が --verbose により追加出力されている。これを前提としてコード側の出力内容を増やしてゆけば、デバッグやサポートで非常に有用な機能となるだろう。

$ npm run v:viv01

> examples-vivliostyle-pagedjs@1.0.0 v:viv01
> vivliostyle build ./vivliostyle/samples/fixed-page-size/ja-horizontal/Takasebune/main-ruby.xhtml -o pdf/vivliostyle/viv01.pdf --verbose

===> Launching build environment...
===> Building pages...
===> MathJax(?): Cannot read property 'MmlTree' of undefined
===> defaultSettings {"pageSizeOption":"auto","pageSizePresetSelect":"A5","pageSizeUseLandscape":false,"pageSizeWidth":"210mm","pageSizeHeight":"297mm","overrideDocumentStylesheets":false,"loadMode":"document"}
===> JSHandle@object
===> E_INVALID_PROPERTY -ms-writing-mode: lr-tb
===> Property not supported by the browser:  behavior
===> Generating PDF...
===> Processing PDF...
===> 🎉  Done
===> .../examples-vivliostyle-pagedjs/pdf/vivliostyle/viv01.pdf has been created

v3 の展望について。

最大の目玉は VFM (Vivliostyle Flavored Markdown) 対応。これは目下、vivliostyle/vfm で書式の議論と開発が進められている。前回のイベント (2020 春) で告知したところ結構な反響のあったが 対応はこれから。興味を持たれた方はぜひ GitHub Issues の議論へ参加を！コミュニケーションは日本語も OK です。

締めくくりの「解決したいこと」に挙げられた内容では以下が重要だと感じた。

PDF出力環境を固定して、安心してエクスポートできるようにしたい

現時点の CLI は CSS 組版と PDF 出力を実行するプラットフォームとして Chromium を利用している。これは puppeteer 経由で操作しており、CLI @vivliostyle/cli をインストールすると puppeteer が定義したバージョンの Chromium を一緒にダウンロードする仕組みだ。つまり CLI の npm バージョンさえ固定すれば、これが依存する Chromium も倣うので目的は達成されているともいえる。

しかし課題もあって、この設計では Vivliostyle 修正によりバージョン更新すると Chromium も追従する可能性が高い。不可分なのだ。そのため Chromium だけ固定して Vivliostyle だけ更新というのはできない。これを解決する方法として puppeteer-core を使うのはどうだろうか。

puppeteer-core は puppeteer の core 部分を抜き出したもので、npm install 時点では Chromium をダウンロードしない。代わりに BrowserFetcher を利用して後から任意のバージョンをダウンロードする。その指定を CLI の引数に追加すれば Chromium バージョンの独立した管理が可能となるだろう。

問題としては CLI インストール時に Chromium がダウンロードされないため、ユーザーの手間が増える問題について以下の解決案を考えてみた。

  1. CLI が npm install される際に puppeteer と同様に puppeteer-core 経由で自身の定義した Chromium をダウンロード (現在の挙動)
  2. CLI の引数に Chromium バージョン指定がなければ 1 を、あればそのバージョンをダウンロードして利用 (新しい機能)

これは実証実験してゆけそうなら PR を出すかもしれない。私の開発している npm でも検討している機能なので、まずはそちらで試す予定。

スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト

vivliostyle/themes の話。

過去に WordPress を利用していた者として非常に期待している機能だ。WordPress はテーマが豊富なだけでなく、これ自体がビジネスにもなっている。本登壇でも様々なテーマを紹介しているが例えば文庫は出版社ごと、レポートなら教育機関ごとの要望を取り入れた有償版の展開も面白そう。

Twitter 上の反応としては環境構築面での期待が散見された。本登壇でいう「スピーディーな本作り」が狙う反響 (需要) は確実にあるようだ。実際、CSS 組版や Paged Media と言われても初めて Vivliostyle を利用するユーザーは途方にくれてしまうだろう。技術書典 7 で Vivliostyle 本の売り子をした際も「これを読めば CSS 組版で本を作れるのですか？」とか「Viliostyle の入門書なのでしょうか？」という質問が繰り返された。テーマはこうした向きへ強く訴求することだろう。

登壇終盤、Twitter の反応に対してやましーさんからコメントするコーナー。私はテーマ作成者を増やすため starter プロジェクトの開発を提案した。create-book もだが、必要最小の環境が公式に提供されると初学のつまづきを防ぎやすい。また Paged Media へ親しむための教材としても応用できそうだ。動作環境は揃うので Paged Media の CSS 写経とかパラメーター変更などを気軽に試しやすくなる。

そういえばこの登壇スライドも Vivliostyle のテーマ @vivliostyle/theme-slide で作られているそうだ。私の登壇は Marp で作成したのだけど、今後は Vivliostyle テーマを使ってみたい。

Vivliostyle Pub の現状と課題

Vivliostyle が提供を予定している Web 執筆サービス Pub の話。

現時点では Web ブラウザー上で前述の VFM による執筆、テーマ選択、原稿の PDF 出力 (ダウンロード) まで実装されている。執筆内容の記録には GitHub リポジトリーを利用。GitHub 連携する点で設計としては Netlify や Gatsby Cloud が近いとのこと。本ブログも Markdown で書き GatsbyJS によりビルドしたものを Netlify でホストしているので親近感がわく。2020 年秋の時点で一般的 (現実的) な設計ともいえるだろう。

抱えている課題。

GitHub リポジトリー必須な点はストレージの Vivliostyle 提供も議論されているが、運用コストや安定稼働などを考慮するとしばらくは難しそう。GitHub についてはプログラマー向けだったり英語の点でハードルが高いのだろう。GitHub 必須の間は手順書とかで対象する感じかな。

PDF 以外の出力が未対応。これからの予定として EPUB と WebBook を予定しているとのこと。EPUB があると Kindle 販売も視野に入るし WebBook があれば今回のような登壇スライドを Vivliostyle で書いてそのまま Pub から公開といったことも可能になる。夢のある機能だ。

開発のオープン化はアカウント管理のある Web サービスゆえの難しさがあるので仕方ないか。この辺の事情も含めてどう公開してゆくのか？という点も興味深い。

最後に展望。

フォント埋め込み、これは需要があるはず。課題はライセンスか。サーバー内のビルドにだけ利用されるならよいけれど、プレビュー表示にはユーザー環境へのダウンロードが発生するのでサブセット化するなどの対応が必要となるだろう。

Theme のマーケットプレイス。ユーザーとしては当然として前述のとおりビジネス面でも待望の機能。WordPress のように Vivliostyle へ関わることがビジネスに繋がる、となればプロジェクトの安定運用にも繋がるはず。

印刷所の直接入稿。本を書くところまではゆけても、印刷の手続きが面倒で諦めた人は結構いると予想している。これが Web フォームでいくつか入力するだけで済むなら出版人口が大幅に増えるかもしれない。物理的な印刷だけでなく note や Zenn のように Pub から直に本を販売するのもよいだろう。書籍の出版 (販売) として紙、電子、Web サービスが等価になるというのは Vivliostyle のワンソース・マルチユースという理念にも合致するのではなかろうか。

第 2 部 Vivliostyle の利用例

Vivliostyle が実際、どう利用されているか？の事例集。

Vivliostyleで厚めの薄い本をCSSで組んだ話

東方 Project の同人小説を書かれている方による Vivliostyle レビュー。組版の馴れ初めは Word から。CSS についてはキリバン報告戦国時代に触れたぐらいとのこと。キリバン (キリ番)、懐かしい。そういえば昔の個人サイトは HTML 手打ちで CSS の普及もゆっくりだった。PC どころかフィーチャーフォンの小さな画面で地道にサイトを作ったり小説を書いている人も多かった記憶がある。あと着メロ打ち込みとか。

本題。Vivliostyle の採用動機は Adobe 税の回避とある。また遠因として以前に参加した合同誌が Vivliostyle を採用していたことを挙げている。200 ページほどの縦書き小説本の組版に Vivliostyle が採用されたようだ。以前、Vivliostyle 小形さんが同人小説について調査して訴求力があると予想していたが、これはその裏付けのひとつになるかもしれない。

執筆環境はテキスト エディター + Vivliostyle を予想していたのだが、技術要素 (使用アプリ) にはテキスト編集系に Word や一太郎なども並んでいて面白い。前述の小形さん調査でも Word 利用者が多かった。Vivliostyle としては HTML/CSS であればよいため、それを生成する過程は使いやすいツールを選べばよい。ただしツール選定と組み合わせの難しさもあるため Pub により標準で (凝らなければ) 便利な執筆環境を提供できるのが理想ではある。

合同誌を執筆するうえでの技術的な課題について。小説の執筆者はプログラマーとは限らないため CLI は厳しいとのこと。確かに。こうした問題を考慮して様々なツールを組み合わせているのだという。スライドの組版ワークフローは Pub へ求められる機能 (体験) の参考になりそうだ。

その後、実際に遭遇した組版の問題などを挙げながら、CSS 組版が執筆における文字ぐらいの重要な位置へ来るかも？という展望を語りつつ締め。みこう氏、全般を通して問題解決のアプローチが上手だと感心した。特に CLI を苦手する執筆者への配慮や組版の問題対応などが素晴らしい。同人の話を超えて会社の業務でチームプレーする態度としても学びがあった。

Rapid publishing for public health books against COVID-19

Vivliostyle 採用事例である以下の話。

教科書を作成した TIB のスタッフである Simon Worthington 氏がビデオ登壇した。日本語訳と字幕は小形さんの手によるもので、当日の朝 8:00 までかかったらしい。お疲れさまです。自然でわかりやすい翻訳でした。

本の作成における要素技術として Vivliostyle などを採用した動機として、

  • 時間のかかる旧来の出版ワークフロー (ブックス プリント) を避けて迅速に出版したい
  • 本をオープン アクセスにしたい

などを挙げていた。ここ数年ほど参加している XSPA (学術情報XML推進協議会 や JEPA (日本電子出版協会) のセミナーでも同様の話をよく聞く。旧来の出版を否定するというより Programmable だったり Web 標準な技術を取り入れて効率よく出版しようというのは現実的だ。オープン アクセスも単に Web 公開するだけではない。DOI だったり ORCID などを利用した信頼性の担保された相互リンクなどにも役立つ。

執筆は Fidus Writer を採用。これは Web ベースの WYSIWYG エディターで CSS 組版と PDF 出力に Vivliostyle を利用している。配信についてオンデマンド印刷 PDF 以外は transpect や GitHub Pages も組み合わせているとのこと。

理想としてワークフローの完全自動化を目指しているが、まだ課題も多く達成できていない。これは要因が多面的で「これを解決すれば」というのはなさそう。登壇では言及されなかったが Vivliostyle Themes は自動化に大きく寄与すると考えている。

みこう氏の登壇もだが、採用事例により課題が明らかとなるのは建設的で実によいことだ。

商業出版『そろそろ常識？マンガでわかる「正規表現」』の制作

漫画、キャラクターと吹き出しによる対話形式を多用した正規表現に関する技術書の制作に関する話。Vivliostyle による商業出版の事例として購入したが内容もよい。2019 年のイベントで紹介された「マンガでわかるRuby」を思い出す。

LibroWorks はふりがなプログラミング で知った。今回の本といい、定型になりがちなプログラミング系の技術書へ新風を吹き込むような試みが面白い。ただ奇をてらっているわけではなく企画と要素技術の調査もしっかりしている。

本登壇の冒頭でも CSS 組版の性質についても「InDesign で簡単にできることは意外に手こずるが、吹き出しなどの派手なことは自動化できる」と指摘。これは対象とするレイアウトが基本的に固定の InDesign と可変の HTML/CSS による性質の差と受け取った。どちらも他方を実現できるが向いているものを担当したほうがよい。

今回の本で重要な「キャラクターと可変長のテキストを含む吹き出し」は CSS 組版があっていたのだろう。可変長というのはデータとしての長さだけではなく作業工程も含まれる。「原稿の修正がそのまま組みに反映されるので、組版工程が丸々ない」というのはこの点を指してのことだろう。確かにこれは InDesign の段落スタイルとテキストの流し込みで制作するより楽かもしれない。

とはいえ InDesign はソフトウェアによる組版で実質標準といえるものだから、これを採用しないこと自体がリスクである。ここもちゃんと抑えたうえで版元に了承を得たり、企画自体の取り下げも検討していたのも流石。当然のように見えるがソフトウェア開発の技術選定がゆるくて政治的に強い人の好みがゴリ押しされた結果、ド派手に火を吹いたプロジェクトに関わった経験を思い出す。野心的な技術を採用する事例としても参考になる。

後半は実際に制作で遭遇した CSS 組版の限界や対処方法について。ここは「企画から出版まで」のフローにある「不明なところを Vivliostyle さんに随時相談」する様子を見ていたので面白かった。大津氏は自分できちんと試した上、回避方法も挙げつつ質問していたので村上さんとの議論もスムーズな印象がある。よいことではあるが、これぐらいの意気込みやレベルでないと商業出版に求められる組版を CSS で定義することの難しさも感じた。

これはノウハウ共有やその集大成として Vivliostyle Themes が増えることで解決されてゆくのかもしれない。その一助として LibroWorks がこの本の制作で開発した CSS を GitHub に公開しているのは素晴らしいことだ。

原稿とイラストはダミーに置き換えられているが、実際に Vivliostyle で組版するためのデータが揃っている。InDesign にない CSS 組版の長所として Web 標準かつプレーン テキスト主体であるため、こうしたノウハウ共有のしやすさも重要だと思う。

第 3 部 ひろがる CSS 組版の世界

Vivliostyle 以外の組版エンジンや関連する CSS プロパティーの紹介など。

Paged.js について 〜Yet another CSS paged media polyfill〜

私の登壇。本イベントの開催にあたり Slack にて小形さんと村上さんから

  • CSS 組版が Vivliostyle だけではないことを示したい
  • よき競合として Paged.js について取りあげてほしい

と依頼された。その結果を Paged.js を試すにまとめ、これをベースに発表。当初、Paged.js の使い方や特徴を中心に解説する予定だったが、登壇でも言及したとおり公式サイトの情報量が充実しているのでやめた。代わりに Vivliostyle から見た比較に切り替える。村上さんと相談して Vivliostyle と CSS 組版 (CSS Paged Media Module) エンジンを比較検証している print-css.rocks のサンプルをそれぞれで動かしてみたら、その結果が特徴として現れるのでは？ということで採用。

本イベントのユーザー層にはあまり響かない内容だったかもしれない。Togetter の反応を見ても どう意見したものか、という感じである。ただし print-css.rocks や Pages.js の方々は興味を持っていただけたようで Twitter にスレッドができていた。村上さんも見解を返信しており、私の調査に対する追試と考察 Gist を添えている。

こうした反応があっただけでも調査と登壇をしてよかった。良かれ悪しかれ、反応は嬉しい。村上さんの Gist はさすがの掘り下げなので CSS 組版に関するプロパティーに興味のあるなら一読を強く勧めます。

より良いタイポグラフィのための知られざるCSS

Web フォントの有名サービス FONTPLUS などを手掛ける Fontworks 鈴木丈氏による登壇。CSS 組版、特に文字へ関わるプロパティーについて紹介されてゆく。

紹介だけにとどまらず、どう使うのがよいか？について考察を交えながら解説されているためノウハウ集としても有用。例えば冒頭の font-kerning だと以下のように適用範囲をうまく分岐している。私はこれで :lang() 擬似クラスを初めて知った。

body {
  font-kerning: none; /* ページ全体で無効に */
}

:lang(en) {
  font-kerning: normal; /* 欧文では有効に */
}

h1 {
  font-feature-settings: "palt" 1; 
  font-kerning: none;
  /* プロポーションメトリクスが有効ならカーニングも有効に */
}

Togetter にまとめれておいるツイートで知ったのだが、鈴木氏は以下の書籍を監修している。こうしたノウハウをまとめて知るのによさそうだ。後で購入するかもしれない。Kindle 版があれば即買いだった。

まとめ

2020 春に引き続きオンライン開催となったが、それでも (それゆえに？) 結構な人数が参加して驚いた。Vivliostyle や CSS 組版への関心は意外に高いのかもしれない。実際 Vivliostyle の Slack で関連用語 (「Vivliostyle」や「CSS 組版」など) を含むツイートを自動収集 (IFTTT を利用) するチャンネルがあるのだけど、ほぼ毎日、更新されている。Paged.js 調査で知った print-css.rocks にも複数のソフトウェアが列挙されていた。CSS 組版は既に現実的な選択肢となっているのだろう。

登壇の中ではみこう氏のものが印象深い。小説はテキスト中心なので CSS 組版の対象として好ましい、と単純に考えていた。しかし実際にはテキスト中心であるがゆえ、細かな文字装飾や組版が求められる。登壇自体もそうだし Togetter にまとめられたみこう氏のツイートもこの点に関する興味を感じさせるもので、認識を改めた。日本語の組版については未だ十分でないのだと。

それでも CSS プロパティーの提案と実装は進んでいる。また不足している機能を対処療法で補うとしても、その定義はプレーン テキスト (HTML/CSS) だから共有しやすい。そのため「より良いタイポグラフィのための〜」のようなノウハウ、その集大成として Vivliostyle Themes が充実してゆけば十分に期待へ応えられるのではなかろうか。

最後に。登壇者、参加者のみなさまお疲れさまでした！！

Copyright © 2009 - 2023 akabeko.me All Rights Reserved.