参加報告 CSS組版 #Vivliostyle 開発者とユーザーの集い 2019夏 | Markdownをごにょりながらも最新仕様を取り込んだCSS組版

Vivliostyleユーザー会の合同誌の制作 by 緑豆はるさめ(@raining_raining)

Vivliostyleユーザー会で中心的なメンバーと思われる緑豆はるさめによる発表だった。

Markdown+CSS組版で最後のMarkdownの変換後の作業を効率化するためのテクニックに関する話だった。

要点は以下2点だった。

1. RemarkというOSSでMarkdownを拡張
2. HTMLテンプレートエンジンのPugを活用し，ファイル分割に対応

どちらもMarkdownをごにょる話で，あまり興味を持てなかった。

Vivliostyleと関連ツールの便利な使い方 by 村上真雄(@MurakamiShinyu)

村上さんの2回目の話だった。Viviliostyle関連ツールとして，Vivliostyle Viewerの話とvivliostyle-savepdfを紹介していた。

Vivliostyle Viewerでは，GitHub上のHTMLのそのまま表示に対応していてたしかに便利そうに感じた。GitHubのHTMLはGitHub PagesとかCDNにしないと，HTMLとして認識されず，MIMEがtext/plainとみなされ，プレインテキスト扱いになる。GitHub上のリポジトリーのHTMLをそのままマニュアルなどで参照したいときに不便だった。特定Webサービスに特化した機能だが，便利な機能だなと感じた。

vivliostyle-savepdfはVivliostyle FormatterでやっていたようなことをやるCLIツールかなと感じた。Vivliostyleの主な用途の一つであるHTMLのPDFへの変換として，重要なコマンドに感じた。

「マンガでわかるRuby」のCSS組版・制作秘話 by 湊川あい(@llminatoll) よう(@youchan)

「マンガでわかるRuby」という本を作成した女性の著者2名による作成秘話の発表だった。参加者30数名の内女性は数名だったので，やや目立っていた。

最初に発表した緑豆はるさめと同様にMarkdownをごにょる話に近かった。ただしこちらはredcarpetというツールを使って，必要に応じて使い捨ての手製のRubyスクリプトを活用してうまくやっていたようだ。

マンガの方はPNG画像に出力して，それを大版図版として取り込んだそうだ。

その他，印刷所への入校時にPDFのサイズに若干の問題があり，失敗したという体験談の報告があった。bleedやmarksという@pageのプロパティがあるのだが，こちらは両方共削除 (コメントアウト) が必要らしく，bleedのコメントアウトを忘れていたのが問題だったそうだ。失敗談というのはあまり表にでないので，貴重で参考になった。

また，pxとmmで若干の誤差が生じてしまうという仕様をきけた。

この発表は，発表内容的にもしかたないだろうけれど，特に宣伝色が強くてもやもやした。

Vivliostyleで縦組シナリオを組版するby 小形克宏(@ogwata)

Vivliostyle+CSS組版で縦組みシナリオの組版に関する話だった。

この発表で一番印象的だったのは，CSSの論理プロパティの存在だった。margin-leftなどの方向の存在するプロパティは文字の進行方向 (横書き，縦書き) に対応していない。そのため，これに対応した-start, -endの論理プロパティというのがあるので，これを使えばうまくできるそうだ。

論理プロパティの存在は初めて知った。気になって調べてみた。「CSS Logical Properties and Values Level 1」で公開されている。

これをみるとわかるが，まだEditor’s Draftの仕様だ。最新規格を取り込めているのはVivliostyleの評価ポイントとなるが，ユーザーとしてはエッジ過ぎて追いかけていられないなと思った。勧告になるまでもう少し待ちたい。

CSS組版やってみた！ by やましー(@yamasy1549)

CSS組版に挑戦してみたという事例の発表だった。明石高専生らしく，現在大学生のB3相当とのことだ。わざわざ関西からやってきただろうか。だとしたら，遠路はるばるご苦労なことだ。

同人誌を作っているらしく，1-2年前のVivliostyleユーザー会の会誌で存在を知ったらしく，そこからCSS組版をやっているらしい。卒論をCSS組版で作ったらしく，これはすごいなと感じた。

楽したい組版（仮） by ひでみ(@hidemi_ishihara)

こちらもMarkdownからPDFを作る話だった。経歴が面白い人で，なんでもスパコンを作っているとか。さらっと話は流れたが，なんとなくプロフェショナルな感じがした。

2年前くらいからVivliostyleを使いだして，いろいろ同人誌を作っているらしい。その中で，自分でMarkdown->HTML->PDFのフローを効率化するためのオレオレフレームワークを開発してうまくやっているという話だった。

ただ，現在ではvivliostyle-savepdfでもっと楽にできる可能性があるとのことだ。

現状Vivliostyleには満足しているので，特にこれ以上の機能追加はなくても満足しているとのことだった。

EPUBファイルからVivliostyleでPDFを作る by 田嶋淳(@JunTajima)

題名通りEPUBからPDFを作る話だった。出版の仕事をしている人で，出版社の校正部の要請で，EPUBの電子書籍であっても紙に印刷してペンで校正の要望があるらしい。

しかし，一般的なEPUBビューアーは海賊版防止のため印刷機能を設けていない。

その中で，最近になってVivliostyleがEPUBの表示に対応したので，PDFへの変換・印刷が可能になった。また，ページ数を付与する場合に，元のEPUBに手を入れたくないので，VivliostyleのCSSの追加機能を重宝しているらしい。

具体的にどういう手順でやるかを紹介していた。その他，サンプルとして使っていた青空文庫の「黒死館殺人事件」という本が変態的なので、EPUBビューアーの表示テストにうってつけらしい。

個人的にはこの発表が今回の集まりで一番有益だった。

たまに電子書籍でEPUBしか発売していない本があったりする。やむを得ないので，EPUBを買う場面がある。ただし，取扱はPDFのほうが楽なので，EPUBをPDFに変換したい。Calibreだとレイアウトがあまりきれいではない。Vivliostyleでうまくできるならありだなと思った。

ディスカッション：ユーザーがVivliostyle・CSS組版のこれからに求めるものは？

発表者の発表が全て終わったところでディスカッションの時間となった。基本的には，発表者，聴講者ごちゃまぜの質疑応答の時間だった。

以下，質疑応答の内容をメモしている範囲で記載・コメントしていく。

Q. はるさめに対して、remarkとpandocの違いは？

A. remarkは対応形式が少ない。が、remarkのほうがASTの柔軟性が高いので、カスタマイズしやすい。

まず，最初の発表の緑豆はるさめに対して，RemarkとPandocの違いについて質問がとんだ。MarkdownパーサーとしてはPandocもメジャーなツールであり，なぜあえてRemarkを使ったのかという主旨だろう。

回答としては，Remarkのほうが対応形式は少ないが，AST (Abstract Structured Tree: 抽象構文木) の柔軟性が高く，自分でカスタマイズしやすいという内容だった。ASTのカスタマイズがどれくらいの難易度なのかはやったことがないので不明だが，いろいろあるようだ。

個人的には，そんな面倒くさいことをするくらいなら最初からHTMLで書けばいいのではないかと思った。

Q. なぜHTMLで書かず、Markdownなのか？

A. 文書中にマークアップを書くのが手間。

Q. 村上さんはHTMLは普段どう書いている？

A. 下書きをmarkdownを書いて、HTMLに変換して、その後はHTMLで作る。

続いて，直前の質疑応答に関連した質疑として，Twitterでも質問の上がっていたなぜMarkdownを使うのかという質問がなされた。

たしか，これにはようが回答していた。まあ，たしかに余計なマークアップを手書きするのは手間かもしれない。それでもTeXに比べたらだいぶマシなのだけど。個人的にはテキストエディターでHTMLを書くというのがそもそも間違いなのではないかと感じている。

ラスター画像ファイルを作成するのに，テキストエディターを使う人はほぼいない。それと同じでHTMLの専用ツール，ソフト側でうまいことやればいいだけのことではないかなと感じている。自分は今はBlueGriffonを使っている。これを実現するいいソフトが不足しているのは問題だと思っている。

続いて，緑豆はるさめが村上さんにHTMLをどう作成しているか質問していた。この回答は安心だった。さすがと思った。個人的に，HTMLのプロフェッショナルである村上さんがMarkdownで全てやっていたら嫌だった。

Q. vivliostyleの出力するDOMがstyle要素がたくさんあって汚い。何をやっている？

A. 論理的な構造は保持しているが、CSSのプロパティはすべて内部で計算して、style要素に出力している。styleを適用する部分はVivliostyleのコアなので、ソースコード読んでほしい。

聴講者からのコア機能に関する質問だった。2014年とかVivliostyleの初期に自分もVivliostyleの表示結果をWebブラウザーの開発者ツールで確認したことがあり，DOMが汚いなとは思っていた。

VivliostyleはCSSのプロパティの計算とそれの適用を調整するソフトなので，うまく調整するためにいろいろやっているらしい。コア機能，Vivliostyleの本質に迫るおもしろい質疑応答だった。

Q. 図表番号がつかないとあったけど、見出しはついているよね？

A. MarkdownからHTMLへの変換で自動で番号をつけられる。図表も見出しもVivliostyleでやっている。もともとfigureとかない。

「楽したい組版（仮） by ひでみ」に対する質問だった。図表番号だけMarkdownから付けられないということに対する疑問の投げかけだった。

番号付はCSSカウンターを使う方法と，Vivliostyleの機能でやる方法，Markdownのコンバーターでやる方法があり，ひでみはVivliostyle側でうまくやっているそうだった。

MarkdownでCSSカウンターを使ってやるというのは，不可能ではないだろうけど，けっこう面倒くさそうなのであまり深入りしたくないなと感じた。

Q. 公開されている本で、複数のHTMLの読み込みに対応しているが今まで知らなかった。

A. 今年になって最近機能追加された。W3CでもWeb publications仕様がでており、便利なので機能追加した。

複数HTMLの読み込み機能に関する質問だった。村上さんが回答されていた。緑豆はるさめやようがうまくPubを使って対応していたが，実は今年に入った機能追加で対応されたらしい。W3CのWeb Publicationsでマニフェストファイルを使った複数ファイルの読み込みに対応したらしく，便利なのでVivliostyleでもこの機能に対応したらしい。

EPUBでも同じような仕組みで複数ファイルの読み込みなどに対応できたと思ったが，新しいW3C仕様でもできるようになりつつあるようだ。このあたりのW3Cの最新動向は，片手間で追いかけられるものではなく，この分野のプロフェッショナルである村上さんならではの回答だった。

Q. 章ごとのfooter、ヘッダーは可能か？

A. ファイル分割されていれば、可能。ただし、単一ファイルだとだめ。CSS paged mediaの機能が未実装のため。

たしかひでみからの質問で，これも村上さんが回答していた。

直前のWeb Publicationsの話と絡むが，ファイル分割されていれば対応できるらしい。ただし，単一ファイルだとCSS paged mediaの機能が未実装なため，対応できていないらしい。開発課題と重なる質問だった。

Q. 漫画はどうやって作った？

A. クリップスタジオで、pngを出力して、それを取り込んでいる。

Q. 段組みにして段マタギの画像がうまくいかない。

A. 今のところepub adaptive layoutを駆使すればできる。実装課題。

漫画の出版を行っている小形から同じく漫画を扱っている湊川あいに質問がなされていた。全編が漫画であれば，イラストソフトでそのまま全て出力できるが，一部文章があるため，図版として部分的に取り込んだそうだ。

また，これと関連して段組みにした場合の段組みをまたぐぶち抜き画像について質問があった。段またぎの処理はTeXでもけっこう面倒くさかった記憶がある。これに対して，村上さんが今後の実装課題と回答していた。そのほか，緑豆はるさめがCSSグリッドレイアウトをうまく使えばできるのではないかと企みを回答していた。

Q. img要素にsrcset属性があるけど使えるのか？

A. 使えたと思う。

ここの質問は若干自信がないのだけど，たしかsrcset属性の使用可否だった。img要素のsrcset属性は初めて知った。2014年のHTML 5の勧告時には存在せず，HTML 5.1以降で登場したようだ。この属性で表示するデバイス解像度を指定できるらしい。

これも村上さんが回答していた。かなりマニアックな質問だなと感じた。

これで質疑応答が終わった。このあとは懇親会があるのだが，特に話すこともないので人知れず退場した。