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
3.9k
とある企業のモバイル対応 / 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
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
yasaichi
1
210
[EN] Robust and Scalable API Gateway Built on Effect
yasaichi
3
150
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
8
1.6k
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
2.6k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
yasaichi
50
20k
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
yasaichi
38
20k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
yasaichi
1
360
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
140
87k
SSR以後の世界へ / techcamp05
yasaichi
3
1.6k
Other Decks in Programming
See All in Programming
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
410
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
650
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
120
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
私のEbitengineの第一歩
qt_luigi
0
450
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
140
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Featured
See All Featured
Infographics Made Easy
chrislema
239
18k
What's in a price? How to price your products and services
michaelherold
242
11k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
We Have a Design System, Now What?
morganepeng
48
7.1k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
What's new in Ruby 2.0
geeforr
340
31k
YesSQL, Process and Tooling at Scale
rocio
167
14k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Designing for humans not robots
tammielis
248
25k
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