From 39fc78c99ff1ecb1731bb38b617f51f80a49dc82 Mon Sep 17 00:00:00 2001 From: Yohei Yasukawa Date: Sun, 5 Sep 2021 15:09:20 +0900 Subject: [PATCH 01/11] =?UTF-8?q?image=5Ftag=E3=82=92=E6=8B=A1=E5=BC=B5?= =?UTF-8?q?=E3=81=97=E3=81=9Flazy=5Fimage=5Ftag=E3=83=98=E3=83=AB=E3=83=91?= =?UTF-8?q?=E3=83=BC=E3=82=92=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/helpers/application_helper.rb | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index c7852ebc6..223930447 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -50,4 +50,16 @@ 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]}" + + image_tag('/spinner.svg', options) + end end From 2c53eafeefd1656baa54096884b9cf9e822d9d87 Mon Sep 17 00:00:00 2001 From: Yohei Yasukawa Date: Sun, 5 Sep 2021 15:22:11 +0900 Subject: [PATCH 02/11] =?UTF-8?q?Kata=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE?= =?UTF-8?q?=E7=94=BB=E5=83=8F=E3=82=92lazy=5Fimage=5Ftag=E3=81=A7=E9=81=85?= =?UTF-8?q?=E5=BB=B6=E8=AA=AD=E8=BE=BC=E3=81=AB=E5=AF=BE=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/views/docs/kata.html.erb | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/app/views/docs/kata.html.erb b/app/views/docs/kata.html.erb index b1256ae7c..24e3785f2 100644 --- a/app/views/docs/kata.html.erb +++ b/app/views/docs/kata.html.erb @@ -32,7 +32,7 @@

CoderDojo は、7〜17歳を対象とした非営利のプログラミング道場です。2011年にアイルランドから始まり、世界では110カ国・2,200以上の道場、日本では全国に222以上の道場があります。CoderDojo は全国各地で定期的に開催されており、延べ10,000人以上の子ども達が毎年楽しみながら様々な作品を創っています。


各 Dojo は、チャンピオンやメンターと呼ばれる協力者によって自主的に運営されています。プログラマーやデザイナーだけでなく、学生や教員、アーティストやフリーランス、起業家や投資家などの方々が分野横断的に協力しあって、それぞれの Dojo が継続的に運営されています。もちろん、参加者自身や参加者の親が運営に協力する事例も多いです。

- CoderDojo を支える方々の写真 + <%= lazy_image_tag('/kata/coderdojo-zero.png', alt: 'CoderDojo を支える方々の写真', style: 'margin-top: 30px; margin-bottom: 100px;') %>

まず何を読むといい？ 🤔

初めての方向けには次の資料をオススメしています。スライドや動画、インタビュー記事を見ると CoderDojo の雰囲気が掴めます。

@@ -175,7 +175,8 @@

📚 学ぶ

- CoderDojo 梅田の様子 + <%= lazy_image_tag('/kata/learn.png', alt: 'CoderDojo 梅田の様子', style: 'margin-bottom: 30px;') %> +

毎年 1,500 回以上の Dojo が日本各地で開催されているため、CoderDojo で得られた知見を元に教材が作られることも多いです。

@@ -304,7 +305,8 @@

腕試し

- DojoCon Japan の様子 + <%= lazy_image_tag('/kata/challenge.png', alt: 'DojoCon Japan の様子') %> +


プログラミングはやればやるほど日に日に力がついていきます。「プログラミングに少し慣れたかな」と感じたら、腕試しのつもりでキャンプやコンテストに挑戦してみてはいかがでしょうか?

@@ -408,7 +410,8 @@

立ち上げる

- CoderDojo 調布の様子 + <%= lazy_image_tag('/kata/startup.png', alt: 'CoderDojo 調布の様子') %> +

@@ -437,7 +440,7 @@

Dojo の設立・初回開催までの流れ（制作: CoderDojo Kodaira）

- CoderDojo の立ち上げから開催までのフローチャート + <%= lazy_image_tag('/kata/startup-flowchart.png', alt: 'CoderDojo の立ち上げから開催までのフローチャート', style: "margin-bottom: 100px;") %>

アカウント登録から、申請までの流れ

@@ -504,11 +507,13 @@

お疲れ様でした! 👏✨ 以上で一連の手続きは終わりになります。Dojo として承認されたら、次の項目「支援」でまとめている各種プログラムに申請することができます。皆さんの CoderDojo 運営の一助になれば嬉しいです! 😸

+

🤝 支援・資料

- CoderDojo in Minecraft + <%= lazy_image_tag('/kata/support.png', alt: 'CoderDojo in Minecraft') %> +


CoderDojo は国内外のパートナー企業から様々な支援を得ております。承認された Dojo では、必要に応じて次の支援を得ることができます。CoderDojo を立ち上げて、承認されたら、ぜひご活用ください 😆

@@ -716,7 +721,8 @@

📑 FAQ

- 統計情報：参加者数の推移 + <%= lazy_image_tag('/kata/faq.png', alt: '統計情報：参加者数の推移') %> +

From d38515e8771689d0f4cd552ee39ef5212b9c32ce Mon Sep 17 00:00:00 2001 From: Yohei Yasukawa Date: Sun, 5 Sep 2021 15:33:00 +0900 Subject: [PATCH 03/11] Enable lazy_image_tag in Podcasts resources --- app/views/podcasts/index.html.erb | 4 ++-- app/views/podcasts/show.html.erb | 2 +- public/{img => podcasts}/dojocast-cover.jpg | Bin public/{img => podcasts}/dojocast-cover.pxm | Bin 4 files changed, 3 insertions(+), 3 deletions(-) rename public/{img => podcasts}/dojocast-cover.jpg (100%) rename public/{img => podcasts}/dojocast-cover.pxm (100%) diff --git a/app/views/podcasts/index.html.erb b/app/views/podcasts/index.html.erb index c07991487..2858404ae 100644 --- a/app/views/podcasts/index.html.erb +++ b/app/views/podcasts/index.html.erb @@ -3,13 +3,13 @@ <% provide(:url, @url ) %> <% provide(:meta_image, "/img/ogp-dojocast.jpeg") %> -DojoCast Cover Photo +<%= lazy_image_tag('/podcasts/dojocast-cover.jpg', alt: 'DojoCast Cover Photo', class: 'dojocast-cover') %>

<%= @title %>

CoderDojo コミュニティに関わる人々を
ハイライトするポッドキャスト番組です 📻✨

- インタビューの様子 + <%= lazy_image_tag('/podcasts/cover-sub.jpg', alt: 'DojoCast の収録の様子') %>
diff --git a/app/views/podcasts/show.html.erb b/app/views/podcasts/show.html.erb index 9b89e9c84..a2bda2743 100644 --- a/app/views/podcasts/show.html.erb +++ b/app/views/podcasts/show.html.erb @@ -3,7 +3,7 @@ <% provide(:url, @url) %> <% provide(:meta_image, @episode.cover) %> -DojoCast Cover Photo +<%= lazy_image_tag('/podcasts/dojocast-cover.jpg', alt: 'DojoCast Cover Photo', class: 'dojocast-cover') %>