Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
お盆にポータルサイトをSPAでリリースした
Search
hatappi
August 24, 2016
Technology
0
1.5k
お盆にポータルサイトをSPAでリリースした
Angular2とRails5 api modeで作成したポータルサイトの話
hatappi
August 24, 2016
Tweet
Share
More Decks by hatappi
See All by hatappi
Cloudflare を活用して変わったメルカリの開発体験 / How Cloudflare Changed Mercari's Development Experience
hatappi
1
660
RubyではじめるGraphQL
hatappi
0
860
RubyでChainerつくってます!!
hatappi
2
1.4k
TDDな個人開発
hatappi
0
310
できるだけ楽して楽しくRails開発しよう
hatappi
2
330
EKSにRailsをのせた
hatappi
1
1.2k
RubyとApache Arrow
hatappi
0
2.4k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2.4k
Fargateで夢は見られるのか
hatappi
1
2.2k
Other Decks in Technology
See All in Technology
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
640
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
「AI2027」を紐解く ― AGI・ASI・シンギュラリティ
masayamoriofficial
0
110
広島発!スタートアップ開発の裏側
tsankyo
0
250
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
12
1.8k
Product Management Conference -AI時代に進化するPdM-
kojima111
0
220
EKS Pod Identity における推移的な session tags
z63d
1
210
Backboneとしてのtimm2025
yu4u
4
1.6k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
370
株式会社ARAV 採用案内
maqui
0
360
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
Speed Design
sergeychernyshev
32
1.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Balancing Empowerment & Direction
lara
2
590
For a Future-Friendly Web
brad_frost
179
9.9k
Fireside Chat
paigeccino
39
3.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
͓ຍʹϙʔλϧαΠτΛϦϦʔεͨ͠ 2016/08/17 @Speee LTେձ
ࣗݾհ • @hatappi (yusaku.hatanaka) • ذෞग़ • ࠷ۙAngular2Λॻ͍ͨΓRailsॻ͍ͨ Γͯ͠·͢
ੈͷதʹ͋Γ;ΕΔ֤ۀքͷϙʔλϧ αΠτ
ͳΜ͔୳͠ʹ͍͘ɾɾɾ
࡞Ζ͏ʂʂ
࡞ͬͨ!! • ͨ͠ͷ༁͋ͬͯݟͤΒΕ·ͤΜ
·ͣڝ߹ͷੳ͔Β
None
None
ٕज़બఆɹ • Rails5 api mode • Angular2.rc4 • GCP
Rails5 api mode ݩʑgemͩͬͨrails-api͕RailsʹϚʔδ͞Εͨ • helperassets, views͕ͬͦ͝Γফ͑ͯΔ • cookieͱ͔session storeͷఆٛͳ͚Εassetsͳ͍
Angular2 GoogleͷJSϑϨʔϜϫʔΫ ݩʑ͋ͬͨAngular1ͷޙܧ͕ͩޓੑ΄ͱΜͲͳ͍ͱͷ͜ͱ! ਖ਼ࣜϦϦʔε͞Ε͓ͯΒͣ࠷৽rc5 rc6͕ग़ΔΒ͍͕͠େ͖ͳΞοϓσʔτrc5ͰऴΘΓΒ͍͠
GCP • railsͱangularʹؔͯ͠GCE(AWSͰ͍ ͏EC2) • ը૾ͷ৴ʹؔͯ͠GCS(AWSͰ͍͏ ͱ͜ͷS3)ʹ͓͖ɺͦͷ··CDNͱ͠ ͯ͏ • GCElet's
encryptͰূ໌ॻΛͱͬͯɺ http/2Ͱఏڙ
ࠓճRailsͱ͍͏͔JSONΑΓͷ
Έͳ͞ΜRailsͰJSONͷϨεϙϯε Λฦ͢͜ͱ͕͋Γ·͔͢ʁ
༻్༷ʑ • ΞϓϦͱ͔Ͱ༻͢ΔAPIαʔόʔͷߏங࣌ • AJAXͰ௨৴Λ͢Δ࣌ • etc...
RFC4627,7159ʹJSONͷ༷͕͔͔Ε ͍ͯΔ • arrayͷ։࢝ʹ [ ɺऴྃʹ ] • ͷ۠Γʹ ,
• string " Ͱғ͏ • etc...
RFC4627,7159ʹJSONͷ༷͕͔͔Ε ͍ͯΔ • arrayͷ։࢝ʹ [ ɺऴྃʹ ] • ͷ۠Γʹ ,
• string " Ͱғ͏ • etc... ༷कͬͯ͋Εޙࣗ༝
/users { "result":[ { "id":1, "name":"yusaku.hatanaka" }, { "id":2, "name":"hoge.taro"
} ] }
/users { "response":{ "status":200, "users":[ { "id":1, "name":"yusaku.hatanaka" }, {
"id":2, "name":"hoge.taro" } ] } }
ϑΥʔϚοτ͕ఆ·Βͳ͍!
ϑϩϯτܹ͓͜! • API͝ͱʹϨεϙϯεͷܗ͕ࣜҟͳΔͷͰɺͦΕͧΕͰύʔαʔ Λॻ͔ͳ͍ͱ͍͚ͳ͍
ੈͷதʹJSONͷϑΥʔϚοτΛఆ Ίͨͷ͕͋Δ
HAL
{ "_links": { "self": { "href": "/comments/1" } }, "id":
1, "message": "LTେձʹࢀՃͯ͠·͢", "_embedded": { "user": { "_links": { "self": { "href": "/users/7" } }, "id": 7, "name": "yusaku.hatanaka" } } }
JSON:API
{ "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":{ } } ] } }
JSON:APIͱHAL • HAL • intergent draftʹೖ͍ͬͯΔ • AWSͷAPIGatewayͰ༻͞Ε͍ͯΔ࣮ • JSON:API
• error࣌ͷϨεϙϯεͳͲͷݴٴ͋Δ • ձࣾͷϓϩμΫτͰ༻͞Ε͍ͯΔ࣮ • GET͚ͩͰͳ͘ɺPOSTDELETEͳͲCRUDͷݴٴ͋Δ
ͦΕͧΕͷϑΥʔϚοτͰϨεϙϯε Λฦ͘͢͢͠Δgem͋Δ • HAL => apotonick/roar • JSON:API => cerebris/jsonapi-resources
·ͱΊ • ෳਓͰ։ൃ͢ΔࡍʹJSONͷϑΥʔϚοτΛ͖Ί͓ͯ͘ͱɺ ϑϩϯτͱྑ͘ͳΕΔʢ͔͠Εͳ͍ʣ • νʔϜͰܾΊͯྑ͍͕ɺάμάμʹͳΒͳ͍Α͏ʹ
࠷ޙʹ
None
ΞΫηε·ͩ·ͩ
index1݅ɾɾɾɾ ͜͜·༷ͩࢠݟ ͔ͨ͠͠ΒSPAͰ࡞ͬͨ͜ͱʹΑΓbot͕͏·͘ճ༡ग़དྷͯͳ͍ ͔͠Εͳ͍
໘indexΛ૿͍ͯ͘͠