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

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

42ba906dc35ef460ffcb1b7c3307ef45?s=47 spring_raining
August 31, 2019
Programming
0
520

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

Presentation at Vivliostyle meetup, Aug. 31, 2019

42ba906dc35ef460ffcb1b7c3307ef45?s=128

spring_raining

August 31, 2019
Tweet

More Decks by spring_raining

See All by spring_raining
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
42ba906dc35ef460ffcb1b7c3307ef45?s=48 spring_raining
0
1.9k
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
42ba906dc35ef460ffcb1b7c3307ef45?s=48 spring_raining
2
1.7k
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
42ba906dc35ef460ffcb1b7c3307ef45?s=48 spring_raining
6
5.9k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
42ba906dc35ef460ffcb1b7c3307ef45?s=48 spring_raining
3
560
Printable Web
42ba906dc35ef460ffcb1b7c3307ef45?s=48 spring_raining
3
710
今こそCSS組版
42ba906dc35ef460ffcb1b7c3307ef45?s=48 spring_raining
5
1.9k
シン・サーバの形は。
42ba906dc35ef460ffcb1b7c3307ef45?s=48 spring_raining
0
270
クライアントサイドWebアプリはいいぞ
42ba906dc35ef460ffcb1b7c3307ef45?s=48 spring_raining
0
500
IoD - Internet of Dojinshi
42ba906dc35ef460ffcb1b7c3307ef45?s=48 spring_raining
0
170

Other Decks in Programming

See All in Programming
実践 SpiceDB - クライドネイティブ時代をサバイブできるパーミッション管理の実装を目指して / Practical SpiceDB
B1bddcb899ec3060fe9913f3cb70dbb6?s=48 lmt_swallow
0
120
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
6f425ca5b796b421dca359b95046184f?s=48 findyinc
7
2.6k
OSS貢献を気軽にしたい Let's Go Talk #1
Aa0368c69701536321af9db1ae552b45?s=48 yuyaabo
2
230
ファーストペンギンを志すものに伝えたい - １人目のアジャイル推進者がたどった成功と失敗
93b2f8445b4096456c336ec2ea5dd0e7?s=48 psj59129
0
100
ちょっとつよい足トラ
6a661bb5871208cad64912223bb0c637?s=48 logilabo
0
370
動画合成アーキテクチャを実装してみて
D5b3791309c8a03d37f05d238ded370d?s=48 satorunooshie
0
540
Rust on Lambda 大きめCSV生成
Bfcda4dca8fd6a07980ed8d5b21a572b?s=48 atsuyokota
1
390
クックパッドマートの失敗したデータ設計 Before / After 大放出
0be62f7ac4cc32f37f02a98aaeb86f5f?s=48 mokuzon
20
25k
NestJS_meetup_atamaplus
F0a8d07597a19192791bf663504d2a17?s=48 atamaplus
0
210
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
Ae763d151aeee101b40ae10cc13ebe63?s=48 maroon1st
0
13k
How to Test Your Compose UI (Droidcon Berlin 2022)
E8168a08862631072b2e82e7b662dc07?s=48 stewemetal
1
130
VIMRC 2022
E76db8a47bdae9ef76629ecb366483ed?s=48 achimnol
0
130

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.3k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.3k
Robots, Beer and Maslow
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7.1k
The Illustrated Children's Guide to Kubernetes
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
18
40k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
XXLCSS - How to scale CSS and keep your sanity
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
1.1M
Scaling GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
Bootstrapping a Software Product
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
296
110k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
297
140k
Pencils Down: Stop Designing & Start Developing
79acae287842acf29084005533a7fb3b?s=48 hursman
113
9.8k

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