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
620
RubyではじめるGraphQL
hatappi
0
840
RubyでChainerつくってます!!
hatappi
2
1.4k
TDDな個人開発
hatappi
0
300
できるだけ楽して楽しくRails開発しよう
hatappi
2
330
EKSにRailsをのせた
hatappi
1
1.2k
RubyとApache Arrow
hatappi
0
2.4k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2.3k
Fargateで夢は見られるのか
hatappi
1
2.2k
Other Decks in Technology
See All in Technology
Definition of Done
kawaguti
PRO
6
480
Wasm元年
askua
0
130
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
170
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
130
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
150
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
910
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
170
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
130
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
330
Agentic Workflowという選択肢を考える
tkikuchi1002
1
480
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
A better future with KSS
kneath
239
17k
Bash Introduction
62gerente
614
210k
Building Applications with DynamoDB
mza
95
6.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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Λ૿͍ͯ͘͠