Upgrade to Pro — share decks privately, control downloads, hide ads and more …

お盆にポータルサイトをSPAでリリースした

C582b722e015633f7900083f8ea75732?s=47 hatappi
August 24, 2016

 お盆にポータルサイトをSPAでリリースした

Angular2とRails5 api modeで作成したポータルサイトの話

C582b722e015633f7900083f8ea75732?s=128

hatappi

August 24, 2016
Tweet

Transcript

  1. ͓ຍʹϙʔλϧαΠτΛϦϦʔεͨ͠ 2016/08/17 @Speee LTେձ

  2. ࣗݾ঺հ • @hatappi (yusaku.hatanaka) • ذෞग़਎ • ࠷ۙ͸Angular2Λॻ͍ͨΓRailsॻ͍ͨ Γͯ͠·͢

  3. ੈͷதʹ͋Γ;ΕΔ֤ۀքͷϙʔλϧ αΠτ

  4. ͳΜ͔୳͠ʹ͍͘ɾɾɾ

  5. ࡞Ζ͏ʂʂ

  6. ࡞ͬͨ!! • ׬੒ͨ͠΋ͷ͸༁͋ͬͯݟͤΒΕ·ͤΜ

  7. ·ͣ͸ڝ߹ͷ෼ੳ͔Β

  8. None
  9. None
  10. ٕज़બఆɹ • Rails5 api mode • Angular2.rc4 • GCP

  11. Rails5 api mode ݩʑ͸gemͩͬͨrails-api͕RailsʹϚʔδ͞Εͨ • helper΍assets, views͕ͬͦ͝Γফ͑ͯΔ • cookieͱ͔session storeͷఆٛ΋ͳ͚Ε͹assets΋ͳ͍

  12. Angular2 Google੡ͷJSϑϨʔϜϫʔΫ ݩʑ͋ͬͨAngular1ͷޙܧ͕ͩޓ׵ੑ͸΄ͱΜͲͳ͍ͱͷ͜ͱ! ਖ਼ࣜϦϦʔε͸͞Ε͓ͯΒͣ࠷৽͸rc5 rc6͕ग़ΔΒ͍͕͠େ͖ͳΞοϓσʔτ͸rc5ͰऴΘΓΒ͍͠

  13. GCP • railsͱangularʹؔͯ͠͸GCE(AWSͰ͍ ͏EC2) • ը૾ͷ഑৴ʹؔͯ͠͸GCS(AWSͰ͍͏ ͱ͜ͷS3)ʹ͓͖ɺͦͷ··CDNͱ͠ ͯ࢖͏ • GCE͸let's

    encryptͰূ໌ॻΛͱͬͯɺ http/2Ͱఏڙ
  14. ࠓճ͸Railsͱ͍͏͔JSONΑΓͷ࿩

  15. Έͳ͞Μ͸RailsͰJSONͷϨεϙϯε Λฦ͢͜ͱ͕͋Γ·͔͢ʁ

  16. ༻్͸༷ʑ • ΞϓϦͱ͔Ͱ࢖༻͢ΔAPIαʔόʔͷߏங࣌ • AJAXͰ௨৴Λ͢Δ࣌ • etc...

  17. RFC4627,7159ʹJSONͷ࢓༷͕͔͔Ε ͍ͯΔ • arrayͷ։࢝ʹ͸ [ ɺऴྃʹ͸ ] • ஋ͷ۠੾Γʹ͸ ,

    • string͸ " Ͱғ΋͏ • etc...
  18. RFC4627,7159ʹJSONͷ࢓༷͕͔͔Ε ͍ͯΔ • arrayͷ։࢝ʹ͸ [ ɺऴྃʹ͸ ] • ஋ͷ۠੾Γʹ͸ ,

    • string͸ " Ͱғ΋͏ • etc... ࢓༷कͬͯ͋Ε͹ޙ͸ࣗ༝
  19. /users { "result":[ { "id":1, "name":"yusaku.hatanaka" }, { "id":2, "name":"hoge.taro"

    } ] }
  20. /users { "response":{ "status":200, "users":[ { "id":1, "name":"yusaku.hatanaka" }, {

    "id":2, "name":"hoge.taro" } ] } }
  21. ϑΥʔϚοτ͕ఆ·Βͳ͍!

  22. ϑϩϯτܹ͓͜! • API͝ͱʹϨεϙϯεͷܗ͕ࣜҟͳΔͷͰɺͦΕͧΕͰύʔαʔ Λॻ͔ͳ͍ͱ͍͚ͳ͍

  23. ੈͷதʹ͸JSONͷϑΥʔϚοτΛఆ Ίͨ΋ͷ͕͋Δ

  24. HAL

  25. { "_links": { "self": { "href": "/comments/1" } }, "id":

    1, "message": "LTେձʹࢀՃͯ͠·͢", "_embedded": { "user": { "_links": { "self": { "href": "/users/7" } }, "id": 7, "name": "yusaku.hatanaka" } } }
  26. JSON:API

  27. { "data":{ "id":"1", "type":"users", "links":{ "self":"http://hoge.com/users/1" }, "attributes":{ "name":"yusaku.hatanaka" },

    "relationships":{ "comments":{ "links":{ "self":"http://hoge.com/users/1/relationships/comments", "related":"http://hoge.com/users/1/comments" }, "data":{ "type":"comments", "id":"8" } } }, "included":[ { "id":"8", "type":"comments", "links":{ "self":"http://hoge.com/comments/8" }, "attributes":{ "context":"LTେձʹࢀՃͯ͠·͢" }, "relationships":{ } } ] } }
  28. JSON:APIͱHAL • HAL • intergent draftʹೖ͍ͬͯΔ • AWSͷAPIGatewayͰ࢖༻͞Ε͍ͯΔ࣮੷ • JSON:API

    • error࣌ͷϨεϙϯεͳͲͷݴٴ΋͋Δ • ձࣾͷϓϩμΫτͰ࢖༻͞Ε͍ͯΔ࣮੷ • GET͚ͩͰͳ͘ɺPOST΍DELETEͳͲCRUD΁ͷݴٴ΋͋Δ
  29. ͦΕͧΕͷϑΥʔϚοτͰϨεϙϯε Λฦ͠΍͘͢͢Δgem΋͋Δ • HAL => apotonick/roar • JSON:API => cerebris/jsonapi-resources

  30. ·ͱΊ • ෳ਺ਓͰ։ൃ͢Δࡍʹ͸JSONͷϑΥʔϚοτΛ͖Ί͓ͯ͘ͱɺ ϑϩϯτͱ஥ྑ͘ͳΕΔʢ͔΋͠Εͳ͍ʣ • νʔϜ಺ͰܾΊͯ΋ྑ͍͕ɺάμάμʹͳΒͳ͍Α͏ʹ

  31. ࠷ޙʹ

  32. None
  33. ΞΫηε͸·ͩ·ͩ

  34. index͸1݅ɾɾɾɾ ͜͜͸·༷ͩࢠݟ ΋͔ͨ͠͠ΒSPAͰ࡞ͬͨ͜ͱʹΑΓbot͕͏·͘ճ༡ग़དྷͯͳ͍ ͔΋͠Εͳ͍

  35. ౰໘͸index਺Λ૿΍͍ͯ͘͠