rabbit-slide-unasuke-omotesandorb-52 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: cedf195adcba391f2ad284ec58091af044cd8685ab9d0d8c43e602d2126a5723
+  data.tar.gz: e8dfe4f79905c12feebe18f0e8eb0dfd64fe099b59c06cd4cd5a2e8a59bf69c2
+SHA512:
+  metadata.gz: 75aa6bef62e3cf8c15a8af590ecd45e886cdb315e3c4182d3c0e3f22213e49436e1cb59bdf141842067685649119ba04e55bd6f64c0845da100414c7547a4daf
+  data.tar.gz: d0a26b5b8a8db9fe9d7b776c438dea0e35f745347ee7d124d0c799361d66b3cf19d5c748ae9a9e0cb5c33613e2c08fc32bdd84da55d8d6f39a856d8f1c231efb

data/.rabbit

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

data/README.md

@@ -0,0 +1,24 @@
+# omotesandorb #52
+
+https://omotesandorb.connpass.com/event/152234/
+
+## 作者向け
+
+### 表示
+
+    rake
+
+### 公開
+
+    rake publish
+
+## 閲覧者向け
+
+### インストール
+
+    gem install rabbit-slide-unasuke-omotesandorb-52
+
+### 表示
+
+    rabbit rabbit-slide-unasuke-omotesandorb-52.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-52
+base_name: slide
+tags: ['ruby', 'middleman', 'gem', 'html']
+presentation_date: 2019-11-07
+presentation_start_time: 
+presentation_end_time: 
+version: 1.0.0
+licenses: ['MIT']
+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,124 @@
+# Middlemanで\\nLazy image loading
+subtitle
+: 2019-11-07
+
+subtitle
+: 表参道.rb #52
+
+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"}
+
+# 前回のあらすじ
+1. `<img loading="lazy">` が良さげだし使ってみたい
+1. でもMarkdownでどうやって……？
+1. Redcarpetならrenderingを拡張できるぞ！
+1. `redcarpet-render-html_lazy_img` gemができました
+
+<https://slide.rabbit-shocker.org/authors/unasuke/omotesandorb-51/>
+
+# Middlemanに組み込んでみる
+```ruby
+set :markdown, renderer: Redcarpet::Render::HTMLLazyImg::Lazy
+```
+
+手元で↓になってることを確認
+
+```html
+<img src="https://example.org/image.png" loading="lazy" />
+```
+
+# 悲しいことに
+
+{:.center}
+{::tag name="x-large"}Deployしたら画像が全部\\nリンク切れになってしまった{:/tag}
+
+# リンク切れ、なぜ
+
+{:.center}
+↓↓元凶はこれだった↓↓
+
+```ruby
+activate :asset_hash
+```
+
+(assetにdigestをくっつけてcacheされないようにするもの)
+
+# なぜ asset_hash を有効にするとダメ？
+**A.** MiddlemanもRedcarpetのRendererを独自に拡張しているから
+
+```ruby
+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>
+
+# ここまでのまとめ
+- MiddlemanもRedcarpetを拡張している
+- 外部からRendererを挿入すると予期せぬ挙動
+  - 特に asset_hash
+- それでも `loading="lazy"` したい
+
+# じゃあどうするか
+- Middleman拡張をつくるしかないじゃんね
+  - ドキュメントがある
+  - これまでに2つ作ったことがある、できるはず
+    - middleman-somemoji
+    - middleman-hatenastar
+
+<https://middlemanapp.com/jp/advanced/custom-extensions/>
+
+# Middleman拡張
+- いくつかのコールバックを登録できる
+  - after_build がよさそう
+  - 生成されたhtml内の `<img>` を書き換える
+
+```ruby
+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
+```
+
+# できた
+<https://github.com/unasuke/middleman-img_loading_attribute>
+
+(本番投入まだだけど多分これでいける)
+
+(この実装だとpreの中の `<img>` も書き換えてしまうね？！)
+
+# まとめ
+- `<img loading="lazy">` を使うとき
+  - Markdownなら **redcarpet-render-html_lazy_img**
+  - Middlemanなら **middleman-img_loading_attribute**
+- 今日はこれを覚えて帰ってください

metadata

@@ -0,0 +1,64 @@
+--- !ruby/object:Gem::Specification
+name: rabbit-slide-unasuke-omotesandorb-52
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- unasuke
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2019-11-08 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/152234/
+email:
+- yusuke1994525@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".rabbit"
+- README.md
+- Rakefile
+- config.yaml
+- img/icon_raw.jpg
+- pdf/omotesandorb-52-slide.pdf
+- slide.md
+homepage: https://slide.rabbit-shocker.org/authors/unasuke/omotesandorb-52/
+licenses:
+- MIT
+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.6
+signing_key: 
+specification_version: 4
+summary: 'omotesandorb #52'
+test_files: []