Webuilder240

ActionTextをAmp対応させる

2020-06-26 23:49:41 +0900

ActionText AMP Rails Ruby
前のブログでこのブログをAmp対応したと書いたが、正確に言えば、「画像がないブログ」については対応を完了したというのが正しい。

今回はブログで画像を含んだ本文の記事についてもAmp対応させてみた。
ちなみにこのブログはレールに沿って作られているので、WYSIWYGエディタについては、ActionTextを使っている。

実装自体はいたってシンプルで下記のコードのようにヘルパーメソッドを実装した。

module BlogsHelper
  def amp_content(content)
    if content.present?
      text = content.to_s
      doc = Nokogiri::HTML.parse(text)
      doc.xpath('//img').each do |node|
        new_node = doc.create_element("amp-img")
        src = node.attribute("src").to_s
        width, height = FastImage.size(src)
        new_node['src'] = src
        new_node['width'] = width.to_s
        new_node['height'] = height.to_s
        node.replace(new_node)
      end
      doc.xpath('//action-text-attachment').each do |node|
        new_node = doc.create_element("div")
        new_node.inner_html = node.inner_html
        new_node['class'] = "action-text-attachment"
        node.replace(new_node)
      end
      doc.css('body')[0].inner_html.html_safe if doc.css('body').present?
    end
  end
end

少し冗長な部分もあるかもしれないが、<img>タグを<amp-img>に置き換えて、width, heightを設定した。画像のwidth, heightについてはFastImageというGemから取得して、設定している。
このGem自体は画像全体を読み込まなくても幅と高さを取得できるのが特徴らしい。

https://github.com/sdsykes/fastimage

あと、特別なことをやっている部分としてActionTextでなにかファイルを添付すると、<action-text-attachment>というタグが出来上がる。このタグについては当然Ampでは認識できないので単にDiv要素に変換している。これでひとまず完了。

当初はライブラリにしてみてもいいな、というのでActionTextをちょっといじってto_ampなんてメソッド早そうと思ったけど、なんかうまくいかないので、ヘルパーメソッドで今回は実現した。

関連しそうなブログ