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

Presentation at Vivliostyle meetup, Aug. 31, 2019

Transcript

1. Markdown原稿の複雑化と
   締め切りのはざまで
   〜多分これが一番早いと思います〜
   2019/8/31 Vivliostyle開発者とユーザーの集い
   @spring_raining
   

   View Slide

2. あなた誰
   ● 緑豆はるさめ
   ○ Twitter: @spring_raining
   ● 4月新卒入社のフロントエンドエンジニア
   ● 時間を見つけてVivliostyleにコントリビュート
   ● フォントと深層学習に興味があります
   

   View Slide

3. 宣伝: Vivliostyle合同誌
   ● VivliostyleをはじめとしたCSS組版を
   フィーチャーした合同誌
   ● vivliostyle.org で無料で読めます
   https://vivliostyle.org/samples/
   ● Vol.2 参加者募集中！！！！
   

   View Slide

4. Markdown+CSS組版
   やっていくぞ！！！！
   

   View Slide

5. 締切3日前
   

   View Slide

6. 原稿終わらない…
   Markdown→HTML変換後の謎の作業…
   何もしてないのにレイアウトが壊れた…
   

   View Slide

7. 受け入れるしか無い…
   本当に？
   

   View Slide

8. さかのぼって考える
   原稿が終わらなかった
   レイアウト崩壊
   BAD END
   早く原稿を書く
   効率的に原稿を書ける
   ワークフローを用意しておく
   レイアウトの問題に
   できるだけ早く気づく
   制作期間
   

   View Slide

9. Markdownが足りないもの
   複雑な紙面を表現するための
   書式・文法
   他のファイルの参照
   (1ファイルからしか作れない)
   Remarkを使って
   Markdownを拡張
   Pugとの併用で
   複数Markdownをまとめる
   

   View Slide

10. Markdownを拡張？
    ● Remark: JavaScriptによるMarkdownパーサ
    ● 変換中の文書をAST(抽象構文木)で得られるのでプラグインが書きやすい
    ○ Pandocと同じ方法
    

    View Slide

11. たとえばこんなことが
    出力されるHTML構造を変更 Markdownに新しい文法を追加
    

    View Slide

12. Pug
    ● HTMLに変換できるテンプレートエンジン
    ● include で外部ファイルを読み込み
    ● JavaScriptで用意したトランスパイラをPugのフィルター機能で呼び出し
    → Remarkを使ってPugファイルの中にMarkdownを埋め込める！
    ● もちろんフィルターも自作可能
    

    View Slide

13. フィルター使用例
    ● define-keywordと
    render-indexという
    フィルタを用意
    ● 定義されたキーワードと
    そのページを巻末の索引
    に出力
    

    View Slide

14. 紙面組版に立ち向かう
    ● (前提) CSSによる紙面レイアウトは大変
    ● 試行錯誤のための時間をたっぷり取ることをおすすめします
    ● 原稿が終わってからではなく、原稿執筆と並行してプレビューを確認するこ
    とでレイアウト崩壊の芽を摘む
    ● CSSプリプロセッサの導入
    個人的にStylusを使っているけど
    好きなのを使えばいいと思います
    https://2019.stateofcss.com
    

    View Slide

15. 緊急回避手段を用意する
    ● レイアウトが壊れる原因がわからないとき (わかったけど時間的制約で解決
    が難しいとき) のためにとりあえず回避する手段
    ● (例) なぜかこの図だけページの下にはみ出てしまう…原因不明…
    強制的に改ページして解決！！！！
    

    View Slide

16. まとめ
    ● 早く書けば早く終わります(それはそう)
    ● Remarkプラグイン, Pugフィルターの実装は意外とかんたん
    ○ JavaScript, Node.jsの学習テーマとしてもちょうど良い
    ● 締切は待ってくれないけど本を出す機会は何度でもある
    ○ とりあえず今完成させれば次回リベンジできる！
    技術書典7までお互いがんばりましょう！
    

    View Slide