とある企業のモバイル対応 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? %> <% end %> ActionPack Variantsのリクエストごとに グローバルな変数という側面だけ利用

未対応のページでは、従来通りの表示を保ち（？）つつ

レスポンシブ化したページを段階的にリリースできる ※画面は開発中のものです

　 モバイル対応の背景 　 対応方針の選択 　 段階的リリースを実現する実装 まとめ Agenda 18

まとめ • PIXTAは従来PC向けのページが主だったが、GoogleのMFI導入を機に 現在モバイル対応を実施中 • モバイル対応の方法 • 方針: 既存PC向けページの段階的なレスポンシブ化 • 実装: ActionPack Variantsによるviewportの動的適用 19

Mobile First on Rails! 20