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.8k
とある企業のモバイル対応 / 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
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
2.2k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
yasaichi
50
19k
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
yasaichi
38
19k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
yasaichi
1
330
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
139
85k
SSR以後の世界へ / techcamp05
yasaichi
3
1.5k
サービス開発の現場からOSSを生み出す思考技術 / genbaweb04
yasaichi
3
1.1k
Capybaraで変更に強いE2Eテストを書く / TokyuRubyKaigi12
yasaichi
6
2.1k
Other Decks in Programming
See All in Programming
仕様と実装で学ぶOpenTelemetry
drumato
2
1.2k
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
16k
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
220
Implementing Design Systems in Swift
seyfoyun
2
530
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
160
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters
unvalley
3
650
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
株式会社ゼネテック
genetec
0
120
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
18
2.4k
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
620
哲学史とモデリング
tanakahisateru
2
430
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
780
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Invisible Customer
myddelton
114
12k
Making Projects Easy
brettharned
109
5.5k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Adopting Sorbet at Scale
ufuk
69
8.6k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Scaling GitHub
holman
457
140k
The Cost Of JavaScript in 2023
addyosmani
21
4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Become a Pro
speakerdeck
PRO
13
4.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
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