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
810
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
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
4
1.7k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.4k
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
2k
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
spring_raining
6
7.5k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
640
Printable Web
spring_raining
3
840
今こそCSS組版
spring_raining
5
2.3k
シン・サーバの形は。
spring_raining
0
300
クライアントサイドWebアプリはいいぞ
spring_raining
0
590
Other Decks in Programming
See All in Programming
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
小さな開発会社を作った理由
polidog
0
1.9k
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
CSC307 Lecture 08
javiergs
PRO
0
330
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
英語
s_shimotori
1
220
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Designing with Data
zakiwarfel
96
5k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Faster Mobile Websites
deanohume
303
30k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Code Reviewing Like a Champion
maltzj
517
39k
We Have a Design System, Now What?
morganepeng
46
7k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Building Your Own Lightsaber
phodgson
101
5.9k
Design by the Numbers
sachag
277
18k
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までお互いがんばりましょう!