diff --git a/app/assets/images/events_cover.min.jpg b/app/assets/images/events_cover.min.jpg new file mode 100644 index 000000000..ef03a8743 Binary files /dev/null and b/app/assets/images/events_cover.min.jpg differ diff --git a/app/assets/images/events_cover.png b/app/assets/images/events_cover.png deleted file mode 100644 index 7ffb0d2f4..000000000 Binary files a/app/assets/images/events_cover.png and /dev/null differ diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index c7852ebc6..e7c184820 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -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 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: '統計情報：参加者数の推移') %> +

diff --git a/app/views/events/index.html.haml b/app/views/events/index.html.haml index daa0a3ef5..c2699128b 100644 --- a/app/views/events/index.html.haml +++ b/app/views/events/index.html.haml @@ -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 diff --git a/app/views/home/show.html.haml b/app/views/home/show.html.haml index 1d616070e..9a97a9003 100644 --- a/app/views/home/show.html.haml +++ b/app/views/home/show.html.haml @@ -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;"} diff --git a/app/views/login_page/index.html.haml b/app/views/login_page/index.html.haml index 4366557eb..418c03c31 100644 --- a/app/views/login_page/index.html.haml +++ b/app/views/login_page/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'} 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') %>