Angular Schematicsを利用した  アプリ量産体制

by Hayato OKUMOTO

Slide 1

Slide 1 text

Angular SchematicsΛར༻ͨ͠  ΞϓϦྔ࢈ମ੍ גࣜձࣾTwoGate औక໾CTO Ԟຊ൏

Slide 2

Slide 2 text

2 ࣗݾ঺հ Ԟຊ൏ w גࣜձࣾ5XP(BUFɹڞಉ૑ۀऀऔక໾$50 w ܦྺ w ௕໺ߴઐˠ๛ڮٕज़Պֶେֶग़਎ w 5XP(BUF૑ۀ։ൃຊ෦௕ w ೥݄ΑΓ

Slide 3

Slide 3 text

ࣄۀ಺༰ ɾ৽نࣄۀྖҬͷϞόΠϧΞϓϦ΍8FCΞϓϦͷ։ൃ͕ಘҙͳձࣾ ɾσβΠϯ͔ΒΠϯϑϥ·ͰҰؾ௨؏Ͱ։ൃ 3 ձࣾ֓ཁ https://twogate.com/ ઃཱ ɾ೥݄ઃཱʢظ໨ʣ ɾνʔϜͱͯ͠͸೥໨ ɾ໊த໊ͷߴઐੜͰ૑ۀɹݱࡏɺϑϧλΠϜ໊ن໛ʹ

Slide 4

Slide 4 text

4 5XP(BUFͷٕज़ελοΫ αʔόαΠυ ϑϩϯτΤϯυ ։ൃ؀ڥ Πϯϑϥ

Slide 5

Slide 5 text

5XP(BUFͷϓϩμΫτ

Slide 6

Slide 6 text

6 /PDPEF-PXDPEFιϦϡʔγϣϯ ϞόΠϧΦʔμʔ (ΞϓϦ) ΦϯϥΠϯΨνϟ (Web) ެࣜΞϓϦ (ΞϓϦˍ̬eb) Nocode Low code

Slide 7

Slide 7 text

7 σδλϧίϯςϯπ഑৴ιϦϡʔγϣϯ Ի੠ίϯςϯπΞϓϦ ϘΠείʔϧ഑৴ NFTൃߦ Coming soon…

Slide 8

Slide 8 text

Angular SchematicsΛར༻ͨ͠  Low codeΞϓϦྔ࢈ମ੍

Slide 9

Slide 9 text

w λϨϯτ΍ΞʔςΟετ޲͚ͷαΠτΞϓϦ w ෳ਺ͷΞʔςΟετͱಉډͨ͠αΠτ͸޷·Εʹ͍͘ w ݸผαΠτݸผΞϓϦͷχʔζ͕ߴ͍ w େ෺΄Ͳࡉ͔͍ݸผཁٻʹରԠ͕ඞཁͳέʔε͕͋Δ w ্هΛຬͨͭͭ͠খνʔϜͰ։ൃɾอकΛ͍ͯ͘͠ʹ͸ɺ޻෉͕ඞཁ 23 എܠ

Slide 10

Slide 10 text

w αΠτ͝ͱʹڞ௨෦෼ͱݸผ෦෼Λ࡞੒Ͱ͖ΔΑ͏ͳϓϩδΣΫτߏ੒Λ࣮ݱ͍ͨ͠ w ํ๏ w "ݩͷίʔυΛGPSLͯ͠ݸผίʔυʹ͢Δ w #ςϯϓϨʔτԽͯ͠ݸผίʔυʹ͢Δ w $ϥΠϒϥϦԽͯ͠෦෼తʹݸผίʔυʹ͢Δ w %ϊʔίʔυԽͯ͠ڞ௨ίʔυʹ͢Δ 24 ΞʔΩςΫνϟ

Slide 11

Slide 11 text

w αΠτ͝ͱʹڞ௨෦෼ͱݸผ෦෼Λ࡞੒Ͱ͖ΔΑ͏ͳϓϩδΣΫτߏ੒Λ࣮ݱ͍ͨ͠ w ํ๏ w "ݩͷίʔυΛGPSLͯ͠ݸผίʔυʹ͢Δ w #ςϯϓϨʔτԽͯ͠ݸผίʔυʹ͢Δ w $ϥΠϒϥϦԽͯ͠෦෼తʹݸผίʔυʹ͢Δ w %ϊʔίʔυԽͯ͠ڞ௨ίʔυʹ͢Δ 25 ΞʔΩςΫνϟ

Slide 12

Slide 12 text

26 "OHVMBS4DIFNBUJDT

Slide 13

Slide 13 text

w "OHVMBSϥΠϒϥϦ޲͚ͷίʔυδΣωϨʔλ w OHBEEOHHFOFSBUFOHVQEBUF࣌ʹ૸ΔεΫϦϓτ w ύοέʔδΛ௥Ճͨ͠ͱ͖ɺ/H.PEVMFͳͲʹఆٛΛೖΕͯ͘ΕΔ΍ͭ w ϥΠϒϥϦͷΞοϓσʔτͰΠϯλʔϑΣʔε͕มΘͬͨͱ͖ʹɺࣗಈஔ׵ͯ͠ ͘ΕΔ΍ͭ 27 "OHVMBS4DIFNBUJDT https://angular.jp/guide/schematics

Slide 14

Slide 14 text

w ॳظঢ়ଶͷςϯϓϨʔτϑΝΠϧ܈ w OHBEE͢ΔͱࣗಈͰ௥Ճ͞ΕΔ w ͦͷଞϑΝΠϧ഑ஔ΍มߋͷͨΊͷεΫϦϓτ΋ ࣮૷Մೳ w ςϯϓϨʔτΤϯδϯ΋༻ҙ͞Ε͓ͯΓɺม਺λ άΛຒΊΔͱϓϩδΣΫτݻ༗ͷ஋ʹ߹Θͤͯࣗ ಈઃఆͰ͖Δ 28 OHBEE༻ςϯϓϨʔτ

Slide 15

Slide 15 text

w ৽ػೳ௥Ճ΍վमޙʹ͸ɺ֤ϓϩδΣΫτͷίΞϥΠϒϥϦͷΞοϓσʔτ͕ඞཁ w طʹಈ͍͍ͯΔίʔυͰ͸ɺίʔυ͝ͱʹՃ޻͞Ε͍ͯΔ෦෼͕ੜͯ͘͡Δ w ࠩ෼ύονͷద༻͕ඞཁ w ͜ΕΛղܾ͢Δ࢓૊Έ΋4DIFNBUJDTͰ͸ߟྀ͞Ε͍ͯΔʢ༏लʣ 29 OHVQEBUF޲͚TDIFNBUJDT

Slide 16

Slide 16 text

30 OHVQEBUF޲͚TDIFNBUJDT w Ξοϓσʔτલޙͷόʔδϣϯ͔Βɺඞཁͳ ύονεΫϦϓτ͕࣮ߦ͞ΕΔ

Slide 17

Slide 17 text

31 ࢖͍ํΠϝʔδ Angular Project ng new awesome-gacha-site w ۭͬΆͷ"OHVMBSϓϩδΣΫτΛ࡞੒

Slide 18

Slide 18 text

32 ࢖͍ํΠϝʔδ Angular Project Angular Library ίΞػೳ ng add @twogate/slashkit-plus w ίΞػೳͷೖͬͨ"OHVMBS-JCSBSZΛ௥Ճ w 4DIFNBUJDTʹΑΓपลઃఆ͕શͯࣗಈηοτΞοϓ w 'JSFCBTF1SPKFDU࡞੒ʴ؀ڥม਺ઃఆ w ඪ४$44ςʔϚϑΝΠϧઃஔ w (JU-BC$*ఆٛϑΝΠϧઃஔ CSS Conﬁg Assets ͔͜͜ΒɺαΠτݻ༗ͷΞηοτ΍ઃఆΛม͑Δ͚ͩɻ

Slide 19

Slide 19 text

33 ࢖͍ํΠϝʔδ Angular Project git push … w (JU-BC(JU-BC$*ͰࣗಈϏϧυˍϦϦʔε w ࣾ಺Ͱ͸Ұ࿈ͷྲྀΕΛσβΠφʔͳͲඇΤϯδχΞ͕Ϧ Ϧʔε·ͰͰ͖Δঢ়ଶʹ git push … Deploy

Slide 20

Slide 20 text

34 ࢖͍ํΠϝʔδ Ұ੪Ξοϓσʔτ w (JU-BC$*ͷఆظ࣮ߦͰɺOHVQEBUFΛ(JU-BC಺ͷϦϙδτϦʹద༻͢ΔεΫϦϓτΛ࣮ ૷ɻ w όʔδϣϯ͕࠷৽Ͱͳ͔ͬͨΒɺ.FSHF3FRVFTUΛࣗಈ࡞੒ɻ

Slide 21

Slide 21 text

w ݱࡏσϞςφϯτ΋߹ΘͤΔͱɺϦϙδτϦ΄Ͳͷن໛ʹ w ݸผχʔζʹ΋Ԡ͑ΒΕͭͭɺӡ༻ίετ΋ͦΕͳΓʹ௿͘ରԠͰ͖͍ͯΔ w طଘͷςφϯτ͕଍͔ͤͰΞοϓσʔτͰ͖ͳ͔ͬͨέʔε͸΄΅ແ͠ w ҰํͰɺͦ͜·ͰΧελϚΠζཁ๬͕ͳ͍έʔε΋͋ΔͷͰɺڞ༗ϓϥοτϑΥʔ Ϝ൛΋༻ҙ͢Δ͜ͱΛݕ౼͍ͯ͠Δɻ 35 ӡ༻ͯ͠Έͯ

Slide 22

Slide 22 text

w "OHVMBS4DIFNBUJDTΛ׆༻ͨ͠-PX$PEFαΠτྔ࢈ମ੍ w $*΋׆༻ͨ͠΄΅ࣗಈͰͷӡ༻ମ੍ w 8FBSFIJSJOH w ΤϯλϝྖҬ΁શྗͰϓϩμΫτΛ։ൃ͍ͨ͠ɺ w "OHVMBSΤϯδχΞΛืू͍ͯ͠·͢ 36 ·ͱΊ