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
73
誰でも簡単に組版した 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
HIG の歴史
yusuga
1
37
WWDC 2023 現地参加報告(コード編)
yusuga
0
140
マイク環境を考える
yusuga
0
36
Custom AppをIP制限ありのままで審査に通す方法
yusuga
0
5.6k
Swiftのas Any / AnyObjectの暗黙的な型変換について
yusuga
2
1.6k
ローカルのグローバル環境を可能な限り汚染しないXcodeの開発環境構築
yusuga
0
70
Pure DI 101
yusuga
0
210
Final conclusion of the iOS architecture
yusuga
0
270
Practical application of ReactorKit
yusuga
1
360
Other Decks in Technology
See All in Technology
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
0
120
WACATE2024冬セッション資料(ユーザビリティ)
scarletplover
0
210
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
350
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
17
14k
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
17
4.6k
権威ドキュメントで振り返る2024 #年忘れセキュリティ2024
hirotomotaguchi
2
750
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
170
継続的にアウトカムを生み出し ビジネスにつなげる、 戦略と運営に対するタイミーのQUEST(探求)
zigorou
0
590
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
390
PHPerのための計算量入門/Complexity101 for PHPer
hanhan1978
5
170
podman_update_2024-12
orimanabu
1
280
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
67
4.4k
Code Review Best Practice
trishagee
65
17k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
450
How to Think Like a Performance Engineer
csswizardry
22
1.2k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
A better future with KSS
kneath
238
17k
Optimising Largest Contentful Paint
csswizardry
33
3k
Producing Creativity
orderedlist
PRO
341
39k
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 ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ