誰でも簡単に組版した PDF を生成する仕組みづくり

YUMEMI.grow 技術同人誌を支える技術
https://yumemi.connpass.com/event/291439/

Transcript

1. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ୭Ͱ΋؆୯ʹ૊൛ͨ͠ PDF Λ ੜ੒͢Δ࢓૊Έͮ͘Γ 2023-08-23
2. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࣗݾ঺հ ੁݪ ༞ Twitter: @yusuga_ גࣜձࣾΏΊΈ: iOS ςοΫϦʔυ ߹ಉձࣾϐίε: ୅දࣾһ
3. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࣥචͷྲྀΕ Markdown ϑΝΠϧͰهࣄΛॻ͘ɻ 1. Vivliostyle Ͱ Markdown ͔Β૊൛ͨ͠ PDF Λੜ ੒͢Δɻ 2. PDF Λݟ࣮ͯࡍͷࢴ໘ͷϨΠΞ΢τࠐΈͰ಺ ༰Λ֬ೝ͢Δʢमਖ਼͕͋Ε͹ 1 ΁໭Δʣɻ 3.
4. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ Vivliostyle ͱ͸ Webٕज़Λ༻͍ͯిࢠॻ੶ͷ࡞੒ɺද ࣔɺҹ࡮ΛՄೳʹ͢ΔCSSϑϨʔϜϫ ʔΫɻ –
5. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ Vivliostyle ΛΠϯετʔϧ͢Δʂ # install Volta curl https://get.volta.sh | bash # install Node volta install node # ࣮ߦͰ͖Δ͔֬ೝ # μϝͩͬͨΒ `$HOME/.volta/bin` ʹ `PATH` ͕௨͍ͬͯ Δ͔֬ೝ volta --version
6. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ Vivliostyle ΛΠϯετʔϧ ͢Δʂ # ґଘϥΠϒϥϦΛΠϯετʔϧ yarn install # ࣮ߦͰ͖Δ͔֬ೝ yarn vivliostyle --version
7. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ PDF Λੜ੒͢Δʂ # vivliostyle Ͱ PDF Λੜ੒ yarn build # PDF Λ։͘ open ./book/output/ebook.pdf
8. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ՝୊
9. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ લఏ஌͕ࣝඞཁ curl – node – volta – yarn – PATH ͕௨Δͱ͸ʁ –
10. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࣮ߦͷखؒ खॱॻ௨Γʹෳ਺ͷίϚϯυΛखಈͰ ࣮ߦ͠ͳ͚Ε͹ͳΒͳ͍ɻ –
11. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ؀ڥىҼͷ໰୊ ࣗ਎ͷϚγϯ؀ڥʹ௚઀πʔϧΛΠϯετ ʔϧ͢ΔͱɺͦΕͧΕͷ؀ڥͷঢ়گʹΑͬ ͯ͸͏·͘ΠϯετʔϧͰ͖ͳ͔ͬͨΓ࣮ ߦʹࣦഊ͢Δ͜ͱ͕͋Δɻ –
12. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ৭ʑͳਓʹࣥචͯ͠΋Β͍ͨ ͍ Web ͷ։ൃऀͳΒೃછΈ͕͋Δπʔϧͳ ͷͰͦͪΒ͸ࢀೖোน͸௿Ίɻ – iOSɺAndroidɺσβΠφʹ͸एׯϋʔυϧ ͕ߴ͍ɻ –
13. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ໨త ࢲͨͪ͸ node, volta, yarn, Vivliostyle ʹ͍ͭͯ͸ ߟ͑ͨ͘ͳ͍ʂ – ͨͩ୯ʹ Markdown ͰهࣄΛॻ͍ͯɺͦΕΛ֬ ೝ͢ΔͨΊʹ PDF Λੜ੒͍͚ͨͩ͠ ͳΜͩ…ʂ –
14. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ PDF Λੜ੒͢Δ ϋʔυϧΛԼ͛Δʂ
15. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ վળҊ1: CI Ͱ PDF Λੜ੒ GitHub ʹ PR Λग़ͨ͠Β CI ্Ͱ PDF Λੜ ੒ͯ֬͠ೝͰ͖ΔΑ͏ʹ͢Δɻ – git commit ͱ git push ͕ඞཁͰ खؒɻ – ΍͸ΓؾܰʹϩʔΧϧͰ֬ೝ͍ͨ͠ɻ –
16. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ վળҊ2: Ծ૝ίϯςφΛ࢖͏ DockerʢίϯςφԾ૝ԽϓϥοτϑΥʔϜʣ Λ࢖͏ɻ – ΞϓϦέʔγϣϯͱͦͷґଘؔ܎Λίϯς φͱݺ͹ΕΔύοέʔδʹ·ͱΊɺ؀ڥʹ ґଘͤͣʹҰ؏࣮ͯ͠ߦ͢ΔͨΊͷϓϥο τϑΥʔϜɻ –
17. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͭ·Γʁ ࣗ਎ͷϚγϯ؀ڥʹ௚઀ node ͳͲΛΠ ϯετʔϧ͢Δ͜ͱͳ͘ɺίϯςφ্Ͱ Կ͔Λ࣮ߦͰ͖Δɻ – ࣗ਎ͷ؀ڥʹىҼͨ͠Πϯετʔϧ΍࣮ ߦͰ͖ͳ͍໰୊ΛվળͰ͖Δʂ –
18. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ վળҊ2ͷ Docker Λ࢖͏ ํ਑ͰਐΊΔ
19. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࠷ऴతͳखॱॻ make run ඞཁͳίϚϯυΛ makefile ʹهड़ͯ͠ ॱ࣮࣍ߦͤ͞Δɻ –
20. 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ʣ
21. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࢖༻πʔϧ πʔϧ ༻్ brew macOS ޲͚ͷύοέʔδϚωʔδϟʔ Docker ίϯςφԾ૝ԽϓϥοτϑΥʔϜ colima Docker ίϯςφΛ࣮ߦ͢ΔͨΊͷܰྔͳ Linux ϕʔεͷԾ૝Խ؀ڥ Vivliostyle Webٕज़Λ༻͍ͯిࢠॻ੶ͷ࡞੒ɺදࣔɺҹ࡮ΛՄೳʹ͢Δ CSS ϑϨ ʔϜϫʔΫ
22. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ colima Ͱ Docker Λ࣮ߦ͢ΔϋʔυϧΛԼ͛Δ Docker ίϯςφΛ࣮ߦ͢ΔͨΊʹ͸ɺඪ४Ͱ͸ Docker Desktop ͕࢖ΘΕΔɻ – Docker Desktop ͸ैۀһ͕ 250 ਓҎ্ɺ·ͨ͸೥ ؒऩӹ͕ 1,000 ສυϧҎ্ͷاۀ͕঎༻ར༻͢Δ ৔߹ʹ͸༗ྉͷαϒεΫϦϓγϣϯ͕ඞཁͱͳ Δɻ –
23. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ colima Ͱ Docker Λ࣮ߦ͢ΔϋʔυϧΛԼ͛Δ ΏΊΈͰ͸ࣾ಺ͷϥΠηϯεͷ෷͍ग़͠ਃ੥ ͕ඞཁͱͳΔͨΊɺʮ୭Ͱ΋؆୯ʹʯͷϋʔ υϧ͕एׯ্͕ͬͯ͠·͏ɻ – Docker Desktop Λ୅ସ͢Δ colima Λ࢖༻͢ Δ͜ͱͰਃ੥ͷखؒΛվળɻ –
24. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ·ͱΊ ໨త͸͋͘·Ͱ΋ࣥච͢Δ͜ͱɻٕज़తͳ͜ͱ͸ ҙࣝ͠ͳͯ͘΋͍͍Α͏ͳ࢓૊Έͮ͘ΓΛ͢Δɻ – ͍Ζ͍ΖͳਓΛר͖ࠐΜͰࣥච׆ಈΛ޿͛ΔͨΊ ʹ͸ɺࢀೖোนΛԼ͛Δ͜ͱΛҙࣝ͢Δɻ – ࣥච࡞ۀ͕Ұ൪͠ΜͲ͍ͷͰɺͦΕҎ֎ͷ͜ͱ͸ ߟ͑ͤ͞ͳ͍ʂʂ –
25. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ٕॻത8ʹͯ
26. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͓٬͞Μʮ΁ʔɺ୭Ͱ΋…ʯ
27. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͓٬͞ΜʮWindows Ͱ ΋ʁʯ
28. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ୭Ͱ΋ macOS Ͱ
29. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ୭Ͱ΋؆୯ʹ ΁ͷಓ͸ԕ ͍…
30. YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ