Slide 1

Slide 1 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ୭Ͱ΋؆୯ʹ૊൛ͨ͠ PDF Λ ੜ੒͢Δ࢓૊Έͮ͘Γ 2023-08-23

Slide 2

Slide 2 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࣗݾ঺հ ੁݪ ༞ Twitter: @yusuga_ גࣜձࣾΏΊΈ: iOS ςοΫϦʔυ ߹ಉձࣾϐίε: ୅දࣾһ

Slide 3

Slide 3 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࣥචͷྲྀΕ Markdown ϑΝΠϧͰهࣄΛॻ͘ɻ 1. Vivliostyle Ͱ Markdown ͔Β૊൛ͨ͠ PDF Λੜ ੒͢Δɻ 2. PDF Λݟ࣮ͯࡍͷࢴ໘ͷϨΠΞ΢τࠐΈͰ಺ ༰Λ֬ೝ͢Δʢमਖ਼͕͋Ε͹ 1 ΁໭Δʣɻ 3.

Slide 4

Slide 4 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ Vivliostyle ͱ͸ Webٕज़Λ༻͍ͯిࢠॻ੶ͷ࡞੒ɺද ࣔɺҹ࡮ΛՄೳʹ͢ΔCSSϑϨʔϜϫ ʔΫɻ –

Slide 5

Slide 5 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ Vivliostyle ΛΠϯετʔϧ͢Δʂ # install Volta curl https://get.volta.sh | bash # install Node volta install node # ࣮ߦͰ͖Δ͔֬ೝ # μϝͩͬͨΒ `$HOME/.volta/bin` ʹ `PATH` ͕௨͍ͬͯ Δ͔֬ೝ volta --version

Slide 6

Slide 6 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ Vivliostyle ΛΠϯετʔϧ ͢Δʂ # ґଘϥΠϒϥϦΛΠϯετʔϧ yarn install # ࣮ߦͰ͖Δ͔֬ೝ yarn vivliostyle --version

Slide 7

Slide 7 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ PDF Λੜ੒͢Δʂ # vivliostyle Ͱ PDF Λੜ੒ yarn build # PDF Λ։͘ open ./book/output/ebook.pdf

Slide 8

Slide 8 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ՝୊

Slide 9

Slide 9 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ લఏ஌͕ࣝඞཁ curl – node – volta – yarn – PATH ͕௨Δͱ͸ʁ –

Slide 10

Slide 10 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࣮ߦͷखؒ खॱॻ௨Γʹෳ਺ͷίϚϯυΛखಈͰ ࣮ߦ͠ͳ͚Ε͹ͳΒͳ͍ɻ –

Slide 11

Slide 11 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ؀ڥىҼͷ໰୊ ࣗ਎ͷϚγϯ؀ڥʹ௚઀πʔϧΛΠϯετ ʔϧ͢ΔͱɺͦΕͧΕͷ؀ڥͷঢ়گʹΑͬ ͯ͸͏·͘ΠϯετʔϧͰ͖ͳ͔ͬͨΓ࣮ ߦʹࣦഊ͢Δ͜ͱ͕͋Δɻ –

Slide 12

Slide 12 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ৭ʑͳਓʹࣥචͯ͠΋Β͍ͨ ͍ Web ͷ։ൃऀͳΒೃછΈ͕͋Δπʔϧͳ ͷͰͦͪΒ͸ࢀೖোน͸௿Ίɻ – iOSɺAndroidɺσβΠφʹ͸एׯϋʔυϧ ͕ߴ͍ɻ –

Slide 13

Slide 13 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ໨త ࢲͨͪ͸ node, volta, yarn, Vivliostyle ʹ͍ͭͯ͸ ߟ͑ͨ͘ͳ͍ʂ – ͨͩ୯ʹ Markdown ͰهࣄΛॻ͍ͯɺͦΕΛ֬ ೝ͢ΔͨΊʹ PDF Λੜ੒͍͚ͨͩ͠ ͳΜͩ…ʂ –

Slide 14

Slide 14 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ PDF Λੜ੒͢Δ ϋʔυϧΛԼ͛Δʂ

Slide 15

Slide 15 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ վળҊ1: CI Ͱ PDF Λੜ੒ GitHub ʹ PR Λग़ͨ͠Β CI ্Ͱ PDF Λੜ ੒ͯ֬͠ೝͰ͖ΔΑ͏ʹ͢Δɻ – git commit ͱ git push ͕ඞཁͰ खؒɻ – ΍͸ΓؾܰʹϩʔΧϧͰ֬ೝ͍ͨ͠ɻ –

Slide 16

Slide 16 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ վળҊ2: Ծ૝ίϯςφΛ࢖͏ DockerʢίϯςφԾ૝ԽϓϥοτϑΥʔϜʣ Λ࢖͏ɻ – ΞϓϦέʔγϣϯͱͦͷґଘؔ܎Λίϯς φͱݺ͹ΕΔύοέʔδʹ·ͱΊɺ؀ڥʹ ґଘͤͣʹҰ؏࣮ͯ͠ߦ͢ΔͨΊͷϓϥο τϑΥʔϜɻ –

Slide 17

Slide 17 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͭ·Γʁ ࣗ਎ͷϚγϯ؀ڥʹ௚઀ node ͳͲΛΠ ϯετʔϧ͢Δ͜ͱͳ͘ɺίϯςφ্Ͱ Կ͔Λ࣮ߦͰ͖Δɻ – ࣗ਎ͷ؀ڥʹىҼͨ͠Πϯετʔϧ΍࣮ ߦͰ͖ͳ͍໰୊ΛվળͰ͖Δʂ –

Slide 18

Slide 18 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ վળҊ2ͷ Docker Λ࢖͏ ํ਑ͰਐΊΔ

Slide 19

Slide 19 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࠷ऴతͳखॱॻ make run ඞཁͳίϚϯυΛ makefile ʹهड़ͯ͠ ॱ࣮࣍ߦͤ͞Δɻ –

Slide 20

Slide 20 text

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ʣ

Slide 21

Slide 21 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ࢖༻πʔϧ πʔϧ ༻్ brew macOS ޲͚ͷύοέʔδϚωʔδϟʔ Docker ίϯςφԾ૝ԽϓϥοτϑΥʔϜ colima Docker ίϯςφΛ࣮ߦ͢ΔͨΊͷܰྔͳ Linux ϕʔεͷԾ૝Խ؀ڥ Vivliostyle Webٕज़Λ༻͍ͯిࢠॻ੶ͷ࡞੒ɺදࣔɺҹ࡮ΛՄೳʹ͢Δ CSS ϑϨ ʔϜϫʔΫ

Slide 22

Slide 22 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ colima Ͱ Docker Λ࣮ߦ͢ΔϋʔυϧΛԼ͛Δ Docker ίϯςφΛ࣮ߦ͢ΔͨΊʹ͸ɺඪ४Ͱ͸ Docker Desktop ͕࢖ΘΕΔɻ – Docker Desktop ͸ैۀһ͕ 250 ਓҎ্ɺ·ͨ͸೥ ؒऩӹ͕ 1,000 ສυϧҎ্ͷاۀ͕঎༻ར༻͢Δ ৔߹ʹ͸༗ྉͷαϒεΫϦϓγϣϯ͕ඞཁͱͳ Δɻ –

Slide 23

Slide 23 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ colima Ͱ Docker Λ࣮ߦ͢ΔϋʔυϧΛԼ͛Δ ΏΊΈͰ͸ࣾ಺ͷϥΠηϯεͷ෷͍ग़͠ਃ੥ ͕ඞཁͱͳΔͨΊɺʮ୭Ͱ΋؆୯ʹʯͷϋʔ υϧ͕एׯ্͕ͬͯ͠·͏ɻ – Docker Desktop Λ୅ସ͢Δ colima Λ࢖༻͢ Δ͜ͱͰਃ੥ͷखؒΛվળɻ –

Slide 24

Slide 24 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ·ͱΊ ໨త͸͋͘·Ͱ΋ࣥච͢Δ͜ͱɻٕज़తͳ͜ͱ͸ ҙࣝ͠ͳͯ͘΋͍͍Α͏ͳ࢓૊Έͮ͘ΓΛ͢Δɻ – ͍Ζ͍ΖͳਓΛר͖ࠐΜͰࣥච׆ಈΛ޿͛ΔͨΊ ʹ͸ɺࢀೖোนΛԼ͛Δ͜ͱΛҙࣝ͢Δɻ – ࣥච࡞ۀ͕Ұ൪͠ΜͲ͍ͷͰɺͦΕҎ֎ͷ͜ͱ͸ ߟ͑ͤ͞ͳ͍ʂʂ –

Slide 25

Slide 25 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ٕॻത8ʹͯ

Slide 26

Slide 26 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͓٬͞Μʮ΁ʔɺ୭Ͱ΋…ʯ

Slide 27

Slide 27 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͓٬͞ΜʮWindows Ͱ ΋ʁʯ

Slide 28

Slide 28 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ୭Ͱ΋ macOS Ͱ

Slide 29

Slide 29 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ୭Ͱ΋؆୯ʹ ΁ͷಓ͸ԕ ͍…

Slide 30

Slide 30 text

YUMEMI.grow ٕज़ಉਓࢽΛࢧ͑Δٕज़ ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ