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
390
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
yasaichi
1
1.6k
[EN] Robust and Scalable API Gateway Built on Effect
yasaichi
3
320
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
9
2.3k
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
3.1k
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
450
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
144
92k
Other Decks in Programming
See All in Programming
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.3k
Model Pollution
hschwentner
1
180
CSC305 Lecture 01
javiergs
PRO
1
400
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
910
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
590
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
3
430
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Making Projects Easy
brettharned
119
6.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
GitHub's CSS Performance
jonrohan
1032
460k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Gamification - CAS2011
davidbonilla
81
5.5k
A designer walks into a library…
pauljervisheath
209
24k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
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