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組版で技術書を作った話

2. 株式会社TAM フロントエンドエンジニア
 菅家 大地 / Daichi Kanke 元デザイナーのフロントエンドエンジニア
 福島→宮城→東京→宮城(New!)
 PWA Night / 仙台フロントエンドUG /v-sendai
 Vue.js / Nuxt.js / PWA / Monaca 
 daichi.kanke @kan_dai
3. https://techbookfest.org/ 技術書典7にサークル参加して来ました • 国内最大級の 技術書同人誌イベント • 参加サークル：約640 • 参加者：約9700
4. 技術書典6にも参加してました • 「実践PWA」という本を書きました • コミュニティのメンバー (職種は色々)での共著 • この時はWord (意外と良い) • Boothで買えます(宣伝) https://pwanight.booth.pm/items/1312648
5. 今回描いたやつ • 会社のエンジニア数名でフロントエンドの小 ネタを集めたTips集を執筆 • エンジニアっぽいという理由で Wordを捨てCSS組版の道へ… • Boothで買えます(宣伝) https://we-are-frontend.booth.pm/items/1573699
6. CSS組版 ?
 書籍を出版する上でのレイアウトを
 HTMLとCSSを使って実現するもの

7. https://reviewml.org/ja/ https://vivliostyle.org/ja/ よく聞くツール (今回はVivliostyleを採用しました)
8. Vivliostyle • Vivliostyle ViewerというHTML+CSS文 書を組版・表示するWebアプリ • Vivliostyle Viewerはブラウザに実装さ れていない組版用のCSS仕様を JavaScriptで実装している
9. ポプテピピック ©大川ぶくぶ
10. 通常の表示 Vivliostyle Viewer での表示
12. @pageでページボックスという、 主に印刷スタイルとして指定される CSSを指定できる ノンブルの指定 印刷のサイズ
13. ブラウザの印刷機能でPDF作成 → 入稿 (表紙はイラレ)
14. コードの共有 プレビュー環境 (ほぼ使わなかった) 開発用ファイル 生成されるファイル Gulpでコンパイル
15. CSS組版やってみて • 最初は本当にこれで本ができるのか半信半疑だったができて感動した • HTMLとCSSでレイアウトや装飾がいじれるのはフロントのエンジニアとして はとても良い (Wordではその辺は諦めた) • Gitで共有すれば良いので共著もやりやすい • 入稿も簡単で良かった （同人の印刷なので実際の商業誌とかはどうかわかりません）
16. 苦労したポイント • とりあえずやってみたが最初はVivliostyleで何ができるか全然わからなくて 苦労した。やりながら理解していった感じ • マークダウン →　HTMLの変換では細かいところまで手が届かず、最終的に は生成されたHTMLを調整していたのが敗北感 • 具体的な組版用CSSの書き方などの情報を探すのに苦労した(友人が)
17. 
 ご静聴ありがとうございました