Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

spring_raining
August 31, 2019
Programming
0
580

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

Presentation at Vivliostyle meetup, Aug. 31, 2019

spring_raining

August 31, 2019
Tweet

More Decks by spring_raining

See All by spring_raining
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
2
1.1k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2k
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
1.8k
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
spring_raining
6
6.3k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
580
Printable Web
spring_raining
3
750
今こそCSS組版
spring_raining
5
2k
シン・サーバの形は。
spring_raining
0
280
クライアントサイドWebアプリはいいぞ
spring_raining
0
520

Other Decks in Programming

See All in Programming
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
640
和暦を正しく扱うための暦の話
nagise
10
6.7k
爆速の日経電子版開発の今
shinyaigeek
2
660
Amazon QuickSightのアップデート -re:Invent 2022の復習&2022年ハイライト-
shogo452
0
250
Next.js 13 Layout / Streaming SSR 仕組み解説
sumiren
0
160
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
640
Excelの助けを借りて楽にシナリオを作ろう
rpa_niiyama
0
340
Functional Fun in Kotlin
nomisrev
1
130
ポケモンで学ぶiOS 16弾丸ツアー 🚅
giginet
PRO
1
620
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
270
Glance App Widgetでウィジェットを作ろう / MoT TechTalk #15
mot_techtalk
0
150
Hasura の Relationship と権限管理
karszawa
0
180

Featured

See All Featured
Clear Off the Table
cherdarchuk
79
290k
For a Future-Friendly Web
brad_frost
166
7.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6.7k
Typedesign – Prime Four
hannesfritz
34
1.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Music & Morning Musume
bryan
37
4.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
43k

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までお互いがんばりましょう！