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

Author: yasulab

app/views/docs/kata.html.erb

@@ -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>