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

amp

0af658ea4f11fa7bf803115451890d4c?s=47 ararajp
February 02, 2017

 amp

0af658ea4f11fa7bf803115451890d4c?s=128

ararajp

February 02, 2017
Tweet

Transcript

  1. RailsͰͷAMP࣮૷ࣄྫ

  2. Profile ߥҪ ༐ี 2006-2011 Yahoo!JAPAN 2011- VASILY.inc ʮiQONʯͱ͍͏ঁੑ޲͚ϑΝογϣϯαʔϏεΛ࡞͍ͬͯ·͢ https://www.iqon.jp/ tech.vasily.jp/

  3. AMPɹɹ Accelerated Mobile Pages

  4. AMPͱ͸ ϞόΠϧϖʔδΛߴ଎ʹϢʔβʔಧ͚ΔͨΊʹൃ଍ͨ͠ϓϩδΣΫτ

  5. None
  6. ࣮૷ʹ͸ਏ੍͍໿͕͋Δ

  7. • ඞਢϚʔΫΞοϓ͕ଟ͍ • ࡞੒ͨ͠JavaScriptېࢭ • ༻ҙ͞Ε͍ͯΔAMP ComponentΛ࢖༻ • CSS͸headλά಺͔StyleཁૉͰΠϯϥΠϯͷΈ •

    linkཁૉ͸canonical͚ͩ ͳͲͳͲ...
  8. ݫ͍͠৚݅ԼͰ΋खͬऔΓૣ͘Rails Ͱ࣮૷͠·͠ΐ͏

  9. • routing • Controller • View • CSS

  10. routing ௨ৗϖʔδͷURLʹ/ampΛ෇͚଍ͨ͠αϒςΟϨΫτϦํࣜ https://item.iqon.jp/15011036 // ௨ৗϖʔδ https://item.iqon.jp/15011036/amp // AMPϖʔδ get '/:item_id/amp',

    to: 'item#amp', constraints: {item_id: /[0-9]+/} ?amp=1 / .ampͰ൑அͳͲαʔϏε͝ͱʹ౎߹͕ྑ͍ͷʹ͠·͠ΐ͏ αϒυϝΠϯͰ΋͍͚·͢
  11. Controller PC/ϞόΠϧͱڞ௨ͷॲཧͰcanonical͚ͩઃఆ AMP༻ͷviewͱlayoutͰϨϯμϦϯά def amp if _detail # PC/ϞόΠϧͳͲͱڞ௨ͷॲཧ @html[:canonical]

    = "https://item.iqon.jp/#{@item[:item_id]}/" # ϞόΠϧϖʔδ΁canonical render 'item/amp/detail', layout: 'amp/layout' # AMP༻ͷৄࡉϖʔδͱϨΠΞ΢τ end end def sp @html[:amphtml] = "https:#{domain_item}/#{@item[:item_id]}/amp/" if params[:amp].blank? end
  12. View ෆཁͳίϯϙʔωϯτͷJSΛಡΈࠐΉͱܯࠂ͕ग़Δ JSͷಡΈࠐΈॱ΋ݫີʹܾ·͍ͬͯΔ layout # ڞ௨ͷAMP JS͸layoutͰಡΈࠐΉ script async=true custom-element="amp-analytics"

    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" = yield(:extended_component_tags) script async=true src='https://cdn.ampproject.org/v0.js' Template content_for :extended_component_tags do script async=true custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
  13. CSS <link rel="stylesheet" href="">͸ېࢭ͞Ε͍ͯΔ View಺ͰCSSΛrender͠ͳ͍ͱ͍͚ͳ͍ গ͠޻෉͢Ε͹ίϯύΠϧ͕ඞཁͳSassͰ΋࢖͏͜ͱ͕Մೳ

  14. Template ࢖༻͢ΔsassΛࢦఆ content_for :css_path, 'item/amp/show.sass' layout render_cssͱ͍͏ϔϧύʔΛ࢖༻ style amp-custom=true =

    render_css(yield :css_path)
  15. Helper RubyεΫϦϓτ಺෦ͰSCSSΛCSSʹม׵͢Δ def render_css path raw Sass::Engine.for_file("#{Rails.root}/app/assets/stylesheets/#{path}", { load_paths: ["#{Rails.root}/app/assets/stylesheets"],

    #importͷج४path style: :compressed # ѹॖ }).to_css end
  16. ·ͱΊ • ੍໿͸ଟ͍͕޻෉͢Ε͹ϞόΠϧ͔Βมߋ͕গͳͯ͘ࡁΉ • AMP͸ಋೖ͕ਐΜͰ͍·͢ɻະରԠͷ৔߹͸৘ใΛूΊ·͠ΐ͏

  17. None
  18. ͋Γ͕ͱ͏͍͟͝·ͨ͠