RailsͰͷAMP࣮૷ࣄྫ

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

AMPɹɹ Accelerated Mobile Pages

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

No content

࣮૷ʹ͸ਏ੍͍໿͕͋Δ

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

ݫ͍͠৚݅ԼͰ΋खͬऔΓૣ͘Rails Ͱ࣮૷͠·͠ΐ͏

• routing • Controller • View • CSS

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Ͱ൑அͳͲαʔϏε͝ͱʹ౎߹͕ྑ͍ͷʹ͠·͠ΐ͏ αϒυϝΠϯͰ΋͍͚·͢

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

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"

CSS ͸ېࢭ͞Ε͍ͯΔ View಺ͰCSSΛrender͠ͳ͍ͱ͍͚ͳ͍ গ͠޻෉͢Ε͹ίϯύΠϧ͕ඞཁͳSassͰ΋࢖͏͜ͱ͕Մೳ

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

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

·ͱΊ • ੍໿͸ଟ͍͕޻෉͢Ε͹ϞόΠϧ͔Βมߋ͕গͳͯ͘ࡁΉ • AMP͸ಋೖ͕ਐΜͰ͍·͢ɻະରԠͷ৔߹͸৘ใΛूΊ·͠ΐ͏

No content

͋Γ͕ͱ͏͍͟͝·ͨ͠