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
とある企業のモバイル対応 / Rails Developers Meetup 2017
Search
Yuichi Goto
December 09, 2017
Programming
1
4.1k
とある企業のモバイル対応 / Rails Developers Meetup 2017
Rails Developers Meetup 2017(2017/12/09)
Yuichi Goto
December 09, 2017
Tweet
Share
More Decks by Yuichi Goto
See All by Yuichi Goto
[Teaser] Type-Safe Lightweight DDD with Effect Schema
yasaichi
2
320
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
yasaichi
1
1.4k
[EN] Robust and Scalable API Gateway Built on Effect
yasaichi
3
300
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
9
2.3k
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
3k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
yasaichi
50
22k
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
yasaichi
38
21k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
yasaichi
1
440
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
144
91k
Other Decks in Programming
See All in Programming
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
540
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
160
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
230
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
NPOでのDevinの活用
codeforeveryone
0
240
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
120
CursorはMCPを使った方が良いぞ
taigakono
1
180
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
Benchmark
sysong
0
270
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Bash Introduction
62gerente
614
210k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Unsuck your backbone
ammeep
671
58k
Making Projects Easy
brettharned
116
6.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Transcript
とある企業のモバイル対応 Yuichi Goto (@_yasaichi) Dec 9, 2017 @ Rails Developers
Meetup 2017
self.inspect • ピクスタ株式会社 技術推進チームリーダー • Twitter: @_yasaichi • GitHub: yasaichi
• Blog: http://web-salad.hateblo.jp 2 他社さんにおける技術基盤のようなチームです
https://pixta.jp クリエイターと購入者をつなぐデジタル素材のマーケットプレイス 3 Railsで作り直してから7年目!
Agenda モバイル対応の背景 対応方針の選択 段階的リリースを実現する実装 まとめ 4
モバイル対応に至る背景 • PIXTAの全トラフィックのうちPCの占める割合が約70%のため、会員 登録など一部の機能を除いてPC向けのページしかなかった • 2016年11月にGoogleのとある発表を受けてモバイル対応を決定し、 一年越しに着手・実施中 • Mobile-First Index(MFI)の導入
• 2017年12月現在まで未実施で、来年にはやると言われている 5
MFIの導入で変わること: 評価対象 • 今まで: PC向けのページの内容を評価して、PC・モバイル向けの検索順 位を決定 • 導入後: モバイル向けのページの内容を評価して、PC・モバイル向けの 検索順位を決定
• PC向けのページのみのサイトも引き続き評価されるが、検索順位が低下 する可能性がある 6
モバイル対応の背景 対応方針の選択 段階的リリースを実現する実装 まとめ Agenda 7
同一URLでモバイル対応を行う方法 A. レスポンシブデザインを利用する Viewがひとつで済むので運用が楽 $ (PIXTAのように)既にPC向けのデザインがある場合に移行が大変 B. ユーザーエージェントによって表示内容を振り分ける (PC向けが既にあれば)モバイル向けのViewを作るだけで済む $
Viewが多重管理になるので将来的な運用が大変 8
Ruby on Rails側での対応 • レスポンシブデザインを利用する場合: 特に何もする必要なし • UAによって表示内容を振り分ける場合: ActionPack Variantsを利用
• デバイスごとに異なるViewを表示するためにRailsが用意している機能 • リクエストごとにグローバルな変数 request.variant が用意され、 これを操作・参照する 9
ActionPack Variantsの利用例 class ApplicationController < ActionController::Base before_action :set_request_variant private def
set_request_variant request.variant = :mobile if request.user_agent =~ /iPhone/ end end 10 <% if request.variant.mobile? %> # do something <% end %> *.html+mobile.erbのようなViewが存在すればそれが使われる
どちらを選択したか • 対応言語数分のViewが存在するページがあるため、将来の運用コストを 考えてレスポンシブ化を選択 • 進め方 1. まずは既存CSSの調整でモバイル対応を行いリリースする 2. その後適宜作り直したり、場合によってはデバイス特化する
11 UAで分けると6言語分のViewが更に2倍に
モバイル対応の背景 対応方針の選択 段階的リリースを実現する実装 まとめ Agenda 12
段階的リリースの背景と問題 • 背景: • 対象ページが多く、一度に全てをレスポンシブ化してリリースできない • モバイル対応の効果の高いページから優先的にリリースしていきたい • 問題: モバイル端末でモバイル未対応ページを閲覧した際に、モバイル
対応済みのheader等と表示が合致しない 13
ちぐはぐ問題の例 モバイル未対応のbodyに対してモバイル 対応済みのheaderが適用されてしまう
解決策: viewportを動的に適用する 15 class ApplicationController < ActionController::Base private def not_yet_migrated_to_responsive
request.variant = :pc end end class ProjectsController < ApplicationController before_action :not_yet_migrated_to_responsive, only: %i(new) end <% unless request.variant.pc? %> <meta name="viewport" content="width=device-width,initial-scale=1"> <% end %> ActionPack Variantsのリクエストごとに グローバルな変数という側面だけ利用
未対応のページでは、従来通りの表示を保ち(?)つつ
レスポンシブ化したページを段階的にリリースできる ※画面は開発中のものです
モバイル対応の背景 対応方針の選択 段階的リリースを実現する実装 まとめ Agenda 18
まとめ • PIXTAは従来PC向けのページが主だったが、GoogleのMFI導入を機に 現在モバイル対応を実施中 • モバイル対応の方法 • 方針: 既存PC向けページの段階的なレスポンシブ化 •
実装: ActionPack Variantsによるviewportの動的適用 19
Mobile First on Rails! 20