テックブログを AMP 対応しました

# html_path は書き換える html が存在するファイルパス、html は html 本体
def ampnize(html_path, html)
  # CSS は外部参照ではなく HTML 本体に埋め込みます
  stylesheet_link_regex = /<link href="([..\/]*?stylesheets\/[\w\-]*\.css)" rel="stylesheet" \/>/
  inline_stylesheet = File.read('build' + html.match(stylesheet_link_regex)[1])
  html.gsub!(stylesheet_link_regex, '<style amp-custom>'+ inline_stylesheet + '</style>')

  html = Nokogiri::HTML(html)

  # amphtml を canonical に書き換えます
  canonical = html.css('link[rel=amphtml]')[0]
  canonical['rel'] = "canonical"
  canonical['href'] = canonical['href'].gsub(/amp\//, '')

  # AMP ページではソーシャルボタンは AMP 仕様に沿ったものしか使えないので全部取り除きます
  html.search('.hatena-bookmark').remove
  html.search('.fb-share-button').remove
  html.search('.pocket').remove

  # inline な style は AMP では使えないので消します
  html.search('.//@style').remove
  # br に clear 属性は許されていないそうです
  html.search('.//br').each{|e| e.attributes['clear'].remove if e['clear'] }
  # target=blank は AMP では使えないので _blank に置き換えます
  html.search('.//@target').each{|e| e.value = "_blank" if e.value == "blank" }
  ...(省略)
  html.to_s

doctype html
html
  head
    meta charset="utf-8"
    meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"
    meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no"
    link rel='amphtml' href="https://tech.pepabo.com/amp/#{current_page.path.sub(/blog\//, '').sub(/index.html/, '')}"
    ...(省略)

# For AMP: https://github.com/adekbadek/amp-mm/
PAGES_TO_AMP = []
#
# https://middlemanapp.com/advanced/sitemap/#using-the-sitemap-in-config-rb
ready do
  sitemap.resources.each do |page|
    # XXX https://github.com/middleman/middleman-blog/blob/master/lib/middleman-blog/blog_article.rb#L344
    next unless page.inspect =~ /Middleman::Blog::BlogArticle/
    amp_page_path = page.path.gsub(/^blog\//, '')
    proxy "/amp/#{amp_page_path}", page.path
    PAGES_TO_AMP.push(amp_page_path)
  end
end

after_build do
  PAGES_TO_AMP.each do |name|
    amp_page = "build/amp/#{name}"

    html = File.read("build/#{name}")
    amp_html = ampnize(amp_page, html)
    File.write(amp_page, amp_html)
  end
end

- npm -g install amphtml-validator
- amphtml-validator build/amp/*/*/*/*/*.html