CSS組版で技術書を作った話

2019年10月21日に仙台で行われたSendai Frontend Meetup #2で使用したスライドです。

スライド内のリンク

技術書典
https://techbookfest.org/

すぐに現場で使えるフロントエンドTips集
https://we-are-frontend.booth.pm/items/1573699

実践PWA
https://pwanight.booth.pm/items/1312648

Re:VIEW
https://reviewml.org/ja/

Vivliostyle
https://vivliostyle.org/ja/

Transcript

1. 2019.10.21 @ Sendai Frontend Meetup #2
   

   株式会社TAM 菅家大地

   CSS組版で技術書を作った話

   

   View Slide

2. 株式会社TAM フロントエンドエンジニア

   菅家 大地 / Daichi Kanke
   元デザイナーのフロントエンドエンジニア

   福島→宮城→東京→宮城(New!)

   PWA Night / 仙台フロントエンドUG /v-sendai

   Vue.js / Nuxt.js / PWA / Monaca 

   daichi.kanke
   @kan_dai
   

   View Slide

3. https://techbookfest.org/
   技術書典7にサークル参加して来ました
   ● 国内最大級の
   技術書同人誌イベント
   ● 参加サークル：約640
   ● 参加者：約9700
   

   View Slide

4. 技術書典6にも参加してました
   ● 「実践PWA」という本を書きました
   ● コミュニティのメンバー
   (職種は色々)での共著
   ● この時はWord (意外と良い)
   ● Boothで買えます(宣伝)
   https://pwanight.booth.pm/items/1312648
   

   View Slide

5. 今回描いたやつ
   ● 会社のエンジニア数名でフロントエンドの小
   ネタを集めたTips集を執筆
   ● エンジニアっぽいという理由で
   Wordを捨てCSS組版の道へ…
   ● Boothで買えます(宣伝)
   https://we-are-frontend.booth.pm/items/1573699
   

   View Slide

6. CSS組版 ?

   書籍を出版する上でのレイアウトを

   HTMLとCSSを使って実現するもの

   

   View Slide

7. https://reviewml.org/ja/ https://vivliostyle.org/ja/
   よく聞くツール (今回はVivliostyleを採用しました)
   

   View Slide

8. Vivliostyle
   ● Vivliostyle ViewerというHTML+CSS文
   書を組版・表示するWebアプリ
   ● Vivliostyle Viewerはブラウザに実装さ
   れていない組版用のCSS仕様を
   JavaScriptで実装している
   

   View Slide

9. ポプテピピック ©大川ぶくぶ
   

   View Slide

10. 通常の表示 Vivliostyle Viewer での表示
    

    View Slide

11. View Slide

12. @pageでページボックスという、
    主に印刷スタイルとして指定される
    CSSを指定できる
    ノンブルの指定
    印刷のサイズ
    

    View Slide

13. ブラウザの印刷機能でPDF作成 → 入稿 (表紙はイラレ)
    

    View Slide

14. コードの共有
    プレビュー環境
    (ほぼ使わなかった)
    開発用ファイル 生成されるファイル
    Gulpでコンパイル
    

    View Slide

15. CSS組版やってみて
    ● 最初は本当にこれで本ができるのか半信半疑だったができて感動した
    ● HTMLとCSSでレイアウトや装飾がいじれるのはフロントのエンジニアとして
    はとても良い (Wordではその辺は諦めた)
    ● Gitで共有すれば良いので共著もやりやすい
    ● 入稿も簡単で良かった
    （同人の印刷なので実際の商業誌とかはどうかわかりません）
    

    View Slide

16. 苦労したポイント
    ● とりあえずやってみたが最初はVivliostyleで何ができるか全然わからなくて
    苦労した。やりながら理解していった感じ
    ● マークダウン →　HTMLの変換では細かいところまで手が届かず、最終的に
    は生成されたHTMLを調整していたのが敗北感
    ● 具体的な組版用CSSの書き方などの情報を探すのに苦労した(友人が)
    

    View Slide

17. 

    ご静聴ありがとうございました

    

    

    View Slide