$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rails5 APIではじめるSPA開発
Search
hatappi
July 14, 2016
Technology
1
1.4k
Rails5 APIではじめるSPA開発
hatappi
July 14, 2016
Tweet
Share
More Decks by hatappi
See All by hatappi
Cloudflare を活用して変わったメルカリの開発体験 / How Cloudflare Changed Mercari's Development Experience
hatappi
1
710
RubyではじめるGraphQL
hatappi
0
890
RubyでChainerつくってます!!
hatappi
2
1.5k
TDDな個人開発
hatappi
0
330
できるだけ楽して楽しくRails開発しよう
hatappi
2
350
EKSにRailsをのせた
hatappi
1
1.2k
RubyとApache Arrow
hatappi
0
2.5k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2.4k
Fargateで夢は見られるのか
hatappi
1
2.3k
Other Decks in Technology
See All in Technology
Overture Maps Foundationの3年を振り返る
moritoru
0
160
WordPress は終わったのか ~今のWordPress の制作手法ってなにがあんねん?~ / Is WordPress Over? How We Build with WordPress Today
tbshiki
1
590
ブロックテーマとこれからの WordPress サイト制作 / Toyama WordPress Meetup Vol.81
torounit
0
540
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
1ftseabass
PRO
0
260
モダンデータスタック (MDS) の話とデータ分析が起こすビジネス変革
sutotakeshi
0
440
直接メモリアクセス
koba789
0
290
【AWS re:Invent 2025速報】AIビルダー向けアップデートをまとめて解説!
minorun365
4
480
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
maimyyym
2
230
第4回 「メタデータ通り」 リアル開催
datayokocho
0
120
20251209_WAKECareer_生成AIを活用した設計・開発プロセス
syobochim
5
1.4k
今年のデータ・ML系アップデートと気になるアプデのご紹介
nayuts
1
220
生成AI時代におけるグローバル戦略思考
taka_aki
0
110
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building an army of robots
kneath
306
46k
Faster Mobile Websites
deanohume
310
31k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Rails Girls Zürich Keynote
gr2m
95
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
The Cult of Friendly URLs
andyhume
79
6.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
The Cost Of JavaScript in 2023
addyosmani
55
9.3k
4 Signs Your Business is Dying
shpigford
186
22k
Transcript
Rails5Ͱߦ͏SPA։ൃ Roppongi.rb #1
ࣗݾհ —໊લ : ാத༔࡞ —Twitter : @hatappi —ձࣾ : גࣜձࣾSpeee
—৬ : ίʔώʔ
None
SPAͱʁ
SinglePageApplicaton ӳޠͦͷ··Ͱ୯ҰϖʔδͰߏ͞ΕͨΞϓϦέʔγϣ ϯ ࠷ॳϖʔδશମΛಡΈࠐΜͩޙjavascriptͰඞཁͳ෦ Λߋ৽͍ͯ͘͠ σʔλ࿈ܞAjaxWebSocketʹͯߦ͏
Πϯϑϥߏ
None
GCP (GoogleCloudPlatform) —CDNΛ͏ࡍʹAWSͩͱ S3+CloudFront GCPͰStorageʹΞοϓϩʔ υͯ͠ACLͷઃఆΛมߋ͢Ε ެ։Ͱ͖Δ —੩తwebαΠτΛϗεςΟϯά Ͱ͖ΔͷͰαʔόʔϨεӡ༻͕ Մೳ!
Angular2 Googleͷ։ൃ͢ΔJavascriptͷϑ ϨʔϜϫʔΫ ݱঢ়rc4 React͕ViewͷίϯϙʔωϯτΛ ఏڙ͢Δͷʹରͯ͠MVCΛఏڙ͢ ΔϑϧελοΫͳϑϨʔϜϫʔΫ
Rails5ͷ ࠓͷϝΠϯ RubyͷwebΞϓϦέʔγϣϯɾϑ ϨʔϜϫʔΫ 7/1ʹrc͕ͱΕ͍ͯͭʹ5͕ϦϦʔ ε!
None
Rails5Ͱͷมߋ —Action Cable —rakeλεΫΛrailsͰ࣮ߦ —turbolinks5 —sprockets3 —rails api
Rails5Ͱͷมߋ —Action Cable —rakeλεΫΛrailsͰ࣮ߦ —turbolinks5 —sprockets3 —rails api <- ࠓ͜͜
Rails API ݩʑgemͩͬͨrails-api͕RailsʹϚʔδ͞Εͨ —helperassets, views͕ͬͦ͝Γফ͑ͯΔ —cookieͱ͔session storeͷఆٛͳ͍ —config͔Βassetؔ࿈ͷͷ͕ͳ͘ͳ͍ͬͯΔ
γϯϓϧ!
Rails apiͷͱ͖ʹ͋ͨͬͨ՝ —view͕΄͘͠ͳͬͨΒ —CORS —Ϣʔβʔೝূ
Rails apiͷͱ͖ʹ͋ͨͬͨ՝ —view͕΄͘͠ͳͬͨΒ —CORS —Ϣʔβʔೝূ
ͬͺΓView͕΄͍͠ɾɾ
Viewޙ͔ΒͰՃͰ͖Δ ඞཁͳmiddlewareΛՃͯ͋͛͠ΕݩͷඇAPIͷ Railsʹ͢Δ͜ͱग़དྷΔɻ ٯʹAPIʹ͢Δͷ͋ΔͷΛআ͍͔ͯ͠ͳ͍ͱ͍͚ ͳ͍ͷͰ݁ߏେม!
Rails apiͷͱ͖ʹ͋ͨͬͨ՝ —view͕΄͘͠ͳͬͨΒ —CORS —Ϣʔβʔೝূ
CORSͱ?
CORS (Cross-Origin Resource Sharing) SameOriginPolicyʹΑΓXHRͱ͔ Ͱࠓ͍ΔαΠτͱผͷαΠτ͔Β σʔλΛಡΈࠐΉͱΤϥʔʹͳ Δɻ ͦΕΛڐՄ͞ΕͨαΠτʹରͯ͠ OriginΛ͑ͯ͜ΞΫηε͑͞Δ
Έ
rack-cors (https://github.com/cyu/rack-cors) originsͰڐՄ͢ΔϗετΛઃఆ '*'͍͚Δ͚Ͳຊ൪ʹө͢Δͱ͖ҙ Rails.application.config.middleware.insert_before 0, Rack::Cors do allow do
origins 'roppongirb.com' resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head] end end
Rails apiͷͱ͖ʹ͋ͨͬͨ՝ —view͕΄͘͠ͳͬͨΒ —CORS —Ϣʔβʔೝূ
RailsApiͰcookie session͕ͦͬ͝ͱͳ͘ͳͬ ͯΔ!
cookieͰͳ͘tokenͰ ཧͩ❗❗
None
ೝূॲཧࣗମ GoogleOAuth2 Ͱߦ͍ͦͷޙτ ʔΫϯΛੜ
googleΛΘͣશ෦ࣗલͰߦ͏ͧͬͯํ —devise_token_auth deviseΛͬͯRailsͰTokenBasedͷೝূΛߦ͏ ͷ —doorkeeper RailsͰOAuth2ͷϓϩύΠμʔΛ͏ͨΊͷͷ
·ͱΊ
·ͱΊ —SPAා͘ͳ͍ —API modeʹͯ͠࠷ѱͤΔͷͰνϟϯϨϯδͯ͠ Έͯྑ͍͔ —turbolinksɺsprockets, coffeescriptͱ͍͏ݴ༿ʹർ Εͯ͠·ͬͨΒݕ౼ͯ͠ྑ͍͔