Webuilder240

ブログのAmp対応を行った

2020-06-24 23:54:08 +0900

Ruby Rails AMP
基本的には下記記事のとおりにやって対応完了なんだけど、

https://qiita.com/zucay/items/23f960112b4a7e7cace8#step5-css%E3%81%AE%E5%AF%BE%E5%BF%9C

いくつか動かなかったりがあったりした。編集リクエストを送るのも面倒なので、このブログに差分を書いておく。

Step5. CSSの対応

についてはProductionの場合に読み込んだCSSをhtml_safeで出力していないためHTMLエスケープされてしまっていた。従ってhtml_safeをつける必要がある。

style[amp-custom]
　　- controller = params[:controller]
　　- if Rails.application.assets && Rails.application.assets["amp/amp_#{controller_name}"]
 　　 = Rails.application.assets["amp/amp_#{controller_name}"].to_s.html_safe
　　- else
 　　 = File.read "#{Rails.root}/public#{stylesheet_path("amp/amp_#{controller_name}", host: nil).html_safe}"


Step6. image_tagヘルパーのフック

これについては、Rails5からは alias_method_chain が deprecated になり、Rails6では動かなかった。
したがって、alias_methodに置き換える必要がある。置き換え後のコードはこちら。

module ActionView
  module Helpers
    module AssetTagHelper
      def amp_image_tag(source, options = {})
        src = options[:src] = ActionController::Base.helpers.path_to_image(source, skip_pipeline: options.delete(:skip_pipeline))

        unless src.start_with?('cid:', 'data:') || src.blank?
          options[:alt] = options.fetch(:alt) { ActionController::Base.helpers.image_alt(src) }
        end
        options[:layout] ||= 'fixed'
        ActionController::Base.helpers.tag('amp-img', options)
      end

      # amp-imgかimgかをrequest.formatによって使い分ける。
      def image_tag_with_amp(source, options = {})
        if amp?
          amp_image_tag(source, options)
        else
          image_tag_without_amp(source, options)
        end
      end

      def amp?
        Thread.current[:format] == 'amp'
      end

      # alias_method_chain :image_tag, :amp
      alias_method :image_tag_without_amp, :image_tag
    end
  end
end

まとめ

  • もっと難しいかなぁとかは思っていたけど、意外と簡単だった。
  • 遊びでやってみたけど、AMPに向くコンテンツ向かないコンテンツってあって、今の業務領域では多分使うことはないだろうな、と思った。

関連しそうなブログ