MiddlemanでnLazy image loading

subtitle

2019-11-07

subtitle

表参道.rb #52

author

うなすけ

theme

unasuke-white

自己紹介

align=“right” relative_margin_right=“-10” relative_margin_top=“42”}

前回のあらすじ

  1. <img loading="lazy"> が良さげだし使ってみたい

  2. でもMarkdownでどうやって……?

  3. Redcarpetならrenderingを拡張できるぞ!

  4. redcarpet-render-html_lazy_img gemができました

slide.rabbit-shocker.org/authors/unasuke/omotesandorb-51/

Middlemanに組み込んでみる

set :markdown, renderer: Redcarpet::Render::HTMLLazyImg::Lazy

手元で↓になってることを確認

<img src="https://example.org/image.png" loading="lazy" />

悲しいことに

{:.center} {::tag name=“x-large”}Deployしたら画像が全部nリンク切れになってしまった{:/tag}

リンク切れ、なぜ

{:.center} ↓↓元凶はこれだった↓↓

activate :asset_hash

(assetにdigestをくっつけてcacheされないようにするもの)

なぜ asset_hash を有効にするとダメ?

A. MiddlemanもRedcarpetのRendererを独自に拡張しているから

def link(link, title, content)
  if !@local_options[:no_links]
    attributes = { title: title }
    attributes.merge!(@local_options[:link_attributes]) if @local_options[:link_attributes]

    scope.link_to(content, link, attributes)
  else
    link_string = link.dup
    link_string << %("#{title}") if title && !title.empty? && title != alt_text
    "[#{content}](#{link_string})"
  end
end

github.com/middleman/middleman/blob/master/middleman-core/lib/middleman-core/renderers/redcarpet.rb

ここまでのまとめ

じゃあどうするか

middlemanapp.com/jp/advanced/custom-extensions/

Middleman拡張

def after_build(builder)
  files = Dir.glob(File.join(app.config[:build_dir], "**", "*.html"))
  files.each do |file|
    contents = File.read(file)
    replaced = contents.gsub(%r[<img], "<img loading=\"#{options[:loading]}\"")
    File.open(file, 'w') do |f|
      f.write replaced
    end
  end
end

できた

github.com/unasuke/middleman-img_loading_attribute

(本番投入まだだけど多分これでいける)

(この実装だとpreの中の <img> も書き換えてしまうね?!)

まとめ