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
320
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
チームのテスト力を鍛える
goyoki
3
720
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
Kiroで始めるAI-DLC
kaonash
2
610
楽して成果を出すためのセルフリソース管理
clipnote
0
180
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
AIでLINEスタンプを作ってみた
eycjur
1
230
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Ruby Parser progress report 2025
yui_knk
1
450
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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までお互いがんばりましょう!