Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
Search
spring_raining
August 31, 2019
Programming
0
970
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
Presentation at Vivliostyle meetup, Aug. 31, 2019
spring_raining
August 31, 2019
Tweet
Share
More Decks by spring_raining
See All by spring_raining
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
310
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
4
1.8k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.6k
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
2.2k
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
spring_raining
6
8.3k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
720
Printable Web
spring_raining
3
960
今こそCSS組版
spring_raining
5
2.6k
シン・サーバの形は。
spring_raining
0
350
Other Decks in Programming
See All in Programming
rage against annotate_predecessor
junk0612
0
170
アセットのコンパイルについて
ojun9
0
130
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
Swift Updates - Learn Languages 2025
koher
2
480
OSS開発者という働き方
andpad
5
1.7k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
為你自己學 Python - 冷知識篇
eddie
1
350
Deep Dive into Kotlin Flow
jmatsu
1
340
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
Rancher と Terraform
fufuhu
2
400
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Site-Speed That Sticks
csswizardry
10
820
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Building an army of robots
kneath
306
46k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
It's Worth the Effort
3n
187
28k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Context Engineering - Making Every Token Count
addyosmani
3
44
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Documentation Writing (for coders)
carmenintech
74
5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Transcript
Markdown原稿の複雑化と 締め切りのはざまで 〜多分これが一番早いと思います〜 2019/8/31 Vivliostyle開発者とユーザーの集い @spring_raining
あなた誰 • 緑豆はるさめ ◦ Twitter: @spring_raining • 4月新卒入社のフロントエンドエンジニア • 時間を見つけてVivliostyleにコントリビュート
• フォントと深層学習に興味があります
宣伝: Vivliostyle合同誌 • VivliostyleをはじめとしたCSS組版を フィーチャーした合同誌 • vivliostyle.org で無料で読めます https://vivliostyle.org/samples/ •
Vol.2 参加者募集中!!!!
Markdown+CSS組版 やっていくぞ!!!!
締切3日前
原稿終わらない… Markdown→HTML変換後の謎の作業… 何もしてないのにレイアウトが壊れた…
受け入れるしか無い… 本当に?
さかのぼって考える 原稿が終わらなかった レイアウト崩壊 BAD END 早く原稿を書く 効率的に原稿を書ける ワークフローを用意しておく レイアウトの問題に できるだけ早く気づく
制作期間
Markdownが足りないもの 複雑な紙面を表現するための 書式・文法 他のファイルの参照 (1ファイルからしか作れない) Remarkを使って Markdownを拡張 Pugとの併用で 複数Markdownをまとめる
Markdownを拡張? • Remark: JavaScriptによるMarkdownパーサ • 変換中の文書をAST(抽象構文木)で得られるのでプラグインが書きやすい ◦ Pandocと同じ方法
たとえばこんなことが 出力されるHTML構造を変更 Markdownに新しい文法を追加
Pug • HTMLに変換できるテンプレートエンジン • include で外部ファイルを読み込み • JavaScriptで用意したトランスパイラをPugのフィルター機能で呼び出し → Remarkを使ってPugファイルの中にMarkdownを埋め込める!
• もちろんフィルターも自作可能
フィルター使用例 • define-keywordと render-indexという フィルタを用意 • 定義されたキーワードと そのページを巻末の索引 に出力
紙面組版に立ち向かう • (前提) CSSによる紙面レイアウトは大変 • 試行錯誤のための時間をたっぷり取ることをおすすめします • 原稿が終わってからではなく、原稿執筆と並行してプレビューを確認するこ とでレイアウト崩壊の芽を摘む •
CSSプリプロセッサの導入 個人的にStylusを使っているけど 好きなのを使えばいいと思います https://2019.stateofcss.com
緊急回避手段を用意する • レイアウトが壊れる原因がわからないとき (わかったけど時間的制約で解決 が難しいとき) のためにとりあえず回避する手段 • (例) なぜかこの図だけページの下にはみ出てしまう…原因不明… 強制的に改ページして解決!!!!
まとめ • 早く書けば早く終わります(それはそう) • Remarkプラグイン, Pugフィルターの実装は意外とかんたん ◦ JavaScript, Node.jsの学習テーマとしてもちょうど良い •
締切は待ってくれないけど本を出す機会は何度でもある ◦ とりあえず今完成させれば次回リベンジできる! 技術書典7までお互いがんばりましょう!