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

概要

イベント情報
項目 内容
イベント名 CSS組版 Vivliostyle 開発者とユーザーの集い 2019夏
URL https://connpass.com/event/141767/
ハッシュタグ #Vivliostyle
主催者 Vivliostyleユーザー会/Vivliostyle Foundation
開催地 東京都杉並区和田1-29-11 公益社団法人日本印刷技術協会(JAGAT)
開催日時 2019-08-31 Sat 13:00
参加人数 35
SNS

JAGATのロゴは青い文字でかっこよかった。

経緯

CSS組版関係の活動は,2016-08-19 Friに開催された『CSSシークレット』出版記念イベント以来となるため,約3年ぶりの関わりだった。

2014年頃のVivliostyle始動時からCSS組版には興味は持っていた。しかし,何か本を出版したいわけでも,仕事に関係あるわけでも,Webフロントエンド技術に興味があるわけでもない自分にとっては,趣味の範囲で片手間で取り組むのは難しかった。

HTMLエディターという個人課題には,ここ1年ほどQtの勉強で取り組んでいた。しかし,思っていたよりも難しい作業だった。それよりも泥沼からの早期脱出が優先的だろうと考えて,一旦全て保留にしている。社会人6年目となるが,一度はまった泥沼からの脱出はかなり難しいことを痛感している。

2019-08初旬にふと,Vivliostyle社当初のメンバーが所属していないことを分散SNS上の投稿でわかり,気になって久しぶりに調べてみた。すると,「Vivliostyle の新しい始まり | Vivliostyle Foundation」の記事が見つかった。どうやらビジネス上の理由で2018-03-26頃に社名変更,会社からのプロジェクトの分離などがあったようだ。知らない間にいろいろ状況が変わったようだ。

このとき丁度「CSS組版 Vivliostyle 開発者とユーザーの集い 2019夏 – connpass」のユーザー会の開催を知った。しかも,開催場所が自宅の近くだった。これは何かの縁だろうと思って,聴講に出向いた。

感想

SNSに投稿した内容から各発表で気になったところだけ記しておく。

《第1部》Vivliostyle開発者ミーティング 13:10~14:20

まずは中心メンバーの村上さんによる開発に関する話だった。2018年のプロジェクトの再始動からここ1年の活動を説明し,開発課題の説明を説明していた。

Vivliostyleのプロジェクト開始時の重要な開発方針として,フルスクラッチでの開発か既存OSSの利用の検討についてあった。結局,EPUB Adaptive Layout実装を採用し,これを土台にして開発が始まったようだ。EPUB Adaptive Layout実装が採用していたのでES5+クロージャーコンパイル用の型注釈言語を開発に採用していた。

ここの開発スタイルはVivliostyle発足当初は語られていなかったので,興味深かった。

その後,プロジェクトの再始動時に,モダンなES仕様のES2018への移行が提案された。しかし,型注釈の情報がなくなってしまうことから,TypeScriptへの移行を決定し,中心開発者の一人が移行を進めていた。2018-08の時点で97 %の移行が完了したそうだが,そこからの完全移行が難しく,結局1年後の2019-08に完了したそうだ。型変換などの細かい変換エラーが残っていたそうだ。

個人的な興味としては,何を持って97 %移行が完了したと判断したのか気になった。が,些細なことなのでわざわざ質問はしなかった。

投稿の公開後に村上さんから以下の回答をいただいた。

詳細な作業内容は「JS-to-TS migration by MurakamiShinyu · Pull Request #536 · vivliostyle/vivliostyle.js」を見るしかないだろう。

最後に,開発課題の説明があり,開発者ミーティングということで,開発に興味のある参加者がどういう課題に興味があるかのアンケートが取られていた。アンケートの結果は以下の通りだった。

バグ7、PDF7、入力文書7、PagedMedia15、タイポグラフィ8、レイアウト10、Web標準7、その他(エラー処理5、多言語化3、検索機能3、Chrome拡張機能6、ドキュメント12)

あとはひたすら課題をこなしていくだけのように感じた。人手不足なのか,村上さんが日英対応やらIssueへの転記など対応されているようで,しかたないだろうけれどボトルネックになっていそうで若干心配に感じた。

《第2部》Vivliostyle・CSS組版ユーザーミーティング 14:30~16:20

おそらく今回の集まりのメインと思われる8名のユーザーによる発表だった。

1/3程度の発表は自著の宣伝が入っており,嫌儲じゃないけれど,なんか嫌な感じだった。また,1/2程度の発表はMarkdownをごにょごにょする話で,またMarkdownかという感じだった。

Markdownから無理やり書籍を作ることが流行っているらしい。貧弱なMarkdownの貧弱さを独自拡張で補うのは第2第3のTeXを生み出すことになるので,辞めたほうがいいと思っている。

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の評価ポイントとなるが,ユーザーとしてはエッジ過ぎて追いかけていられないなと思った。勧告になるまでもう少し待ちたい。

この件に関しても,投稿の公開後に村上さんから指摘をいただいた。

こちらのW3C勧告に対しての理解不足による誤解だった。

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でうまくできるならありだなと思った。

このEPUB対応については,投稿の公開後に以下の通り指摘をいただいた。

元々対応していたものの,あまり知られておらず,最近対応したという誤解を生んでしまったようだ。

ディスカッション:ユーザーが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以降で登場したようだ。この属性で表示するデバイス解像度を指定できるらしい。

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


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

結論

3年ぶりにVivliostyle+CSS組版の話をきけた。久しぶりで懐かしかった。

Markdownをごにょる話が多かったが,活用事例もきけてよかった。

論理プロパティやWeb Publicationsなど新しいWebの仕様がでてきていることを知った。やはりだが,必要でもなくモチベーションの低い状態で,片手間で追いかけられるようなものではない。

今自分が取り組んだところでやはりあまり意味はない。中途半端に取り組むよりかは,勧告が固まるのを待ったほうが効率的だろう。

この感じだと次回も2-3年後になるだろう。それまでに泥沼から脱出できるようにしたい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です