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
RubyではじめるGraphQL
hatappi
0
810
RubyでChainerつくってます!!
hatappi
2
1.4k
TDDな個人開発
hatappi
0
280
できるだけ楽して楽しくRails開発しよう
hatappi
2
310
EKSにRailsをのせた
hatappi
1
1.1k
RubyとApache Arrow
hatappi
0
2.3k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2.3k
Fargateで夢は見られるのか
hatappi
1
2.1k
個人サービスをFargateに移行したよ
hatappi
1
640
Other Decks in Technology
See All in Technology
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
110
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
AIエージェント元年@日本生成AIユーザ会
shukob
1
240
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.8k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
750
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
350
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
150
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
510
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.2k
Охота на косуль у древних
ashapiro
0
120
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
120
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Site-Speed That Sticks
csswizardry
4
410
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A Philosophy of Restraint
colly
203
16k
We Have a Design System, Now What?
morganepeng
51
7.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
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Λ૿͍ͯ͘͠