Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup

Presentation at Vivliostyle meetup, Aug. 31, 2019

Transcript

1. Markdown原稿の複雑化と 締め切りのはざまで 〜多分これが一番早いと思います〜 2019/8/31 Vivliostyle開発者とユーザーの集い @spring_raining
2. あなた誰 • 緑豆はるさめ ◦ Twitter: @spring_raining • 4月新卒入社のフロントエンドエンジニア • 時間を見つけてVivliostyleにコントリビュート • フォントと深層学習に興味があります
3. 宣伝: Vivliostyle合同誌 • VivliostyleをはじめとしたCSS組版を フィーチャーした合同誌 • vivliostyle.org で無料で読めます https://vivliostyle.org/samples/ • Vol.2 参加者募集中！！！！
4. Markdown+CSS組版 やっていくぞ！！！！
5. 締切3日前
6. 原稿終わらない… Markdown→HTML変換後の謎の作業… 何もしてないのにレイアウトが壊れた…
7. 受け入れるしか無い… 本当に？
8. さかのぼって考える 原稿が終わらなかった レイアウト崩壊 BAD END 早く原稿を書く 効率的に原稿を書ける ワークフローを用意しておく レイアウトの問題に できるだけ早く気づく 制作期間
9. Markdownが足りないもの 複雑な紙面を表現するための 書式・文法 他のファイルの参照 (1ファイルからしか作れない) Remarkを使って Markdownを拡張 Pugとの併用で 複数Markdownをまとめる
10. Markdownを拡張？ • Remark: JavaScriptによるMarkdownパーサ • 変換中の文書をAST(抽象構文木)で得られるのでプラグインが書きやすい ◦ Pandocと同じ方法
11. たとえばこんなことが 出力されるHTML構造を変更 Markdownに新しい文法を追加
12. Pug • HTMLに変換できるテンプレートエンジン • include で外部ファイルを読み込み • JavaScriptで用意したトランスパイラをPugのフィルター機能で呼び出し → Remarkを使ってPugファイルの中にMarkdownを埋め込める！ • もちろんフィルターも自作可能
13. フィルター使用例 • define-keywordと render-indexという フィルタを用意 • 定義されたキーワードと そのページを巻末の索引 に出力
14. 紙面組版に立ち向かう • (前提) CSSによる紙面レイアウトは大変 • 試行錯誤のための時間をたっぷり取ることをおすすめします • 原稿が終わってからではなく、原稿執筆と並行してプレビューを確認するこ とでレイアウト崩壊の芽を摘む • CSSプリプロセッサの導入 個人的にStylusを使っているけど 好きなのを使えばいいと思います https://2019.stateofcss.com
15. 緊急回避手段を用意する • レイアウトが壊れる原因がわからないとき (わかったけど時間的制約で解決 が難しいとき) のためにとりあえず回避する手段 • (例) なぜかこの図だけページの下にはみ出てしまう…原因不明… 強制的に改ページして解決！！！！
16. まとめ • 早く書けば早く終わります(それはそう) • Remarkプラグイン, Pugフィルターの実装は意外とかんたん ◦ JavaScript, Node.jsの学習テーマとしてもちょうど良い • 締切は待ってくれないけど本を出す機会は何度でもある ◦ とりあえず今完成させれば次回リベンジできる！ 技術書典7までお互いがんばりましょう！