AkafukuとAngular2で行う基幹システム開発

by hatappi

Slide 1

Slide 1 text

੺෱ͱAngular2Ͱߦ͏جװγεςϜ։ൃ גࣜձࣾSpeee ։ൃ෦ WM։ൃϢχοτ ാத༔࡞

Slide 2

Slide 2 text

ࣗݾ঺հ •ാத ༔࡞ • גࣜձࣾSpeee •ओʹRailsॻ͍ͯ·͢ɻ • Twitter: @hatappi • Github: hatappi • facebook: hatappi

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ •ݖݶ؅ཧγεςϜ •Angular2 + Rails ApiͰͷ ΞϓϦέʔγϣϯ࡞੒

Slide 4

Slide 4 text

ݖݶ؅ཧγεςϜ

Slide 5

Slide 5 text

ݱঢ়ͷݖݶ؅ཧ ࢲͷࣄۀ෦Ͱ͸ෳ਺ͷϓϩμΫτ͕ ੜΈग़͞Ε͍ͯΔ •ੲPHPͰ  ͔͔ΕͨϓϩμΫτ  ଟ਺ •RailsͰ͔͔Εͨ  ϓϩμΫτɻ  PHP͔ΒϦϓϨΠε  ͍ͯ͠Δ΋ͷ΋͋Δ

Slide 6

Slide 6 text

ݱঢ়ͷݖݶ؅ཧ hatappi hoge admin hatappi guest hoge admin hatappi admin ݖݶ؅ཧ͸֤ΞϓϦέʔγϣϯ͝ͱʹ APP1 APP2

Slide 7

Slide 7 text

ݖݶ؅ཧ༻ͷαʔϏε࡞Δʁ

Slide 8

Slide 8 text

޻਺͕ɾɾɾ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

GoogleAppsͰ ղܾͰ͖ΔͷͰ͸ʁ

Slide 11

Slide 11 text

GoogleApps ? •99.9% ͷՔಇ཰͕อূ͞Εͨ Google ͷఏڙ͢ Δάϧʔϓ΢ΣΞ •WebͰͷπʔϧఏڙʹͳΔͷͰΠϯλʔωοτ ʹ઀ଓͰ͖͍ͯΕ͹࢖༻Λ͸͡ΊΔ͜ͱ͕Ͱ͖ Δ

Slide 12

Slide 12 text

ݖݶAPIΛ࣮ݱ͢ΔͨΊʹ Spread Sheet Apps Script σʔλιʔεͱͯ͠࢖༻ ϢʔβʔͱΞϓϦέʔγϣϯͷ ݖݶΛ؅ཧ SpreadSheetͷૢ࡞ʹ࢖༻ ·ͨExecution APIʹΑΓAPIͷػೳ΋ ఏڙ

Slide 13

Slide 13 text

ߏ੒ਤ voyager markeshi p hoge admin admin fuga guest admin hatappi admin guest ɾɾɾ ϦΫΤετʹԠͯ͡ σʔλΛऔΓग़͢ ϨεϙϯεΛ JSONͰ͔͑͢ APP1 APP2

Slide 14

Slide 14 text

ߏ੒ਤ voyager markeshi p hoge admin admin fuga guest admin hatappi admin guest ϦΫΤετʹԠͯ͡ σʔλΛऔΓग़͢ ϨεϙϯεΛ JSONͰ͔͑͢ JSONͷϨεϙϯεͷॲཧͳͲ͸ ֤ΞϓϦέʔγϣϯʹʁʁʁ ɾɾɾ APP1 APP2

Slide 15

Slide 15 text

Akafuku

Slide 16

Slide 16 text

Akafuku? ݖݶ؅ཧgem  ࡞੒ͨ͠GoogleAppsScriptͷAPIͷ ϨεϙϯεΛΑ͠ͳʹѻͬͯ͘ΕΔɻ ඞཁͳ৘ใ͸ARϥΠΫʹऔΓग़͢ ͜ͱ͕ग़དྷΔɻ require 'akafuku' Akafuku.ﬁnd(‘[email protected]’) => #"guest", "app2"=>2}, @post=1, @employment=1, @department=7>

Slide 17

Slide 17 text

Akafukuͷࢫຯ •ΞϓϦέʔγϣϯଆͰͷߋ৽ର Ԡ͸bundle update •εϓϨουγʔτΛ੾Γସ͑Ε ͹ଞࣄۀ෦΁ͷԣల։΋Մೳ

Slide 18

Slide 18 text

ݖݶ؅ཧͷ·ͱΊ •αʔόʔϨεͰ  ݖݶ؅ཧAPIͷ࡞੒ •gemΛ࡞੒͢Δ͜ͱͰࠓޙͷΞ ϓϦέʔγϣϯ΁ͷಋೖͷ͠΍ ͢͞Λఏڙ

Slide 19

Slide 19 text

Rails5 (Api mode) + Angular2

Slide 20

Slide 20 text

Rails5

Slide 21

Slide 21 text

Rails5 (api mode) assets΍view΍helperͳͲapiͰ͸ඞ ཁͷͳ͍΋ͷ͕ফ͍͑ͯΔɻ cookieͱ͔sessionपΓ΋ͳ͍

Slide 22

Slide 22 text

Angular2

Slide 23

Slide 23 text

Angular1ͱ͸શ͘ผ෺Β͍͆͠

Slide 24

Slide 24 text

ཪΛฦͤ͹1Λ஌Βͳͯ͘΋ 2͔ΒೖΔ͜ͱ͕ग़དྷΔ

Slide 25

Slide 25 text

ॲཧ଎౓ͷ޲্ Angular1ܥͷ࣌ΑΓ΋2.7ഒͷε ϐʔυ͕ग़Δͱͷ͜ͱ

Slide 26

Slide 26 text

ίϯϙʔωϯτࢦ޲ UIύʔπ͝ͱʹ෼ׂ ϓϩύςΟ΍ΠϕϯτϋϯυϥͳͲ Λίϯϙʔωϯτͷதʹ·ͱΊΔ ίϯϙʔωϯτ͸࠶ར༻͕Մೳ

Slide 27

Slide 27 text

TypeScript͕ਪ঑ ੩తܕ෇͚ݴޠͷίϯύΠϧΤϥʔ ͰTypo΍syntaxΤϥʔʹ͖ͮ͘͜ͱ ͕ग़དྷΔɻ IDEͰ͸ܕ৘ใ͔Βͷิ׬ػೳ͕࢖ ༻͢Δ͜ͱ͕ग़དྷΔ

Slide 28

Slide 28 text

Angularͷબఆʹ͋ͨͬͯ ֶशίετ͸ߴΊ͕ͩɺඞཁͳػೳ ͸ϏϧυΠϯ͞Ε͍ͯΔͷͰɺҰ౓ ֮͑ͯ͠·͑͹ɺ։ൃʹूதͰ͖Δ ࣾ಺ʹAngularΛ͔͍͍ͯͨํ͕͍ ͨ ↑ ͳΜ͔ͩΜͩͰܾΊͯ͸ίί͸େ ͖͔ͬͨ

Slide 29

Slide 29 text

FrontͱBackΛΘ͚Δͱ •ϦϙδτϦ͝ͱ෼͔ΕΔͷͰɺσϓϩΠ͕૒ํ ʹࠨӈ͞Εͳ͍ •ԾʹAngular͕ବ໨ʹͳͬͨͱͯ͠΋FrontͷΈ Λվम͢Δ͜ͱͰରԠ͕Ͱ͖Δ •ೝূपΓʹ͸޻෉͕ඞཁ

Slide 30

Slide 30 text

FrontͱBackΛΘ͚Δͱ •ϦϙδτϦ͝ͱ෼͔ΕΔͷͰɺσϓϩΠ͕૒ํ ʹࠨӈ͞Εͳ͍ •ԾʹAngular͕ବ໨ʹͳͬͨͱͯ͠΋FrontͷΈ Λվम͢Δ͜ͱͰରԠ͕Ͱ͖Δ •ೝূपΓʹ͸޻෉͕ඞཁ

Slide 31

Slide 31 text

ೝূʹ͋ͨͬͯ Rails Apiʹ͸session΍cookieؔ࿈͕ͳ͍ͷͰɺ ࠓ·ͰͷΑ͏ͳcookieʹ৘ใΛ อ࣋͢ΔΑ͏ͳ͜ͱ͕ग़དྷͳ͍ɻ TokenBased Auth

Slide 32

Slide 32 text

TokenBased Auth

Slide 33

Slide 33 text

ॴײ •Angular2ָ͍͠!! ͲΜͲΜνϟϯδ͍ͯ͜͠͏ •gemԽ͓ͯ͘͠ͱԿ͔ͱศར

Slide 34

Slide 34 text

͓ΘΓ