rabbit-slide-unasuke-omotesandorb-51 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 0fdb99c91b2683e70c9f6cab7262437c1891f47219954951d9aba7564bba8b34
+  data.tar.gz: bf3e9b3b614bad26b679b0239d286e34a8ef639be5fd195ac98c4f4c1f6033ae
+SHA512:
+  metadata.gz: 954f3bdff37e8d59742308cef9033a23fc6c0fd4518154d61c81a325e3f66b03f0a27f1c20d70b66477d43a65a7db71c547e3db3cc2a16207604b0a4df776afc
+  data.tar.gz: 0b7d661be659d6ebf78028d1ea2122c1a18042ebb2d5de1aba8e4d6cb4f2cc14dc123d7078156e9c4f7133f1406e0062b5237a91b60c7b254429eeb05450b909

data/.rabbit

@@ -0,0 +1 @@
+slide.md

data/README.md

@@ -0,0 +1,24 @@
+# omotesandorb #51
+
+https://omotesandorb.connpass.com/event/149080/
+
+## 作者向け
+
+### 表示
+
+    rake
+
+### 公開
+
+    rake publish
+
+## 閲覧者向け
+
+### インストール
+
+    gem install rabbit-slide-unasuke-omotesandorb-51
+
+### 表示
+
+    rabbit rabbit-slide-unasuke-omotesandorb-51.gem
+

data/Rakefile

@@ -0,0 +1,17 @@
+require "rabbit/task/slide"
+
+# Edit ./config.yaml to customize meta data
+
+spec = nil
+Rabbit::Task::Slide.new do |task|
+  spec = task.spec
+  # spec.files += Dir.glob("doc/**/*.*")
+  # spec.files -= Dir.glob("private/**/*.*")
+  # spec.add_runtime_dependency("rabbit-theme-YOUR-THEME")
+end
+
+desc "Tag #{spec.version}"
+task :tag do
+  sh("git", "tag", "-a", spec.version.to_s, "-m", "Publish #{spec.version}")
+  sh("git", "push", "--tags")
+end

data/config.yaml

@@ -0,0 +1,21 @@
+---
+id: omotesandorb-51
+base_name: slide
+tags: ['ruby', 'markdown', 'html']
+presentation_date: 2019-10-03
+presentation_start_time:
+presentation_end_time:
+version: 1.0.0
+licenses: []
+slideshare_id:
+speaker_deck_id:
+ustream_id:
+vimeo_id:
+youtube_id:
+author:
+  markup_language: :markdown
+  name: unasuke
+  email: yusuke1994525@gmail.com
+  rubygems_user: unasuke
+  slideshare_user:
+  speaker_deck_user:

data/slide.md

@@ -0,0 +1,193 @@
+# Markdownで\\nLazy image loading
+subtitle
+: 2019-10-03
+
+subtitle
+: 表参道.rb #51
+
+author
+: うなすけ
+
+theme
+: unasuke-white
+
+
+# 自己紹介
+- 名前 : うなすけ
+- 仕事 : 株式会社バンク (エンジニア)
+  - インフラ寄りサーバーサイドエンジニア
+  - Ruby, Rails, Kubernetes...
+
+- {::tag name="x-small"}GitHub [@unasuke](https://github.com/unasuke){:/tag}
+- {::tag name="x-small"}Mastodon [@unasuke@mstdn.unasuke.com](https://mstdn.unasuke.com/@unasuke){:/tag}
+- {::tag name="x-small"}Twitter [@yu\_suke1994](https://twitter.com/yu_suke1994){:/tag}
+
+![](img/icon_raw.jpg){:relative_width="24" align="right" relative_margin_right="-10" relative_margin_top="42"}
+
+# はじめに
+See your [chrome://settings/help](chrome://settings/help)
+
+![](img/chrome-version.png){:relative_width="100"}
+
+# Native lazy-loading from Chrome 75!
+- [Native lazy-loading for the web  \|  web.dev](https://web.dev/native-lazy-loading)
+- [AddyOsmani.com - Native image lazy-loading for the web!](https://addyosmani.com/blog/lazy-loading/)
+- [遂に来る！ Chrome 75にてLazyLoadが正式に実装されるようです🎉 \| フロントエンドBlog \| ミツエーリンクス](https://www.mitsue.co.jp/knowledge/blog/frontend/201904/08_0854.html)
+
+# loading="lazy"
+Slimの場合
+
+```slim
+img(src="https://example.org/image.png" loading="lazy")
+```
+
+Hamlの場合
+
+```haml
+%img{src:"https://example.org/image.png", loading: "lazy"}
+```
+
+# loading="lazy"
+Markdownの場合
+
+```markdown
+<img src="https://example.org/image.png" loading="lazy" />
+```
+
+……いやいやいや
+
+# Markdownの場合の理想
+こう書いたら
+
+```markdown
+![](https://example.org/image.png)
+```
+
+こうなってほしい
+
+```html
+<img src="https://example.org/image.png" loading="lazy" />
+```
+
+# Markdownの場合の理想
+
+{:.center}
+{::tag name="x-large"}なぜそんなことを気にしているのか{:/tag}
+
+# blog.unasuke.comの事情
+- Middlemanと、blogプラグインによって生成されている
+- 記事自体はMarkdownで書かれている
+- 画像が重いというご意見がある
+
+# 画像が重いというご意見
+<https://github.com/unasuke/blog/pull/149>
+
+![](img/blog-pullreq-149.png){:relative_width="100"}
+
+# つまりこういうこと
+- blog.unasuke.comは画像が重いことに定評がある
+- img に `loading="lazy"`を付けられたらいいかも？
+- いやでもMarkdownやんけ…‥
+
+# どういう手順で進めるか
+理想
+
+1. `loading="lazy"` で本当に早くなるのか計測
+1. Markdownの変換結果になんとかして `loading="lazy"`をつける
+
+実際
+
+1. Markdownの変換結果になんとかして `loading="lazy"`をつける
+1. 本当に早くなるのか計測
+
+# なぜ計測ファーストでないか
+- 変換結果に介入できることが検証できなければ、早くなることが確認できても実現できないため
+- gemを作りたいという気持ちのほうが先にあった
+- うっかり
+
+# 実装やっていきましょう
+- blog.unasuke.comではRedcarpetを使っている
+  - <https://github.com/vmg/redcarpet>
+- RedcarpetにはCustom Rendererを指定できる
+- Custom Rendererで `image(link, title, alt_text)` の返り値をいじればできそう
+
+see also
+[Railsでカスタムmarkdownを実装する - k0kubun's blog](https://k0kubun.hatenablog.com/entry/2013/09/19/223400)
+
+# Minimum code
+```ruby
+class CustomRenderer < ::Redcarpet::Render::HTML
+  def image(link, title, alt_text)
+    "<img loading=\"lazy\" src=\"#{link}\" alt=\"#{alt_text}\" />"
+  end
+end
+```
+
+これでやりたいことは実現できる
+
+# gemができました
+<https://github.com/unasuke/redcarpet-render-html_lazy_img>
+
+![便利QRコード](https://i.imgur.com/QU9gYu8.png){:relative_width="40"}
+
+# gemができました
+
+```ruby
+markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTMLLazyImg::Lazy)
+markdown.render('![example image](https://example.com/img.png)')
+# => '<p><img loading="lazy" src="https://example.com/img.png" alt="example image" /></p>'
+
+markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTMLLazyImg::Auto)
+markdown.render('![example image](https://example.com/img.png)')
+# => '<p><img loading="auto" src="https://example.com/img.png" alt="example image" /></p>'
+
+markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTMLLazyImg::Eager)
+markdown.render('![example image](https://example.com/img.png)')
+# => '<p><img loading="eager" src="https://example.com/img.png" alt="example image" /></p>'
+```
+
+`loading` attributeの他の値にも対応
+(auto, eager)
+
+# Middlemanで使用するには
+`config.rb`にこのように書けばOK
+
+```ruby
+set :markdown, renderer: Redcarpet::Render::HTMLLazyImg::Lazy
+```
+
+# では計測しましょう
+使用するのは僕のブログ記事でも大量に画像を使用しているこの記事！
+
+[TEX Yoda Trackpoint Keyboardを買った \| うなすけとあれこれ](https://blog.unasuke.com/2015/tex-yoda-trackpoint-keyboard-assembly/)
+
+![](https://i.imgur.com/wu0yM2j.png){:relative_width="30"}
+
+# 計測方法
+1. 上記記事をhtmlとしてローカルに保存
+1. `<img>` に何もなし、`loading="lazy"`, `loading="eager"`を指定したものの3つを用意
+1. `chrome://flags/#enable-lazy-image-loading` を Enabledに
+1. Chrome Developer toolsでloadingやperformanceを見る
+
+※ もちろん Disable cacheの状態で
+
+# 結果 (6回計測)
+Load eventが発火するまでの時間
+
+| | 最悪値 | 最速値 | 平均値 |
+| -- | -- | -- | -- |
+| pure img | 8.33 | 5.42 | 6.25 |
+| lazy | 6.89 | 4.96 | 5.63 |
+| eager | 7.83 | 4.97 | 6.47 |
+
+Load eventはページ内の要素が全て読み込まれたら発火するのであまり意味のない計測だったかな……
+
+# 結果 (1回のみ取得)
+Performanceの結果
+
+![](img/performance-result.png){:relative_width="100"}
+
+# まとめ
+- Loadingにかかる時間が削減されておりよさそう
+- 画像のサイズは変わらないが、ページ自体は軽くなったのでは(サイズの話ではない)
+- Webの最新技術を使うのは楽しい！！！

metadata

@@ -0,0 +1,69 @@
+--- !ruby/object:Gem::Specification
+name: rabbit-slide-unasuke-omotesandorb-51
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- unasuke
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2019-10-03 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rabbit
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.2
+description: https://omotesandorb.connpass.com/event/149080/
+email:
+- yusuke1994525@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".rabbit"
+- README.md
+- Rakefile
+- config.yaml
+- img/blog-pullreq-149.png
+- img/chrome-version.png
+- img/icon_raw.jpg
+- img/perfiemance-eager.png
+- img/performance-img.png
+- img/performance-lazy.png
+- img/performance-result.png
+- pdf/omotesandorb-51-slide.pdf
+- slide.md
+homepage: https://slide.rabbit-shocker.org/authors/unasuke/omotesandorb-51/
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3
+signing_key: 
+specification_version: 4
+summary: 'omotesandorb #51'
+test_files: []