Merge pull request #1382 from coderdojo-japan/implement-and-replace-with-lazy-image-tag

Kataページの画像をlazy_image_tagで遅延読込に対応

Author: yasulab

app/assets/images/events_cover.min.jpg

@@ -50,4 +50,18 @@ def using_scrivito?
   def is_kata?
     request.path.starts_with? "/kata"
   end
+
+  # 画像を aFarkas/lazysizes 経由で遅延読み込みする
+  # cf. https://github.com/aFarkas/lazysizes
+  def lazy_image_tag(source, options={})
+    options['data-src'] = asset_path(source)
+    options['loading']  = 'lazy' # Optimize if available
+    options[:class].blank? ?
+      options[:class] = "lazyload" :
+      options[:class] = "lazyload #{options[:class]}"
+
+    options[:min].blank? ?
+      image_tag(asset_path('/spinner.svg'), options) :
+      image_tag(asset_path(options[:min]),  options)
+  end
 end

app/assets/images/events_cover.png

@@ -32,7 +32,7 @@
 	  <p>CoderDojo は、7〜17歳を対象とした非営利のプログラミング道場です。2011年にアイルランドから始まり、世界では110カ国・2,200以上の道場、日本では<a href="https://coderdojo.jp/#dojos">全国に222以上</a>の道場があります。CoderDojo は全国各地で定期的に開催されており、<a style="background-color: #ffffff;" href="https://coderdojo.jp/stats">延べ10,000人以上</a>の子ども達が毎年楽しみながら様々な作品を創っています。</p>
 	  <br>
 	  <p>各 Dojo は、チャンピオンやメンターと呼ばれる協力者によって自主的に運営されています。プログラマーやデザイナーだけでなく、学生や教員、アーティストやフリーランス、起業家や投資家などの方々が分野横断的に協力しあって、それぞれの Dojo が継続的に運営されています。もちろん、参加者自身や参加者の親が運営に協力する事例も多いです。</p>
-	  <img class="img-responsive lazyload" style="margin-bottom: 100px;" src="/kata/coderdojo-zero.png" alt="CoderDojo を支える方々の写真" />
+	  <%= lazy_image_tag('/kata/coderdojo-zero.png', alt: 'CoderDojo を支える方々の写真', style: 'margin-top: 30px; margin-bottom: 100px;') %>
 
 	  <h3><strong>まず何を読むといい？</strong> 🤔</h3>
 	  <p>初めての方向けには次の資料をオススメしています。スライドや動画、インタビュー記事を見ると CoderDojo の雰囲気が掴めます。</p>
@@ -175,7 +175,8 @@
 
 	  <div id="learn" class="headline-anchor"></div>
 	  <h2 class="headline">📚 学ぶ</h2>
-	  <img class="img-responsive lazyload" style="margin-bottom: 30px;" src="/kata/learn.png" alt="CoderDojo 梅田の様子" />
+	  <%= lazy_image_tag('/kata/learn.png', alt: 'CoderDojo 梅田の様子', style: 'margin-bottom: 30px;') %>
+
 	  <div>
 	      <div>
 		<p><a href="https://coderdojo.jp/stats">毎年 1,500 回以上</a>の Dojo が日本各地で開催されているため、CoderDojo で得られた知見を元に教材が作られることも多いです。</p>
@@ -304,7 +305,8 @@
 
 	    <div id="challenge" class="headline-anchor"></div>
 	    <h2 class="headline">腕試し</h2>
-	    <img class="img-responsive lazyload" src="/kata/challenge.png" alt="DojoCon Japan の様子" />
+	    <%= lazy_image_tag('/kata/challenge.png', alt: 'DojoCon Japan の様子') %>
+
 	    <div>
 	      <div>
 		<p><br>プログラミングはやればやるほど日に日に力がついていきます。「プログラミングに少し慣れたかな」と感じたら、腕試しのつもりでキャンプやコンテストに挑戦してみてはいかがでしょうか?</p>
@@ -408,7 +410,8 @@
 
 	    <div id="startup" class="headline-anchor"></div>
 	    <h2 class="headline">立ち上げる</h2>
-	    <img class="img-responsive lazyload" src="/kata/startup.png" alt="CoderDojo 調布の様子" />
+	    <%= lazy_image_tag('/kata/startup.png', alt: 'CoderDojo 調布の様子') %>
+	    <br>
 	    <br>
 	    <div>
 	      <div>
@@ -437,7 +440,7 @@
 		<h2><strong>Dojo の設立・初回開催までの流れ</strong><span style="font-size: 20px;">（制作: <a href="https://coderdojo-kodaira.github.io/">CoderDojo Kodaira</a>）</span></h2>
 	      </div>
 	    </div>
-	    <img class="img-responsive lazyload" style="margin-bottom: 100px;" src="/kata/startup-flowchart.png" alt="CoderDojo の立ち上げから開催までのフローチャート" />
+	    <%= lazy_image_tag('/kata/startup-flowchart.png', alt: 'CoderDojo の立ち上げから開催までのフローチャート', style: "margin-bottom: 100px;") %>
 	    <div>
 	      <div>
 		<h2><strong>アカウント登録から、申請までの流れ</strong></h2>
@@ -504,11 +507,13 @@
 		<p><strong>お疲れ様でした!</strong> 👏✨ 以上で一連の手続きは終わりになります。Dojo として承認されたら、次の項目「<strong><a href="/kata#support">支援</a></strong>」でまとめている各種プログラムに申請することができます。皆さんの CoderDojo 運営の一助になれば嬉しいです! 😸</p>
 	      </div>
 	    </div>
+
 	    <div>
 	      <div id="support" class="headline-anchor"></div>
 	      <h2 class="headline">🤝 支援・資料</h2>
 	    </div>
-	    <img class="img-responsive lazyload" src="/kata/support.png" alt="CoderDojo in Minecraft" />
+	    <%= lazy_image_tag('/kata/support.png', alt: 'CoderDojo in Minecraft') %>
+
 	    <div>
 	      <div>
 		<p><br>CoderDojo は国内外のパートナー企業から様々な支援を得ております。承認された Dojo では、必要に応じて次の支援を得ることができます。<a href="/kata#startup">CoderDojo を立ち上げて</a>、承認されたら、ぜひご活用ください 😆</p>
@@ -716,7 +721,8 @@
 	      <div id="faq" class="headline-anchor"></div>
 	      <h2 class="headline">📑 FAQ</h2>
 	    </div>
-	    <img class="img-responsive lazyload" src="/kata/faq.png" alt="統計情報：参加者数の推移" />
+	    <%= lazy_image_tag('/kata/faq.png', alt: '統計情報：参加者数の推移') %>
+
 	    <div>
 	      <div>
 		<br>

app/helpers/application_helper.rb

@@ -4,7 +4,7 @@
 - provide(:meta_image,  "/img/ogp-events.jpeg")
 
 %section.cover
-  = image_tag "events_cover.jpg"
+  = lazy_image_tag 'events_cover.jpg', min: 'events_cover.min.jpg', alt: 'Cover Photo on Upcoming Events'
 
 %section#events.text-center
   %br

app/views/docs/kata.html.erb

@@ -5,8 +5,7 @@
   %br
 
 %section.cover
-  = image_tag "/coderdojo-japan_cover.min.jpg", alt: 'CoderDojo Japan カバー画像', class: 'lazyload',
-              "data-src" => "/coderdojo-japan_cover.jpg", loading: 'lazy'
+  = lazy_image_tag '/coderdojo-japan_cover.jpg', min: '/coderdojo-japan_cover.min.jpg', alt: 'CoderDojo Japan カバー画像'
 
 %section.introduction.text-center.list
   %p
@@ -40,7 +39,7 @@
     次の動画や記事をぜひ！😆
 
   %div.home-point-thumbnail{style: "margin-top: 30px; margin-bottom: 30px;"}
-    = link_to image_tag("/video-thumbnail.min.jpg", alt: 'Promotion Video by CoderDojo Kashiwa', class: 'lazyload', loading: 'lazy', 'data-src' => '/video-thumbnail.jpg'), 'https://www.youtube.com/watch?v=gLDue2xb1j8', target: "_blank", rel: "external noopener"
+    = link_to lazy_image_tag('/video-thumbnail.jpg', min: '/video-thumbnail.min.jpg', alt: 'Promotion Video by CoderDojo Kashiwa'), 'https://www.youtube.com/watch?v=gLDue2xb1j8', target: "_blank", rel: "external noopener"
   /%div.home-point-video
   /  %iframe{allowfullscreen: "", frameborder: "0", height: "315", width: "560",
   /          src: "https://www.youtube.com/embed/gLDue2xb1j8?rel=0"}
@@ -73,7 +72,7 @@
 /
   %ol.bxslider{style: "list-style: none; margin-left: -40px; margin-top: 30px;"}
     %li
-      = link_to image_tag("dojocon_japan_2020.png", alt: "DojoCon Japan 2020", style: "margin-bottom: 15px;", class: 'lazyload', loading: 'lazy'), "https://dojocon2020.coderdojo.jp/", target: "_blank", rel: "external noopener"
+      = link_to lazy_image_tag('dojocon_japan_2020.png', alt: "DojoCon Japan 2020", style: "margin-bottom: 15px;"), "https://dojocon2020.coderdojo.jp/", target: "_blank", rel: "external noopener"
 
   %p
     12月27日に
@@ -169,9 +168,7 @@
       %a{href: "/kata#support"}<> 『支援』
       をお読みください。
     %div.kata
-      = link_to image_tag("/kata_cover.min.jpg", alt: 'Kata カバー画像', class: 'lazyload',
-                          'data-src' => '/kata_cover.jpg', loading: 'lazy',
-                            style: 'margin-bottom: 15px;'), '/kata'
+      = link_to lazy_image_tag('/kata_cover.jpg', min: '/kata_cover.min.jpg', alt: 'Kata カバー画像', style: 'margin-bottom: 15px;'), '/kata'
       %a.button-to-details{href: '/kata'} Kata を読む
 
 %section.detail-introduction.partners_logo.text-center#partners{style: "padding-top: 50px;"}

app/views/events/index.html.haml

@@ -4,8 +4,7 @@
 
 %body
   %section
-  = image_tag "/cover.png", alt: 'CoderDojo Japan カバー画像', class: 'lazyload', loading: 'lazy', "data-src" => "/cover.png", style: 'border-radius: 0; '
-
+  = lazy_image_tag "/cover.png", alt: 'CoderDojo Japan カバー画像', style: 'border-radius: 0;'  
 
   %h1.text-center.intro-header{style: "margin-top: 40px; padding-bottom: 20px;"} ログイン
   %div{style: 'margin: 0 60px 100px'}

app/views/home/show.html.haml

@@ -3,13 +3,13 @@
 <% provide(:url,   @url ) %>
 <% provide(:meta_image,  "/img/ogp-dojocast.jpeg") %>
 
-<img class="dojocast-cover lazyload" alt="DojoCast Cover Photo" src="/spinner.svg" data-src="/img/dojocast-cover.jpg" loading='lazy' />
+<%= lazy_image_tag('/podcasts/dojocast-cover.jpg', alt: 'DojoCast Cover Photo', class: 'dojocast-cover') %>
 
 <div class="container" style="line-height: 2.2em;">
   <section class="doc" style="padding: 50px 0px 0px 0px;">
     <h1 style="text-align: center;"><%= @title %></h1>
     <p style="text-align: center; padding-bottom: 10px;">CoderDojo コミュニティに関わる人々を<br class="ignore-pc">ハイライトするポッドキャスト番組です 📻✨</p>
-    <img class="lazyload" src="/podcasts/cover-sub.jpg" alt="インタビューの様子"/>
+    <%= lazy_image_tag('/podcasts/cover-sub.jpg', alt: 'DojoCast の収録の様子') %>
 
     <div class='text-center' style="margin-top: 30px;">
       <div class="g-ytsubscribe" data-channelid="UCal5GuoCDCMDQe07w69TuJA" data-layout="full" data-count="default"></div>

app/views/login_page/index.html.haml

@@ -3,7 +3,7 @@
 <% provide(:url,   @url) %>
 <% provide(:meta_image,  @episode.cover) %>
 
-<img class="dojocast-cover" alt="DojoCast Cover Photo" src="/img/dojocast-cover.jpg" />
+<%= lazy_image_tag('/podcasts/dojocast-cover.jpg', alt: 'DojoCast Cover Photo', class: 'dojocast-cover') %>
 
 <style type="text/css">
   .prev { display: table-cell; font-color: white; text-align: left;   }

app/views/podcasts/index.html.erb

@@ -8,8 +8,10 @@
         %span.icon-bar
         %span.icon-bar
       .navbar-header-logos
-        = link_to image_tag('/img/header-logo.png',  alt: 'CoderDojo logo'),  '/', id: "header-logo"
-        = link_to image_tag('/img/header-brand.png', alt: 'CoderDojo brand'), '/', id: "header-brand"
+        = link_to lazy_image_tag('/img/header-logo.png',  min: '/img/header-logo.min.png',
+                                 alt: 'CoderDojo logo'),  '/', id: "header-logo"
+        = link_to lazy_image_tag('/img/header-brand.png', min: '/img/header-brand.min.png',
+                                 alt: 'CoderDojo brand'), '/', id: "header-brand"
     #bs-example-navbar-collapse-1.collapse#header-nav-toggle.navbar-collapse
       %ul.nav.navbar-nav.navbar-right
         %li= link_to '全国の道場',     '/#dojos'

app/views/podcasts/show.html.erb

@@ -1,4 +1,6 @@
 <section id="app" class="text-center grayscale-bg" style="padding-top: 50px; padding-bottom: 100px;">
   <h3 id="subscribe" style="text-align: center; padding-top: 50px; padding-bottom: 10px;">🎧 アプリで聴く</h3>
-  <a href="https://podcasts.apple.com/us/podcast/dojocast/id1458122473?itsct=podcast_box&amp;itscg=30200" style="display: inline-block; overflow: hidden; border-radius: 13px; width: 250px; height: 83px;"><img src="https://tools.applemediaservices.com/api/badges/listen-on-apple-podcasts/badge/ja-JP?size=250x83&amp;releaseDate=1596412800&h=47ef418d9788a856fa78aa97c154cfe5" alt="Listen on Apple Podcasts" style="border-radius: 13px; width: 250px; height: 83px;"></a>
+  <a href="https://podcasts.apple.com/us/podcast/dojocast/id1458122473?itsct=podcast_box&amp;itscg=30200" style="display: inline-block; overflow: hidden; border-radius: 13px; width: 250px; height: 83px;">
+    <%= lazy_image_tag('https://tools.applemediaservices.com/api/badges/listen-on-apple-podcasts/badge/ja-JP?size=250x83&amp;releaseDate=1596412800&h=47ef418d9788a856fa78aa97c154cfe5', alt: 'Listen on Apple Podcasts', style: 'border-radius: 13px; width: 250px; height: 83px;') %>
+  </a>
 </section>