前のブログでこのブログをAmp対応したと書いたが、正確に言えば、「画像がないブログ」については対応を完了したというのが正しい。
今回はブログで画像を含んだ本文の記事についてもAmp対応させてみた。
ちなみにこのブログはレールに沿って作られているので、WYSIWYGエディタについては、ActionTextを使っている。
実装自体はいたってシンプルで下記のコードのようにヘルパーメソッドを実装した。
今回はブログで画像を含んだ本文の記事についても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なんてメソッド早そうと思ったけど、なんかうまくいかないので、ヘルパーメソッドで今回は実現した。