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

Transcript

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

2. ࣗݾ঺հ •ാத ༔࡞ • גࣜձࣾSpeee •ओʹRailsॻ͍ͯ·͢ɻ • Twitter: @hatappi •

   Github: hatappi • facebook: hatappi

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

4. ݖݶ؅ཧγεςϜ

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

6. ݱঢ়ͷݖݶ؅ཧ hatappi hoge admin hatappi guest hoge admin hatappi admin

   ݖݶ؅ཧ͸֤ΞϓϦέʔγϣϯ͝ͱʹ APP1 APP2

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

8. ޻਺͕ɾɾɾ

9. None

10. GoogleAppsͰ ղܾͰ͖ΔͷͰ͸ʁ

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

12. ݖݶAPIΛ࣮ݱ͢ΔͨΊʹ Spread Sheet Apps Script σʔλιʔεͱͯ͠࢖༻ ϢʔβʔͱΞϓϦέʔγϣϯͷ ݖݶΛ؅ཧ SpreadSheetͷૢ࡞ʹ࢖༻ ·ͨExecution

    APIʹΑΓAPIͷػೳ΋ ఏڙ

13. ߏ੒ਤ voyager markeshi p hoge admin admin fuga guest admin

    hatappi admin guest ɾɾɾ ϦΫΤετʹԠͯ͡ σʔλΛऔΓग़͢ ϨεϙϯεΛ JSONͰ͔͑͢ APP1 APP2

14. ߏ੒ਤ voyager markeshi p hoge admin admin fuga guest admin

    hatappi admin guest ϦΫΤετʹԠͯ͡ σʔλΛऔΓग़͢ ϨεϙϯεΛ JSONͰ͔͑͢ JSONͷϨεϙϯεͷॲཧͳͲ͸ ֤ΞϓϦέʔγϣϯʹʁʁʁ ɾɾɾ APP1 APP2

15. Akafuku

16. Akafuku? ݖݶ؅ཧgem
 ࡞੒ͨ͠GoogleAppsScriptͷAPIͷ ϨεϙϯεΛΑ͠ͳʹѻͬͯ͘ΕΔɻ ඞཁͳ৘ใ͸ARϥΠΫʹऔΓग़͢ ͜ͱ͕ग़དྷΔɻ require 'akafuku' Akafuku.find(‘hoge@example.com’) =>

    #<Akafuku:0x007fff2b378340 @authorites={"app1"=>"guest", "app2"=>2}, @post=1, @employment=1, @department=7>

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

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

19. Rails5 (Api mode) + Angular2

20. Rails5

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

22. Angular2

23. Angular1ͱ͸શ͘ผ෺Β͍͆͠

24. ཪΛฦͤ͹1Λ஌Βͳͯ͘΋ 2͔ΒೖΔ͜ͱ͕ग़དྷΔ

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

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

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

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

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

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

31. ೝূʹ͋ͨͬͯ Rails Apiʹ͸session΍cookieؔ࿈͕ͳ͍ͷͰɺ ࠓ·ͰͷΑ͏ͳcookieʹ৘ใΛ อ࣋͢ΔΑ͏ͳ͜ͱ͕ग़དྷͳ͍ɻ TokenBased Auth

32. TokenBased Auth

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

34. ͓ΘΓ