Upgrade to Pro — share decks privately, control downloads, hide ads and more …

とある企業のモバイル対応 / Rails Developers Meetup 2017

B8e501d93b98a553abf0b5cee0c33503?s=47 yasaichi
December 09, 2017

とある企業のモバイル対応 / Rails Developers Meetup 2017

Rails Developers Meetup 2017(2017/12/09)

B8e501d93b98a553abf0b5cee0c33503?s=128

yasaichi

December 09, 2017
Tweet

Transcript

  1. とある企業のモバイル対応 Yuichi Goto (@_yasaichi) Dec 9, 2017 @ Rails Developers

    Meetup 2017
  2. self.inspect • ピクスタ株式会社  技術推進チームリーダー • Twitter: @_yasaichi • GitHub: yasaichi

    • Blog: http://web-salad.hateblo.jp 2 他社さんにおける技術基盤のようなチームです
  3. https://pixta.jp クリエイターと購入者をつなぐデジタル素材のマーケットプレイス 3 Railsで作り直してから7年目!

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

  5. モバイル対応に至る背景 • PIXTAの全トラフィックのうちPCの占める割合が約70%のため、会員
 登録など一部の機能を除いてPC向けのページしかなかった • 2016年11月にGoogleのとある発表を受けてモバイル対応を決定し、
 一年越しに着手・実施中 • Mobile-First Index(MFI)の導入

    • 2017年12月現在まで未実施で、来年にはやると言われている 5
  6. MFIの導入で変わること: 評価対象 • 今まで: PC向けのページの内容を評価して、PC・モバイル向けの検索順 位を決定 • 導入後: モバイル向けのページの内容を評価して、PC・モバイル向けの 検索順位を決定

    • PC向けのページのみのサイトも引き続き評価されるが、検索順位が低下 する可能性がある 6
  7.   モバイル対応の背景 対応方針の選択   段階的リリースを実現する実装   まとめ Agenda 7

  8. 同一URLでモバイル対応を行う方法 A. レスポンシブデザインを利用する Viewがひとつで済むので運用が楽
 $ (PIXTAのように)既にPC向けのデザインがある場合に移行が大変 B. ユーザーエージェントによって表示内容を振り分ける (PC向けが既にあれば)モバイル向けのViewを作るだけで済む
 $

    Viewが多重管理になるので将来的な運用が大変 8
  9. Ruby on Rails側での対応 • レスポンシブデザインを利用する場合: 特に何もする必要なし • UAによって表示内容を振り分ける場合: ActionPack Variantsを利用

    • デバイスごとに異なるViewを表示するためにRailsが用意している機能 • リクエストごとにグローバルな変数 request.variant が用意され、
 これを操作・参照する 9
  10. 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が存在すればそれが使われる
  11. どちらを選択したか • 対応言語数分のViewが存在するページがあるため、将来の運用コストを 考えてレスポンシブ化を選択 • 進め方 1. まずは既存CSSの調整でモバイル対応を行いリリースする 2. その後適宜作り直したり、場合によってはデバイス特化する

    11 UAで分けると6言語分のViewが更に2倍に
  12.   モバイル対応の背景   対応方針の選択 段階的リリースを実現する実装   まとめ Agenda 12

  13. 段階的リリースの背景と問題 • 背景: • 対象ページが多く、一度に全てをレスポンシブ化してリリースできない • モバイル対応の効果の高いページから優先的にリリースしていきたい • 問題: モバイル端末でモバイル未対応ページを閲覧した際に、モバイル

    対応済みのheader等と表示が合致しない 13
  14. ちぐはぐ問題の例 モバイル未対応のbodyに対してモバイル 対応済みのheaderが適用されてしまう

  15. 解決策: 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のリクエストごとに グローバルな変数という側面だけ利用
  16. 未対応のページでは、従来通りの表示を保ち(?)つつ

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

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

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

    実装: ActionPack Variantsによるviewportの動的適用 19
  20. Mobile First on Rails! 20