『Re:VIEW+CSS組版やっていき』を やった話とWebエンジニアが期待する未来 CSS組版・パブリッシング交流会 わかめ まさひろ 技術書典

わかめ まさひろ @v vakame Masahiro Wakame GAE/Go TypeScript 技術書典 Web/その他

技術書典

技術書典 •技術書 + 同⼈誌 専⽤お祭りイベント •ざっくりSelf-Publishingです •誰でも技術書が書ける！ •ざっくり半期に1回やってます techbookfest.org

3,341㎡の会場です 10/8 (祝) 池袋サンシャインシティ2F 展示ホールD（⽂文化会館ビル2F）

7⽉月19⽇日いっぱいまで 参加募集中

参加サークル数 •1 → 60サークルくらい •2 → 190サークルくらい •超 → 90サークルくらい •3 → 190サークルくらい •4 → 240サークルくらい •5 → 会場移動します

エンジニアと本

本 •技術書を読む •ブログとか書く •雑誌に寄稿する •技術書を書いて出版してもらう •技術書を書いて刷って売る ↑易易↑　　↓稀↓

本の製造は 未体験ゾーン

出版の⾼高速道路路 •⽬標 •⼊稿品質のPDFを得る •⼿段 •Re:VIEW+LaTeX •LaTeX etcの環境はDockerに押し込む！ フォントetcもプリイン

継続的執筆環境 •GitHub •Re:VIEW •docker vvakame/review •Circle CI •Dropbox, GCS, S3 etc… ↑易易↑　　↓稀↓

完全✌(‘ω’)✌勝利利

CSS組版

Webエンジニア LaTeXわからん説

github.com/vvakame/review-css-typesetting

妄想Pros/Cons •慣れがある •Chrome DevTool •CSSŧŔŕŪ஌ͬͯΔ •Web流⽤容易 •ナレッジ無し •PDFの形式？ •フォント埋込？ •etc…

欲しい成果 ほげらほげらほげらほげらほげらほ げらほげらほげらほげらほげらほげ らほげらほげらほげらほ げらほげらほげらほげら ほげらほげらほげらほげ らほげらほげらほげらほげらほげら ほげらほげらほげらほげらほげらほ げらほげらほげらほげらほげらほげ らほげらほげらほげらほげらほげら ほげらほげらほげらほげらほげらほ げらほげらほげらほげらほげらほげ らほげらほげらほげらほげらほげら ほげらほげらほげらほげらほげらほ 最⾼高の適当さを！ ほげらほげらほげらほげらほげらほげらほげら ほげらほげらほげらほげらほげらほげらほげら ほげらほげらほげらほげらほげらほげらほげら はしらはしらはしらはしらはしらはしらはしらはしらはしらはしらはしらはしらは しらはしらはしらはしらはしらはしらはしらはしらはしらはしらはしらはしらはし 紙⾯面で遊びたい！ デザインもらって それを反映させたい！

実際にやってみた • github.com/vvakame/review-css-typesetting •with Vivliostyle.js •ダウンロードカードを販売 •セブンイレブンの同⼈プリントで出⼒ •LaTeX版とCSS版を⾒⽐べてみる

⽬目次⾒見見てみる 3. 22KB 11432C 476L 実際にやってみる (practice) 12L 1 TechBoosterのワークフロー with Re:VIEW 15L 2 ブラウザからPDF出⼒力力の下準備 25L 3 1枚のHTMLを出⼒力力する！気合で 36L 4 扉や奥付のページを表示したい！ 34L 5 ⽬目次を表示したい！ 28L 6 ノンブルを打ちたい！ 62L 7 柱に現在表示中の章タイトルを表示したい！ 61L 8 テキスト周りの⾒見見た⽬目をなんとかしたい！ 77L 9 脚注を表示したい！ 20L 10 画像をセンタリングしたい！ 53L 11 ボックス系の⾒見見た⽬目をいい感じにしたい！ 24L 12 ページ上部に雑に線引きたい！ 10L 13 Vivliostyle Viewerを使ってデータを表示する 4. 14KB 6206C 199L 未解決の課題 (issue) 6L 1 問題の上⼿手な切り分け⽅方 30L 2 PDFの⽣生成とフォントの埋込 8L 3 凝ったデザインへの挑戦 9L 4 HTMLBuilderが吐き出すアンカーとリンクを修正する 13L 5 CSSの管理理⽅方法 28L 6 ボックス系の⾒見見た⽬目と脚注が被る話 18L 7 vivliostyle.jsのレンダリングがリロードで壊れる場合がある 44L 8 CI上でPDFを⽣生成させ再現性を持たせる 8L 9 他のブラウザを検討する 29L 10 他の組版エンジンを検討する 16L 1 [column] トリムマーク社が爆誕した話 まずはRe:VIEWの LaTeX出⼒力力を再現！ ⼟土台が欲しい！

扉・奥付 ⽬目次 ノンブル 柱に章・節タイトル フォントのカスタマイズ 脚注表示 画像センタリング 箱モノの⾒見見た⽬目 ページ上部に罫線 フォント埋込 PDF⽣生成 凝ったデザイン… DevToolの活⽤用 採番の⾃自動化 レンダリングの冪等性 Busted! Not yet… PDF⽣生成の再現性 ブラウザ選択問題 exit code PDF on CI

扉・奥付 ⽬目次 ノンブル 柱に章・節タイトル フォントのカスタマイズ 脚注表示 画像センタリング 箱モノの⾒見見た⽬目 ページ上部に罫線 フォント埋込 PDF⽣生成 凝ったデザイン… DevToolの活⽤用 採番の⾃自動化 レンダリングの冪等性 PDF⽣生成の再現性 ブラウザ選択問題 Busted! Not yet… exit code PDF on CI

嬉しい！ •とりあえずPDF出た！ •わりとそれっぽい⾒た⽬が得られた！ •Webページにも流⽤できるかも！？

つらい… (1/2) •印刷所⼊稿に適してなさそう •フォント埋込 •DevToolでスタイルの編集厳しい •Vivliostyle.jsとの噛みあわせ？

つらい… (2/2) •レンダリング結果が毎回同じじゃない •主に⽬次周り 脚注周りも…？ •開発パイプライン組み直し •Circle CI上でPDF⽣成(まだ)できてない •LaTeXがコマンドでまとまってるの強い

将来の希望

Vivliostyle.js •同⼈ユーザはほとんどお⾦にならない •問題の切り分け⽅がわからない •→Issue報告による貢献が難しい •パッチ書くのはなお難しい

勝⼿手な要望 •DevToolとの相性が改善されると嬉しい •Houdini化とか？ •コードの追いやすさの改善にも…？

本当に欲しい未来 •ブラウザ単品で印刷可能なPDFほしい！ •紙が絶滅してPDFほしくなくなるでも可 •各仕様がfixされ実装されるのはいつ •Write once, used on paper and Web page •⼈的資源集まってなさそう問題