Text
Page: 1
Middlemanで
Lazy image loading
2019-11-07
表参道.rb #52
うなすけ
Page: 2
自己紹介
名前 : うなすけ
仕事 : フリーランスのプラグラマー
インフラ寄りサーバーサイドエンジニア
Ruby, Rails, Kubernetes…
GitHub @unasuke
Mastodon @unasuke@mstdn.unasuke.com
Twitter @yu_suke1994
Page: 3
前回のあらすじ
1. <img loading="lazy"> が良さげだし使ってみたい
2. でもMarkdownでどうやって……？
3. Redcarpetならrenderingを拡張できるぞ！
4. redcarpet-render-html_lazy_img gemができました
https://slide.rabbit-shocker.org/authors/unasuke/
omotesandorb-51/
Page: 4
Middlemanに組み込んでみる
set :markdown, renderer: Redcarpet::Render::HTMLLazyImg::Lazy
手元で↓になってることを確認
<img src="https://example.org/image.png" loading="lazy" />
Page: 5
悲しいことに
Deployしたら画像が全部
リンク切れになってしまった
Page: 6
リンク切れ、なぜ
↓↓元凶はこれだった↓↓
activate :asset_hash
(assetにdigestをくっつけてcacheされないようにする
もの)
Page: 7
なぜ 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
https://github.com/middleman/middleman/blob/
master/middleman-core/lib/middleman-core/
renderers/redcarpet.rb
Page: 8
ここまでのまとめ
MiddlemanもRedcarpetを拡張している
外部からRendererを挿入すると予期せぬ挙動
特に asset_hash
それでも loading="lazy" したい
Page: 9
じゃあどうするか
Middleman拡張をつくるしかないじゃんね
ドキュメントがある
これまでに2つ作ったことがある、できるはず
middleman-somemoji
middleman-hatenastar
https://middlemanapp.com/jp/advanced/custom-
extensions/
Page: 10
Middleman拡張
いくつかのコールバックを登録できる
after_build がよさそう
生成されたhtml内の <img> を書き換える
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
Page: 11
できた
https://github.com/unasuke/middleman-
img_loading_attribute
(本番投入まだだけど多分これでいける)
(この実装だとpreの中の <img> も書き換えてしまう
ね？！)
Page: 12
まとめ
<img loading="lazy"> を使うとき
Markdownなら redcarpet-render-html_lazy_img
Middlemanなら middleman-img_loading_attribute
今日はこれを覚えて帰ってください
![](9.png "Middleman拡張
いくつかのコールバックを登録できる
after_build がよさそう
生成されたhtml内の <img> を書き換える
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")
![](mini-9.png "Middleman拡張
いくつかのコールバックを登録できる
after_build がよさそう
生成されたhtml内の <img> を書き換える
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")
