『Re:VIEW+CSS組版やっていき』を やった話とWebエンジニアが期待する未来 / CSS Publishinng for Web Developers

https://kokucheese.com/event/index/524241/ 登壇資料です。

Transcript

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

   View Slide

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

   View Slide

3. 技術書典
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. エンジニアと本
   

   View Slide

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

   View Slide

10. 本の製造は
    未体験ゾーン
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. CSS組版
    

    View Slide

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

    View Slide

16. github.com/vvakame/review-css-typesetting
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. ⽬目次⾒見見てみる
    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出⼒力力を再現！
    ⼟土台が欲しい！
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. 将来の希望
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide