checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: cedf195adcba391f2ad284ec58091af044cd8685ab9d0d8c43e602d2126a5723
4
+ data.tar.gz: e8dfe4f79905c12feebe18f0e8eb0dfd64fe099b59c06cd4cd5a2e8a59bf69c2
5
+ SHA512:
6
+ metadata.gz: 75aa6bef62e3cf8c15a8af590ecd45e886cdb315e3c4182d3c0e3f22213e49436e1cb59bdf141842067685649119ba04e55bd6f64c0845da100414c7547a4daf
7
+ data.tar.gz: d0a26b5b8a8db9fe9d7b776c438dea0e35f745347ee7d124d0c799361d66b3cf19d5c748ae9a9e0cb5c33613e2c08fc32bdd84da55d8d6f39a856d8f1c231efb
data/.rabbit ADDED
@@ -0,0 +1 @@
1
+ slide.md
data/README.md ADDED
@@ -0,0 +1,24 @@
1
+ # omotesandorb #52
2
+
3
+ https://omotesandorb.connpass.com/event/152234/
4
+
5
+ ## 作者向け
6
+
7
+ ### 表示
8
+
9
+ rake
10
+
11
+ ### 公開
12
+
13
+ rake publish
14
+
15
+ ## 閲覧者向け
16
+
17
+ ### インストール
18
+
19
+ gem install rabbit-slide-unasuke-omotesandorb-52
20
+
21
+ ### 表示
22
+
23
+ rabbit rabbit-slide-unasuke-omotesandorb-52.gem
24
+
data/Rakefile ADDED
@@ -0,0 +1,17 @@
1
+ require "rabbit/task/slide"
2
+
3
+ # Edit ./config.yaml to customize meta data
4
+
5
+ spec = nil
6
+ Rabbit::Task::Slide.new do |task|
7
+ spec = task.spec
8
+ # spec.files += Dir.glob("doc/**/*.*")
9
+ # spec.files -= Dir.glob("private/**/*.*")
10
+ # spec.add_runtime_dependency("rabbit-theme-YOUR-THEME")
11
+ end
12
+
13
+ desc "Tag #{spec.version}"
14
+ task :tag do
15
+ sh("git", "tag", "-a", spec.version.to_s, "-m", "Publish #{spec.version}")
16
+ sh("git", "push", "--tags")
17
+ end
data/config.yaml ADDED
@@ -0,0 +1,21 @@
1
+ ---
2
+ id: omotesandorb-52
3
+ base_name: slide
4
+ tags: ['ruby', 'middleman', 'gem', 'html']
5
+ presentation_date: 2019-11-07
6
+ presentation_start_time:
7
+ presentation_end_time:
8
+ version: 1.0.0
9
+ licenses: ['MIT']
10
+ slideshare_id:
11
+ speaker_deck_id:
12
+ ustream_id:
13
+ vimeo_id:
14
+ youtube_id:
15
+ author:
16
+ markup_language: :markdown
17
+ name: unasuke
18
+ email: yusuke1994525@gmail.com
19
+ rubygems_user: unasuke
20
+ slideshare_user:
21
+ speaker_deck_user:
data/img/icon_raw.jpg ADDED
Binary file
data/pdf/omotesandorb-52-slide.pdf ADDED
Binary file
data/slide.md ADDED
@@ -0,0 +1,124 @@
1
+ # Middlemanで\\nLazy image loading
2
+ subtitle
3
+ : 2019-11-07
4
+
5
+ subtitle
6
+ : 表参道.rb #52
7
+
8
+ author
9
+ : うなすけ
10
+
11
+ theme
12
+ : unasuke-white
13
+
14
+ # 自己紹介
15
+ - 名前 : うなすけ
16
+ - 仕事 : フリーランスのプラグラマー
17
+ - インフラ寄りサーバーサイドエンジニア
18
+ - Ruby, Rails, Kubernetes...
19
+
20
+ - {::tag name="x-small"}GitHub [@unasuke](https://github.com/unasuke){:/tag}
21
+ - {::tag name="x-small"}Mastodon [@unasuke@mstdn.unasuke.com](https://mstdn.unasuke.com/@unasuke){:/tag}
22
+ - {::tag name="x-small"}Twitter [@yu\_suke1994](https://twitter.com/yu_suke1994){:/tag}
23
+
24
+ ![](img/icon_raw.jpg){:relative_width="24" align="right" relative_margin_right="-10" relative_margin_top="42"}
25
+
26
+ # 前回のあらすじ
27
+ 1. `<img loading="lazy">` が良さげだし使ってみたい
28
+ 1. でもMarkdownでどうやって……?
29
+ 1. Redcarpetならrenderingを拡張できるぞ!
30
+ 1. `redcarpet-render-html_lazy_img` gemができました
31
+
32
+ <https://slide.rabbit-shocker.org/authors/unasuke/omotesandorb-51/>
33
+
34
+ # Middlemanに組み込んでみる
35
+ ```ruby
36
+ set :markdown, renderer: Redcarpet::Render::HTMLLazyImg::Lazy
37
+ ```
38
+
39
+ 手元で↓になってることを確認
40
+
41
+ ```html
42
+ <img src="https://example.org/image.png" loading="lazy" />
43
+ ```
44
+
45
+ # 悲しいことに
46
+
47
+ {:.center}
48
+ {::tag name="x-large"}Deployしたら画像が全部\\nリンク切れになってしまった{:/tag}
49
+
50
+ # リンク切れ、なぜ
51
+
52
+ {:.center}
53
+ ↓↓元凶はこれだった↓↓
54
+
55
+ ```ruby
56
+ activate :asset_hash
57
+ ```
58
+
59
+ (assetにdigestをくっつけてcacheされないようにするもの)
60
+
61
+ # なぜ asset_hash を有効にするとダメ?
62
+ **A.** MiddlemanもRedcarpetのRendererを独自に拡張しているから
63
+
64
+ ```ruby
65
+ def link(link, title, content)
66
+ if !@local_options[:no_links]
67
+ attributes = { title: title }
68
+ attributes.merge!(@local_options[:link_attributes]) if @local_options[:link_attributes]
69
+
70
+ scope.link_to(content, link, attributes)
71
+ else
72
+ link_string = link.dup
73
+ link_string << %("#{title}") if title && !title.empty? && title != alt_text
74
+ "[#{content}](#{link_string})"
75
+ end
76
+ end
77
+ ```
78
+ <https://github.com/middleman/middleman/blob/master/middleman-core/lib/middleman-core/renderers/redcarpet.rb>
79
+
80
+ # ここまでのまとめ
81
+ - MiddlemanもRedcarpetを拡張している
82
+ - 外部からRendererを挿入すると予期せぬ挙動
83
+ - 特に asset_hash
84
+ - それでも `loading="lazy"` したい
85
+
86
+ # じゃあどうするか
87
+ - Middleman拡張をつくるしかないじゃんね
88
+ - ドキュメントがある
89
+ - これまでに2つ作ったことがある、できるはず
90
+ - middleman-somemoji
91
+ - middleman-hatenastar
92
+
93
+ <https://middlemanapp.com/jp/advanced/custom-extensions/>
94
+
95
+ # Middleman拡張
96
+ - いくつかのコールバックを登録できる
97
+ - after_build がよさそう
98
+ - 生成されたhtml内の `<img>` を書き換える
99
+
100
+ ```ruby
101
+ def after_build(builder)
102
+ files = Dir.glob(File.join(app.config[:build_dir], "**", "*.html"))
103
+ files.each do |file|
104
+ contents = File.read(file)
105
+ replaced = contents.gsub(%r[<img], "<img loading=\"#{options[:loading]}\"")
106
+ File.open(file, 'w') do |f|
107
+ f.write replaced
108
+ end
109
+ end
110
+ end
111
+ ```
112
+
113
+ # できた
114
+ <https://github.com/unasuke/middleman-img_loading_attribute>
115
+
116
+ (本番投入まだだけど多分これでいける)
117
+
118
+ (この実装だとpreの中の `<img>` も書き換えてしまうね?!)
119
+
120
+ # まとめ
121
+ - `<img loading="lazy">` を使うとき
122
+ - Markdownなら **redcarpet-render-html_lazy_img**
123
+ - Middlemanなら **middleman-img_loading_attribute**
124
+ - 今日はこれを覚えて帰ってください
metadata ADDED
@@ -0,0 +1,64 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: rabbit-slide-unasuke-omotesandorb-52
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.0.0
5
+ platform: ruby
6
+ authors:
7
+ - unasuke
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2019-11-08 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: rabbit
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: 2.0.2
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ">="
25
+ - !ruby/object:Gem::Version
26
+ version: 2.0.2
27
+ description: https://omotesandorb.connpass.com/event/152234/
28
+ email:
29
+ - yusuke1994525@gmail.com
30
+ executables: []
31
+ extensions: []
32
+ extra_rdoc_files: []
33
+ files:
34
+ - ".rabbit"
35
+ - README.md
36
+ - Rakefile
37
+ - config.yaml
38
+ - img/icon_raw.jpg
39
+ - pdf/omotesandorb-52-slide.pdf
40
+ - slide.md
41
+ homepage: https://slide.rabbit-shocker.org/authors/unasuke/omotesandorb-52/
42
+ licenses:
43
+ - MIT
44
+ metadata: {}
45
+ post_install_message:
46
+ rdoc_options: []
47
+ require_paths:
48
+ - lib
49
+ required_ruby_version: !ruby/object:Gem::Requirement
50
+ requirements:
51
+ - - ">="
52
+ - !ruby/object:Gem::Version
53
+ version: '0'
54
+ required_rubygems_version: !ruby/object:Gem::Requirement
55
+ requirements:
56
+ - - ">="
57
+ - !ruby/object:Gem::Version
58
+ version: '0'
59
+ requirements: []
60
+ rubygems_version: 3.0.6
61
+ signing_key:
62
+ specification_version: 4
63
+ summary: 'omotesandorb #52'
64
+ test_files: []