amp

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ͱ͸ ϞόΠϧϖʔδΛߴ଎ʹϢʔβʔಧ͚ΔͨΊʹൃ଍ͨ͠ϓϩδΣΫτ
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͸ಋೖ͕ਐΜͰ͍·͢ɻະରԠͷ৔߹͸৘ใΛूΊ·͠ΐ͏
18. ͋Γ͕ͱ͏͍͟͝·ͨ͠