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
誰でも簡単に組版した PDF を生成する仕組みづくり
Search
Yu Sugawara
August 23, 2023
Technology
1
84
誰でも簡単に組版した PDF を生成する仕組みづくり
YUMEMI.grow 技術同人誌を支える技術
https://yumemi.connpass.com/event/291439/
Yu Sugawara
August 23, 2023
Tweet
Share
More Decks by Yu Sugawara
See All by Yu Sugawara
Server Side Swift と swift-openapi-generator 実践ガイド: サーバとクライアントのコード生成のベストプラクティス
yusuga
0
42
Server Side Swift 実践レポート: 2024年に案件で採用して見えた課題と可能性
yusuga
2
560
HIG の歴史
yusuga
1
50
WWDC 2023 現地参加報告(コード編)
yusuga
0
160
マイク環境を考える
yusuga
0
49
Custom AppをIP制限ありのままで審査に通す方法
yusuga
0
6.3k
Swiftのas Any / AnyObjectの暗黙的な型変換について
yusuga
2
1.8k
ローカルのグローバル環境を可能な限り汚染しないXcodeの開発環境構築
yusuga
0
83
Pure DI 101
yusuga
0
230
Other Decks in Technology
See All in Technology
QA/SDETの現在と、これからの挑戦
imtnd
0
150
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
290
Automatically generating types by running tests
sinsoku
2
3.8k
営業向け誰でも話せるOCIセールストーク
oracle4engineer
PRO
2
100
React ABC Questions
hirotomoyamada
0
550
更新系と状態
uhyo
8
1.9k
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
480
PdM採用とAIの製品活用を同時に頑張ってみた話 / EM oasis 20250418
rakus_dev
0
120
コードや知識を組み込む / Incorporating Codes and Knowledge
ks91
PRO
0
130
AIと共に乗り越える、 入社後2ヶ月の苦労と学習の軌跡
sai_kaneko
0
130
ガバクラのAWS長期継続割引 ~次の4/1に慌てないために~
hamijay_cloud
1
480
SDカードフォレンジック
su3158
1
640
Featured
See All Featured
Bash Introduction
62gerente
611
210k
Adopting Sorbet at Scale
ufuk
76
9.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
We Have a Design System, Now What?
morganepeng
52
7.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Language of Interfaces
destraynor
157
25k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
How STYLIGHT went responsive
nonsquared
100
5.5k
Transcript
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ୭Ͱ؆୯ʹ൛ͨ͠ PDF Λ ੜ͢ΔΈͮ͘Γ 2023-08-23
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࣗݾհ ੁݪ ༞ Twitter: @yusuga_ גࣜձࣾΏΊΈ: iOS ςοΫϦʔυ
߹ಉձࣾϐίε: දࣾһ
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࣥචͷྲྀΕ Markdown ϑΝΠϧͰهࣄΛॻ͘ɻ 1. Vivliostyle Ͱ Markdown ͔Β൛ͨ͠
PDF Λੜ ͢Δɻ 2. PDF Λݟ࣮ͯࡍͷࢴ໘ͷϨΠΞτࠐΈͰ ༰Λ֬ೝ͢Δʢमਖ਼͕͋Ε 1 Δʣɻ 3.
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ Vivliostyle ͱ Webٕज़Λ༻͍ͯిࢠॻ੶ͷ࡞ɺද ࣔɺҹΛՄೳʹ͢ΔCSSϑϨʔϜϫ ʔΫɻ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ Vivliostyle ΛΠϯετʔϧ͢Δʂ # install Volta curl https://get.volta.sh |
bash # install Node volta install node # ࣮ߦͰ͖Δ͔֬ೝ # μϝͩͬͨΒ `$HOME/.volta/bin` ʹ `PATH` ͕௨͍ͬͯ Δ͔֬ೝ volta --version
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ Vivliostyle ΛΠϯετʔϧ ͢Δʂ # ґଘϥΠϒϥϦΛΠϯετʔϧ yarn install #
࣮ߦͰ͖Δ͔֬ೝ yarn vivliostyle --version
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ PDF Λੜ͢Δʂ # vivliostyle Ͱ PDF Λੜ yarn
build # PDF Λ։͘ open ./book/output/ebook.pdf
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ՝
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ લఏ͕ࣝඞཁ curl – node – volta – yarn
– PATH ͕௨Δͱʁ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࣮ߦͷखؒ खॱॻ௨ΓʹෳͷίϚϯυΛखಈͰ ࣮ߦ͠ͳ͚ΕͳΒͳ͍ɻ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ڥىҼͷ ࣗͷϚγϯڥʹπʔϧΛΠϯετ ʔϧ͢ΔͱɺͦΕͧΕͷڥͷঢ়گʹΑͬ ͯ͏·͘ΠϯετʔϧͰ͖ͳ͔ͬͨΓ࣮ ߦʹࣦഊ͢Δ͜ͱ͕͋Δɻ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ৭ʑͳਓʹࣥචͯ͠Β͍ͨ ͍ Web ͷ։ൃऀͳΒೃછΈ͕͋Δπʔϧͳ ͷͰͦͪΒࢀೖোนΊɻ – iOSɺAndroidɺσβΠφʹएׯϋʔυϧ ͕ߴ͍ɻ
–
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ త ࢲͨͪ node, volta, yarn, Vivliostyle ʹ͍ͭͯ ߟ͑ͨ͘ͳ͍ʂ
– ͨͩ୯ʹ Markdown ͰهࣄΛॻ͍ͯɺͦΕΛ֬ ೝ͢ΔͨΊʹ PDF Λੜ͍͚ͨͩ͠ ͳΜͩ…ʂ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ PDF Λੜ͢Δ ϋʔυϧΛԼ͛Δʂ
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ վળҊ1: CI Ͱ PDF Λੜ GitHub ʹ PR
Λग़ͨ͠Β CI ্Ͱ PDF Λੜ ͯ֬͠ೝͰ͖ΔΑ͏ʹ͢Δɻ – git commit ͱ git push ͕ඞཁͰ खؒɻ – ΓؾܰʹϩʔΧϧͰ֬ೝ͍ͨ͠ɻ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ վળҊ2: ԾίϯςφΛ͏ DockerʢίϯςφԾԽϓϥοτϑΥʔϜʣ Λ͏ɻ – ΞϓϦέʔγϣϯͱͦͷґଘؔΛίϯς φͱݺΕΔύοέʔδʹ·ͱΊɺڥʹ ґଘͤͣʹҰ؏࣮ͯ͠ߦ͢ΔͨΊͷϓϥο
τϑΥʔϜɻ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͭ·Γʁ ࣗͷϚγϯڥʹ node ͳͲΛΠ ϯετʔϧ͢Δ͜ͱͳ͘ɺίϯςφ্Ͱ Կ͔Λ࣮ߦͰ͖Δɻ – ࣗͷڥʹىҼͨ͠Πϯετʔϧ࣮
ߦͰ͖ͳ͍ΛվળͰ͖Δʂ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ վળҊ2ͷ Docker Λ͏ ํͰਐΊΔ
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࠷ऴతͳखॱॻ make run ඞཁͳίϚϯυΛ makefile ʹهड़ͯ͠ ॱ࣮࣍ߦͤ͞Δɻ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ make run Ͱ࣮ߦ͞ΕΔ͜ͱ brew ΛΠϯετʔϧ 1. Docker ΛΠϯετʔϧ
2. colima ΛΠϯετʔϧ 3. colima Λىಈ 4. VivliostyleʢDocker ImageʣΛ࣮ ߦ 5. PDF Λ։͘ ※ 1ʙ4͢ͰʹΠϯετʔϧ/ى ಈ͞ΕͯͨΒεΩοϓ 6. ৄࡉ 1 1. άϩʔόϧڥΛՄೳͳݶΓԚછͤͣʹMarkdown͔Β൛ͷPDFΛੜʢΏΊΈେٕྛ '23ʣ
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ༻πʔϧ πʔϧ ༻్ brew macOS ͚ͷύοέʔδϚωʔδϟʔ Docker ίϯςφԾԽϓϥοτϑΥʔϜ
colima Docker ίϯςφΛ࣮ߦ͢ΔͨΊͷܰྔͳ Linux ϕʔεͷԾԽڥ Vivliostyle Webٕज़Λ༻͍ͯిࢠॻ੶ͷ࡞ɺදࣔɺҹΛՄೳʹ͢Δ CSS ϑϨ ʔϜϫʔΫ
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ colima Ͱ Docker Λ࣮ߦ͢ΔϋʔυϧΛԼ͛Δ Docker ίϯςφΛ࣮ߦ͢ΔͨΊʹɺඪ४Ͱ Docker Desktop
͕ΘΕΔɻ – Docker Desktop ैۀһ͕ 250 ਓҎ্ɺ·ͨ ؒऩӹ͕ 1,000 ສυϧҎ্ͷاۀ͕༻ར༻͢Δ ߹ʹ༗ྉͷαϒεΫϦϓγϣϯ͕ඞཁͱͳ Δɻ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ colima Ͱ Docker Λ࣮ߦ͢ΔϋʔυϧΛԼ͛Δ ΏΊΈͰࣾͷϥΠηϯεͷ͍ग़͠ਃ ͕ඞཁͱͳΔͨΊɺʮ୭Ͱ؆୯ʹʯͷϋʔ υϧ͕एׯ্͕ͬͯ͠·͏ɻ –
Docker Desktop Λସ͢Δ colima Λ༻͢ Δ͜ͱͰਃͷखؒΛվળɻ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ·ͱΊ త͋͘·Ͱࣥච͢Δ͜ͱɻٕज़తͳ͜ͱ ҙࣝ͠ͳ͍͍ͯ͘Α͏ͳΈͮ͘ΓΛ͢Δɻ – ͍Ζ͍ΖͳਓΛר͖ࠐΜͰࣥච׆ಈΛ͛ΔͨΊ ʹɺࢀೖোนΛԼ͛Δ͜ͱΛҙࣝ͢Δɻ – ࣥච࡞ۀ͕Ұ൪͠ΜͲ͍ͷͰɺͦΕҎ֎ͷ͜ͱ
ߟ͑ͤ͞ͳ͍ʂʂ –
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ٕॻത8ʹͯ
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͓٬͞Μʮʔɺ୭Ͱ…ʯ
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͓٬͞ΜʮWindows Ͱ ʁʯ
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ୭Ͱ macOS Ͱ
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ୭Ͱ؆୯ʹ ͷಓԕ ͍…
YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ