Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Rails5 APIではじめるSPA開発
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
hatappi
July 14, 2016
Technology
1.4k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Rails5 APIではじめるSPA開発
hatappi
July 14, 2016
Transcript
31 slides
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ͱ͍͏ݴ༿ʹർ Εͯ͠·ͬͨΒݕ౼ͯ͠ྑ͍͔
More Decks by hatappi
See All by hatappi
メルカリのグローバルアプリで挑んだ AlloyDB 運用と課題解決の実践記
hatappi
0
360
AlloyDB 奮闘記
hatappi
0
550
Cloudflare を活用して変わったメルカリの開発体験 / How Cloudflare Changed Mercari's Development Experience
hatappi
1
970
RubyではじめるGraphQL
hatappi
0
990
RubyでChainerつくってます!!
hatappi
2
1.6k
TDDな個人開発
hatappi
0
400
できるだけ楽して楽しくRails開発しよう
hatappi
2
400
EKSにRailsをのせた
hatappi
1
1.3k
RubyとApache Arrow
hatappi
0
2.7k
Other Decks in Technology
See All in Technology
ぼくのClaude Codeの使い方
falken
PRO
1
250
Intro to Kiro (One agent, every surface) | Kiro: Zero to Hero 01
inariku
PRO
2
110
PostgreSQL オプティマイザ統計の秘密
nori_shinoda
1
460
「AIチャットからもできないの?」と言われたら ~業務アプリをMCP対応するときの認証・認可の勘所
oidfj
0
290
Ebitengine製iOSアプリ公開ボタンを押す会
eiei114
0
120
アラートを見直していたら営業組織への理解にちょっとだけ繋がった話
z63d
1
170
AIエージェントの監視、思考を見るか行動を見るか / Monitoring AI Agents: Thoughts or Actions
yusukeshimizu
2
190
顧客合意を取りながら進めるAWSコスト削減の実践
optim
0
160
複数システムが同居した 15 年物の AWS アカウントを解体するための考古学
wa6sn
3
120
LLM 基盤と kagent v0 を全部 k8s に入れてみた / Deploy both LLM and kagent v0 in k8s
kota2and3kan
0
130
AWSを利用する上で知っておきたい名前解決の話 2026
nagisa53
5
3.4k
Kiro CLI 入門 (ターミナルと CI で使う) | 目指せ Kiro マスター 03
inariku
PRO
2
140
Featured
See All Featured
[SF Ruby Conf 2025] Rails X
palkan
3
1.5k
[RailsConf 2023] Rails as a piece of cake
palkan
59
7.1k
How to Ace a Technical Interview
jacobian
280
24k
Ethics towards AI in product and experience design
skipperchong
2
460
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
2
3k
Being A Developer After 40
akosma
PRO
92
590k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
The Cult of Friendly URLs
andyhume
79
7.1k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
380
The Mindset for Success: Future Career Progression
greggifford
PRO
0
560
The Spectacular Lies of Maps
axbom
PRO
1
1.1k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.6k