Rabbit Slide Show

omotesandorb #52

2019-11-07

Description

https://omotesandorb.connpass.com/event/152234/

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
今日はこれを覚えて帰ってください

Other slides