Add /debug to test embedded Google slides from Mobile

yasulab · yasulab · commit a484df64b2b1 · 2021-07-10T15:43:57.000+09:00
diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
@@ -3,4 +3,9 @@ def show
     @dojo_count        = Dojo.active_dojos_count
     @regions_and_dojos = Dojo.group_by_region_on_active
   end
+
+  def debug
+    @dojo_count        = Dojo.active_dojos_count
+    @regions_and_dojos = Dojo.group_by_region_on_active
+  end
 end
diff --git a/app/views/home/debug.html.haml b/app/views/home/debug.html.haml
@@ -0,0 +1,281 @@
+#top.title.text-center
+  %i.cd.cd-logo
+  %h1 CoderDojo Japan
+  %p 子どものためのプログラミング道場
+  %br
+
+%section.cover
+  = image_tag "/coderdojo-japan_cover.min.jpg", alt: 'CoderDojo Japan カバー画像', class: 'lazyload',
+              "data-src" => "/coderdojo-japan_cover.jpg", loading: 'lazy'
+
+%section.introduction.text-center.list
+  %p
+    CoderDojo は7〜17歳を対象とした非営利のプログラミング道場です。2011年にアイルランドで始まり、世界では#{Dojo::NUM_OF_COUNTRIES}カ国・#{Dojo::NUM_OF_WORLD_DOJOS}の道場、日本には
+    %b>= @dojo_count
+    以上の道場があります。
+  %br
+  %p
+    CoderDojo で学べる内容は道場ごとに様々で、例えば次のような内容です。
+  %ul
+    %li Scratch, micro:bit, Webサイト
+    %li Raspberry Pi, Minecraft
+    %li Python, Ruby, JavaScript
+    %li Viscuit, PHP, 電子工作など
+  %br
+  %p 内容も規模もそれぞれ異なりますが、どの道場でも主体的に学ぶ姿勢が大切です。
+  %br
+  %p#welcome
+    詳細は次のスライドをお読みください。
+  .text-center
+    .home-point-slides
+      %iframe{allowfullscreen: "true", mozallowfullscreen: "true", webkitallowfullscreen: "true",
+              frameborder: "0", marginheight: "0", marginwidth: "0", scrolling: "no", src: "https://docs.google.com/presentation/d/e/2PACX-1vSfSoYY3Iw6o0DL4Ki6-JNhgIOb61pktNZMRAYQZ4QdvORYb5ryBmOshmoDwe6M1BA8O-_-dzXOTReP/embed?start=false&loop=false", width: "595", height: "350"}
+    %div{style: "margin-bottom:5px; color: grey;"}
+      スライドが見えない場合は
+      %a{href: "https://bit.ly/coderdojo-guidance-2021", target: "_blank", rel: "external noopener", title: "CoderDojo ガイダンス <一般・ボランティア向け資料>"}<>
+        コチラ
+  %p#youtube{style: "margin-top: 60px;"}
+    さらに詳しい様子については、
+    %br.ignore-pc<>
+    次の動画や記事をぜひ！😆
+
+  %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"
+  /%div.home-point-video
+  /  %iframe{allowfullscreen: "", frameborder: "0", height: "315", width: "560",
+  /          src: "https://www.youtube.com/embed/gLDue2xb1j8?rel=0"}
+  %ul{style: "margin-bottom:30px;"}
+    %li
+      %a{href: "http://bakemono.jp/reading/blog/web/2256/", target: "_blank", rel: "external noopener"} CoderDojoとは? 運営者に話を聞いてみた!
+      %small (バケモノ.jp)
+    %li
+      %a{href: "http://ict-enews.net/zoomin/17coderdojo/", target: "_blank", rel: "external noopener"} CoderDojoをはじめてみませんか
+      %small (ICT教育ニュース)
+    %li
+      %a{href: "https://takadanobaba.keizai.biz/column/1/", target: "_blank", rel: "external noopener"} CoderDojo Japan 特集インタビュー
+      %small (高田馬場経済新聞)
+
+  %div.text-center{style: 'margin-top: 0px; margin-left: -17px;'}
+    %div.g-ytsubscribe{"data-channelid" => "UCal5GuoCDCMDQe07w69TuJA", "data-layout" => "full", "data-count" => "default"}
+    %script{src: "https://apis.google.com/js/platform.js"}
+  %br
+  = render partial: 'shared/social_buttons'
+
+/
+  %section#events.detail-introduction.text-center
+  %h2 🆕 イベントのお知らせ
+  %p.event-notice{style: "margin-top: 30px; margin-bottom: 60px;"}
+    %a{href: "https://bit.ly/pokemon-special-workshop-in-kashiwa", target: "_blank", rel: "external noopener"} プログラミングでポケモンをうごかしてみよう
+    %br
+    %small
+      5月16日 (日) 10am〜、オンライン開催
+
+/
+  %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"
+
+  %p
+    12月27日に
+    %a{href: "https://dojocon2020.coderdojo.jp/", target: "_blank", rel: "external noopener"} DojoCon Japan 2020
+    オンライン開催! 早めにお申し込みください 😆🎫✨
+
+
+%section.dojos.text-center.grayscale-bg#dojos
+  %br
+  %h2{style: "color: dimgray;"} 🗾 日本各地の道場
+  %br
+  %p{style: "margin: 0 30px 20px 30px;"}
+    近くの道場を探してみましょう！
+    %br.ignore-sp<>
+    参加方法は各道場のWebサイトに記載されています
+  .btn-cover{style: "margin-bottom: 40px;"}
+    %a.btn-blue{href: "/events"}<>
+      %i.far.fa-calendar-alt
+      近日開催から探す
+    %a.btn-blue{href: "https://zen.coderdojo.com/find", target: "_blank", rel: "external noopener"}<>
+      %i.far.fa-map-marked
+      地図情報から探す
+  = render partial: 'shared/dojos', locals: { regions_and_dojos: @regions_and_dojos }
+
+%section#timeline.text-center{style: 'margin-bottom: 50px;'}
+  %br
+  %h3.text-center{style: 'margin-bottom: 30px;'}
+    %a{href: "https://twitter.com/search?vertical=default&q=dojocon%20OR%20coderdojo%20OR%20%E3%82%B3%E3%83%BC%E3%83%80%E3%83%BC%E9%81%93%E5%A0%B4%20lang%3Aja", target: "_blank", rel: "external noopener"}
+      %i.fab.fa-twitter
+      最近の CoderDojo
+  %a.twitter-timeline{href: "https://twitter.com/CoderDojoJapan", target: "_blank",
+                      rel: "external noopener", 'data-lang' => "ja", "data-dnt" => "true",
+                      "data-chrome" => "noheader nofooter noborders", "data-width" => "500",
+                      "data-tweet-limit" => "5"} @CoderDojoJapan アカウントのタイムライン
+  %script{async: "", await: "", src: "https://platform.twitter.com/widgets.js", charset: "utf-8"}
+
+/ Start with 'div' not 'section' due to grayscale-bg area
+.text-center.grayscale-bg
+  %section.detail-introduction.list
+    %br
+    %h2#kata{style: "color: dimgray;"} 📚 もっと詳しく知る
+    %br
+    %p
+      %a{href: "/podcast"}🎧 Podcast
+      や
+      %a{href: "https://www.youtube.com/CoderDojoJapan",
+         target: "_blank", rel: "external noopener"} 📺 YouTube
+      など、様々な方法で CoderDojo の最新情報を発信しています。お好みの方法で最新情報をキャッチしてみよう！
+
+    %ul{style: "list-style: none;"}
+      %li
+        %a{href: "/kata"} 📑 Kata (型)
+        %span{style: 'font-size: 65%'} (Wiki)
+      %li
+        %a{href: "/podcast"} 🎧 DojoCast
+        %span{style: 'font-size: 65%'} (Podcast)
+      %li
+        %a{href: "#news"} 📰 DojoLetter
+        %span{style: 'font-size: 65%'} (Newsletter)
+      %li
+        %a{href: "https://www.youtube.com/CoderDojoJapan",
+           target: "_blank", rel: "external noopener"} 📺 DojoChannel
+        %span{style: 'font-size: 65%'} (YouTube)
+      %li
+        %a{href: "https://twitter.com/CoderDojoJapan",
+           target: "_blank", rel: "external noopener"} 📣 CoderDojo Japan
+        %span{style: 'font-size: 65%'} (Twitter)
+      %li
+        %a{href: "https://www.facebook.com/groups/coderdojo.jp",
+           target: "_blank", rel: "external noopener"} 👥 CoderDojo Japan
+        %span{style: 'font-size: 65%'} (Facebook)
+      %li
+        %a{href: "https://coderdojo.com/",
+           target: "_blank", rel: "external noopener"} 🌐 CoderDojo Foundation
+        %span{style: 'font-size: 65%'} (海外)
+    %br
+    %p
+      %a{href: "/kata"} 📑 Kata
+      では運営に役立つ情報を、
+      %a{href: "https://twitter.com/CoderDojoJapan",
+         target: "_blank", rel: "external noopener"}<> 📣 Twitter
+      \ では最近の活動状況を、
+      %a{href: "https://coderdojo.com/",
+         target: "_blank", rel: "external noopener"}<> 🌐 CoderDojo Foundation
+      \ では海外の雰囲気を知ることができます。
+    %br
+    %p
+      『地元で道場を立ち上げてみたい』『道場向けの各種支援を知りたい』という場合は
+      %a{href: "/kata"}< 📑 Kata
+      \ の
+      %a{href: "/kata#startup"}<> 『立ち上げる』
+      や
+      %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'
+      %a.button-to-details{href: '/kata'} Kata を読む
+
+%section.detail-introduction.partners_logo.text-center#partners{style: "padding-top: 50px;"}
+  %h2{style: "color: dimgray;"} 🤝 パートナー法人
+  %p{style: "margin: 50px 0px 20px 0px;"}
+    様々な法人が CoderDojo の取り組みを支援しています。
+
+  = render partial: 'shared/partners'
+  %div.kata{style: 'margin-top: 60px; margin-bottom: 150px;'}
+    %a.button-to-details{href: '/partnership'} 法人向け資料を読む
+
+
+/ Start with 'div' not 'section' due to grayscale-bg area
+.text-center.grayscale-bg{style: "padding-top: 20px; padding-bottom: 50px;"}
+  %section.detail-introduction#news
+    %br
+    %h2{style: "color: dimgray;"} 📰 ニュースレター購読
+    %br
+    %p
+      最新情報をメールで受け取ってみませんか？毎月配信しています。
+      %br.ignore-sp<>
+      %small
+        (
+        %a{:href => 'https://news.coderdojo.jp/category/dojoletter%e3%83%90%e3%83%83%e3%82%af%e3%83%8a%e3%83%b3%e3%83%90%e3%83%bc/', :target => '_blank'}<>
+          過去の配信を読んでみる
+        )
+    = render partial: 'shared/newsletter'
+
+%section#faq.detail-introduction#contact{style: "padding-top: 30px;"}
+  %br
+  %h2.text-center{style: "color: dimgray;"} ✅ よくある質問と回答
+  %br
+
+  %ul{style: "list-style: none; margin-left: -30px;"}
+    %li
+      %p
+        Q．CoderDojo ってなんですか?
+        %br
+        A．
+        %a{href: '#welcome'}<> 📜 イラスト付きスライド
+        があるので、ぜひチェックしてみてください 👀
+    %li
+      %p
+        Q．CoderDojo ってどんな雰囲気?
+        %br
+        A．
+        %a{href: '#youtube'}<> 📺 YouTube 動画
+        を用意しました！よければご視聴ください 😆
+
+    %li
+      %p
+        Q．初めてです。どうしたらよい?
+        %br
+        A．
+        %a{href: '#dojos'}<> 🗾 全国の道場
+        から興味のある道場を探し、開催情報を調べてみましょう 🔍
+    %li
+      %p
+        Q．直近の開催情報をありますか?
+        %br
+        A．
+        %a{href: '/events'}<> 📅 近日開催の道場
+        があります。オンライン開催もあります ⚡️
+    %li
+      %p
+        Q．詳しい資料はありますか?
+        %br
+        A．
+        %a{href: '/kata'}<> 📚 道場情報まとめ
+        にあります！運営に関わってみたい方はぜひ 😉
+
+%section.detail-introduction.text-center
+  %br
+  %h2{style: "color: dimgray;"} 📮 お問い合わせ
+  %br
+  %p
+    取材や支援などのお問い合わせについては下記からご連絡ください 📨
+    %br
+    %br
+  / Contact Form via Wufoo
+  #wufoo-qkjthoy0qpuvg9{style: "margin-top: -10px"}
+    %a{href: "https://yasslab.wufoo.com/forms/qkjthoy0qpuvg9",
+       target: "_blank", rel: "external noopener"}> 問い合わせフォーム
+  :javascript
+    var qkjthoy0qpuvg9;(function(d, t) {
+    var s = d.createElement(t), options = {
+      'userName':'yasslab',
+      'formHash':'qkjthoy0qpuvg9',
+      'autoResize':true,
+      'height':'497',
+      'async':true,
+      'host':'wufoo.com',
+      'header':'show',
+      'ssl':true
+    };
+    s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
+    s.onload = s.onreadystatechange = function() {
+      var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
+      try {
+        qkjthoy0qpuvg9 = new WufooForm();qkjthoy0qpuvg9.initialize(options);qkjthoy0qpuvg9.display();
+      } catch (e) {}
+    };
+    var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
+    })(document, 'script');
+
+%br
+%br
diff --git a/config/routes.rb b/config/routes.rb
@@ -4,6 +4,9 @@
 
   root "home#show"
 
+  # Debug URL
+  get "/debug" => "home#debug"
+
   # Render legal documents by using Keiyaku CSS
   # https://github.com/cognitom/keiyaku-css
   #get "/docs/code_of_conduct",   to: redirect('/docs/code-of-conduct')
