CSS 組版 Vivliostyle ユーザーと開発者の集い 2021 春
去る 2021/4/10 (土) に開催された「CSS 組版 Vivliostyle ユーザーと開発者の集い 2021 春」へ参加 (登壇) したので感想を書く。
第 1 部 ひろがるCSS組版の世界
強力なグラフィック機能を備えた組版処理システム Twight の開発
Vivliostyle コミュニティーで話題になってた未踏 IT 人材発掘 2020 採用のプロジェクトの話。
組版ソフトウェアとして Adobe InDesign に代表される WYSIWYG 系と XML 組版などのテキスト ベースがある。Twight は後者に属するとのこと。
レンダリング処理として CSS を利用するがデータ構造の定義には HTML の代わりに XML を採用している。これは HTML が Web 規格であるがゆえ、組版用途には限界があるのでは？という課題からそうしたのだという。確かにセマンティクスは改善されているが、それは広範で抽象的な概念に対するものだ。
HTML でも <div> や <span>、role と data 属性により柔軟な用途に対応は可能である。しかしスキーマによる強い検証の仕組みなどを考慮すると専門用途なら XML を採用したくなるのだろう。
かなり複雑なレイアウトを持つ誌面の組版をデモしていた。XML による記述体験については自分で書いてみないと何ともいえない。そういえば以前 XSPA のセミナーに参加したとき触れた oXygen はスキーマに基づく XML タグと属性の入力補完が快適で感心させられた。Twight も内部では静的な型検査をおこなっているそうなので、いずれこのようになるかもしれない。
今後の展望として Twight on the Web を検討しているとのこと。エンド ユーザーに対するセットアップやデータ管理のハードルを下げようとしたら Web サービス化したくなるのは自然か。Vivliostyle も同じ動機で Vivliostyle Pub を開発中なのでよくわかる。
Introduction to the PrintCSS Playground and PrintCSS Cloud
- Andreas Zettlさん (@andreas_zettl) / Twitter
- Introduction to the PrintCSS Playground and PrintCSS Cloud - YouTube
PrintCSS.live と PrintCSS Cloud の紹介。これらは様々な CSS 組版ソフトウェアを切り替えながら Web ブラウザー上で組版を実現するサービス。Vivliostyle も採用されている。
私は前回のイベントで Page.js と Vivliostyle の比較を発表したのだけど、この際に PrintCSS を知っていれば利用したのに、と思った。Web ブラウザーがあればセットアップ不要だし組版ソフトウェアの切り替えも一瞬。同一ソースによる比較検討にうってつけだ。
Vivliostyle Pub や Twight on the Web は組版に自身の専用エンジンを用いるが、PrintCSS は複数を採用している点で棲み分けている。例えばあるエンジンで問題が起きたとして、そこだけ別に切り替えて作業を継続できるのは便利そう。
マネタイズについては苦慮しているようだ。組版 Web サービスは新興なので需要と相場が固まっていない。これは有料プランを兼用している Vivliostyle Pub としても大きな課題となるだろう。
同人作家から見たVivliostyleへの期待
非エンジニアである同人作家の立場からみた Vivliostyle への期待について。対象領域は二次創作小説同人誌。
やはり Vivliostyle と create-book は非エンジニアから見るとセットアップのハードルが高いようだ。create-book は vivliostyle-cli の環境構築を補助するが、これらを利用するためには共に Node.js と npm の予備知識がいる。
またコマンドライン実行というのも非エンジニアにとって強い忌避感を覚えるものであろう。実際、業務で CLI ツールを作って非エンジニアへ提供すると初見の反応は確実に芳しくない。そのため Electron で GUI 化することもある。
開発者やそれに近い位置にいるとユーザー体験を理解することは難しい。また要望があっても開発側へ伝えるハードルは高いのだろう、なかなか表明してもらえないものだ。そのため今回のような指摘は非常にありがたい。
本登壇では改善要望として以下を挙げている。
- Vivliostyle Pub の提供
- 同人小説のための Themes 提供
前者は当然として後者の需要があることを知れたのはよかった。Themes の要望をどのように反映するか？について今後の開発者会議で検討したい。というわけで May 2021 の議題へ追加しておいた。
第 2 部 Vivliostyle の現在
Vivliostyle CLI の開発状況
CLI の開発は非常に活発で感心する。最近の変更点で個人的に嬉しかったのは以下。
- プレビューがフル版の Vivliostyle viewer になったこと
- 登壇でも言及しているが、ビューアーとしての機能不足がなくなったのは大きい
- HTML/CSS 保存でプレビューが自動リロードされる
- HTML はもっと以前からかも？
- CSS 保存時の自動リロードは要望を出したらバグだったとのことで修正された
- リロード操作の省略は編集体験が大幅に向上するのでありがたい
VFM 連携については強化してゆきたい。例えば CLI は独自に Markdown の Frontmetter から title と theme を読み込んでいるが、この処理を VFM から getMetadata 関数として提供するとか。
VFM の開発状況
私の登壇。
remark 13 以降は remark-parse へなるべく依存せず独自処理で、と宣言した。しかし feat: implemented math syntax with MathJax で remark プラグインと素の unified プラグイン間で構文の排他を実現できず remark を採用せざるを得なかった。この課題を解決できないと remark 13 以降の micromark へ対応する必要があるため悩んでるところ。
Create Book を使った旅行エッセイ本の制作
create-book で生成されたテンプレートをカスタマイズしながら本を作ってゆく話。
CSS 組版のよい特徴として組版の指定方法が Web 標準という点がある。この登壇で紹介されているプロパティーなどは Vivliostyle 以外でも利用可能、または将来そうなるだろう。そのためこうした組版の事例を発表することは公益性の観点からすばらしい。
私は VFM の他に create-book の開発も引き継いだので、がんばってゆきたいところ。ただ現時点の create-book は以下の Issue で判明した問題があり
なにか修正しても npm create book から実行される環境に反映されなくて困っている。識者の方、Issue を読まれて解決方法などを提示できる場合はコメントをお願いします！
Vivliostyle Pub の開発状況
Vivliostyle のクラウド版となる Pub の説明と開発の進捗報告。前回イベントからの大きな変化としてはリポジトリーの公開と v1 要求仕様の策定。
- vivliostyle/vivliostyle-pub: Write, Collaborate, Publish.
- Vivliostyle Pub v1 Req - vivliostyle/community Wiki
逢賀サクさんの登壇でも期待されていたとおり、Vivliostyle ファミリーの中でも特に非エンジニアへ訴求するものなので稼働する日が楽しみだ。「VFM を書いて Theme を選択すれば本ができる最高の世界へ」とはまさに。私は VFM 担当としてがんばります。
第 3 部 Vivliostyle の未来
Vivliostyle.js における CSS Paged Media の実装
CSS 組版における Vivliostyle の立ち位置と CSS Paged Media の紹介。
独自仕様で高機能な組版を目指すのではなく、Web 標準としての CSS (Paged Media) 規格へ貢献しながら開発する方針を採用。独自仕様の組版としては Adobe InDesign という強力なソフトウェアがある。棲み分けという意味でも、より広範な Web 全般の組版体験を向上させる観点からも標準規格を重視することはよい選択だと思う。私が Vivliostyle を支持するのもこの点にある。
Vivliostyle として、いくつかの重要な CSS Paged Media 機能に未対応だったが、最近はこれらの解消が進む。以前の開発者会議で既存の Vivliostyle 実装で必要なパーツが既に揃っており、これらの組み合わせで想像よりも簡単に対応できたと言われていたのを思い出す。登壇でも初期の開発者へ謝辞をのべているが、確かにその設計と実装の巧みさが現れた事例といえる。
Vivliostyle Themes のハンズオン
ハンズオン形式で Themes を作成してゆく登壇。
雛形の生成コマンドをはじめて知った。yarn で紹介しているが当然ながら npm create vivliostyle-theme でもいける。最初に明確な目標機能を提示してから、ひとつずつ SCSS を追加してゆく構成が実にわかりやすい。私も実際に手を動かして完成までこぎ着けた。
VFM で <body> に class を設定する機能は spec: Frontmatter。create-book の前身？となった akabekobeko/env-create-book で採用したもので、仕様は Hugo や Gatsby などの静的サイト ジェネレーターにおける Markdown メタデータを参考にした。YAML 読み込みまでは実装されていたが HTML 反映されていない状態で、私が VFM 開発を引き継いでから初めて実装した新機能でもある。
Frontmatter によるメタデータ定義と HTML 加工は可能性のある機能なので、アイディアがあれば VFM の Issue などにどしどしコメントください！
Vivliostyle-cli への新機能の提案
私家版 CLI で様々な実験をされている高井さんによる新機能の提案。
カスタマイズの余地をどれぐらい持たせるか？は悩ましい課題である。機能拡張の可能なシステムは数多あれど、本体と別体で管理されるため互換の問題を招きやすい。ただし Vivliostyle としては機能拡張というより生成するコンテンツへ関与する方法の追加が主になるだろうから、その範疇なら対応してもよいのかもしれない。
複数 Theme 指定。これは Theme の CSS をうまく疎結合にできるかが課題となるだろう。明確で単機能なもの、例えば段組み単位で切り出して 1 カラム、2 カラムを切り替えるのはありだろう。また自分用のテンプレートとして単機能 Themes を持ち、その中から取捨選択して組み上げてゆく方法も考えられる。
SCSS Transpile。CSS 標準でも Variables などの機能拡充はおこなわれているが、Themes の CSS 生成でも SCSS は利用されており AltCSS でも広く普及している。ただ SCSS を利用したいユーザーなら自分で npm-scripts にコマンドを定義できそうなので CLI としてサポートしてなくてもよさそうだが、どうだろう。Tips として Vivliostyle のガイドラインなどでこの方法を紹介する手もあるか。
Preprocessor。あると便利かもしれない。課題にはない懸念としては動的 require が必要なので安全性が心配。この方法で呼び出した場合に npm を読ませないとか fs などを制限する機能はあっただろうか。
リプレース機能。VFM の replace オプションに受け渡せればよいのかも。これは VFM の CLI としては公開しておらず VFM か stringify 関数の処理が必要となる。
Vivliostyle 開発ディスカッション
短時間ながら面白い議論ができた。
私は Vivliostyle に Source Maps 的なものがほしいという話をした。Vivliostyle は HTML のタグへ CSS をインライン出力する設計なので実現は難しそう。ただ他のパネラーも Web ブラウザー表示と CSS 定義の紐付けに苦慮しており、この機能相当のものがあればと賛同していただけた。
Source Maps のように直参照できなくともインライン出力対象の HTML へ data-css-source=".my .class" のような感じで元 CSS セレクターを埋め込むモードがあるだけでもありがたい。
最後に
登壇者、参加者のみなさまお疲れさまでした！！