diff --git a/app/views/events/_upcoming_events.html.haml b/app/views/events/_upcoming_events.html.haml deleted file mode 100644 index 1792fac65..000000000 --- a/app/views/events/_upcoming_events.html.haml +++ /dev/null @@ -1,21 +0,0 @@ -%div#event-list.grayscale-bg - - upcoming_events.each do |prefecture, events| - %div{id: prefecture} - %h2.event-region - %a{href: "##{prefecture}", style: "color: black;"}= prefecture - %ul.event-ul - - events.each do |event| - %li.event - %header - - if event[:event_title].include? 'オンライン' or event[:event_title].include? 'リモート' - %div.event-ribbon - %span オンライン - %p.event-date= l(event[:event_date]) - %p.event-at= "#{event[:event_at].strftime('%k:%M')}" - %p - %a.event-url{ href: "#{event[:event_url]}" } - %span= event[:event_title] - %span= "(#{event[:dojo_name]})" - - if event[:event_title].include? 'ポケモン' - %div.event-tag-pokemon-cover - %span.event-tag-pokemon ポケモン diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb new file mode 100644 index 000000000..bba68e3b8 --- /dev/null +++ b/app/views/events/index.html.erb @@ -0,0 +1,129 @@ +<% provide(:title, '近日開催の道場まとめ') %> +<% provide(:desc, '近日開催のイベント情報をまとめています。') %> +<% provide(:url, @url) %> +<% provide(:meta_image, '/img/ogp-events.jpeg') %> + +
+ <%= lazy_image_tag '/events_cover.jpg', alt: 'Cover Photo on Upcoming Events', min: true %> +
+ +
+
+

📅 近日開催の道場

+
+

+ ☯️ 開催予定のイベントをチェックしよう! +
+ （🗾地図から探す + / 🗓 カレンダー連携 ） +

+ + + + <% unless @pokemon_events.blank? %> +

+ 🆕 + ポケモン・ワークショップ + 開催中！ +
+ <% @pokemon_events.each do |event| %> + + + <%= event.event_at.strftime('%-m月%d日 %H:%M〜') %> @ <%= event.dojo_event_service.dojo.name %> + + +
+ <% end %> +

+ <% end %> + +
+ <% @upcoming_events.each do |prefecture, events| %> +
+

+ <%= prefecture %> +

+ +
    + <% events.each do |event| %> +
  • +
    + <% if event[:event_title].include?('オンライン') || event[:event_title].include?('リモート') %> +
    オンライン
    + <% end %> +

    <%= l(event[:event_date]) %>

    +

    <%= event[:event_at].strftime('%k:%M') %>

    +
    + +

    + + <%= event[:event_title] %> + + (<%= event[:dojo_name] %>) + <% if event[:event_title].include?('ポケモン') %> +

    + ポケモン +
    + <% end %> +

    +
    • + <% end %> +
+
+ <% end %> +
+ +
+ +
+
+

+ ☯️ + 掲載道場について +

+

+ coderdojo.jp + に掲載申請されていて、かつ、 +
+ Doorkeeper + または + connpass + を使っている +
+ 道場を掲載しています ( + 掲載申請はコチラ + ) +

+ +

+ 🛠 + 関連リンク +

+ +
+
+ +

diff --git a/app/views/events/index.html.haml b/app/views/events/index.html.haml deleted file mode 100644 index 5710d9ad3..000000000 --- a/app/views/events/index.html.haml +++ /dev/null @@ -1,81 +0,0 @@ -- provide(:title, '近日開催の道場まとめ') -- provide(:desc, '近日開催のイベント情報をまとめています。') -- provide(:url, @url) -- provide(:meta_image, "/img/ogp-events.jpeg") - -%section.cover - = lazy_image_tag '/events_cover.jpg', alt: 'Cover Photo on Upcoming Events', min: true - -%section#events.text-center - %br - %h1 📅 近日開催の道場 - %br - %p{style: "margin: 0 30px 40px 0px; line-height: 2.0em;"} - 　☯️ 開催予定のイベントをチェックしよう! - %br - 　（🗾 - \ - %a{href: dojomap_url}<> 地図から探す - \ - \/ - \ 🗓 - \ - %a{href: 'https://bit.ly/coderdojo-calendar-by-each-region'}<> カレンダー連携 - ） - - - /%h2 🆕 イベントのお知らせ - /%p.event-notice{style: "margin-top: 30px; margin-bottom: 60px;"} - / %a{href: 'https://coderdojo-japan.doorkeeper.jp/events/176828'} ☯️ CoderDojo 共同発起人『Bill Liao』さんとの懇親会 - 8月31日 (土) 🌾 - - - unless @pokemon_events.blank? - %p.event-notice{style: "margin-top: 30px; margin-bottom: 60px;"} - 🆕 - \ - %a{href: pokemon_workshop_path }<> - ポケモン・ワークショップ - 開催中！ - %br - - @pokemon_events.each do |event| - %a{href: "##{event.dojo_event_service.dojo.prefecture.name}"} - %small #{event.event_at.strftime('%-m月%d日 %H:%M〜')} @ #{event.dojo_event_service.dojo.name} - %br - - = render partial: 'upcoming_events', locals: { upcoming_events: @upcoming_events } - -%section#dojos.dojos.text-center - %br - %h3#howto{style: "margin-top: 60px; font-weight: bold;"} - %a{href: '#howto'} ☯️ - 掲載道場について - %p{style: "margin: 0 30px 40px 0px;"} - %a{href: "/"} - coderdojo.jp - に掲載申請されていて、かつ、 - %br - %a{href: "https://www.doorkeeper.jp/"} - Doorkeeper - または - %a{href: "https://connpass.com/"} - connpass - を使っている - %br - 道場を掲載しています ( - %a{href: signup_path}<> - 掲載申請はコチラ - ) - - %h3#references{style: "margin-top: 60px; font-weight: bold;"} - %a{href: '#references'} 🛠 - 関連リンク - %ul{:style => "list-style: none; margin-left: -40px; margin-bottom: 40px;"} - %li - %a{href: "https://github.com/coderdojo-japan/coderdojo.jp/issues/258"} 直近の Dojo 開催情報を表示したい #258 - %li - %a{href: "https://github.com/coderdojo-japan/coderdojo.jp/issues/375"} イベント履歴収集スクリプトの改修 #375 - %li - %a{href: "https://github.com/coderdojo-japan/coderdojo.jp/issues/393"} Facebook Events にも対応したい #393 - %br - -%br -%br diff --git a/app/views/home/show.html.erb b/app/views/home/show.html.erb new file mode 100644 index 000000000..1062ae705 --- /dev/null +++ b/app/views/home/show.html.erb @@ -0,0 +1,421 @@ +
+ +

CoderDojo Japan

+

子どものためのプログラミング道場

+
+
+ +
+ <%= lazy_image_tag '/coderdojo-japan_cover.webp', alt: 'CoderDojo Japan カバー画像', min: true %> +
+ +
+

CoderDojo は子どものためのプログラミング道場です。2011年にアイルランドから始まった<%= link_to '国際的な非営利活動', dojomap_url('/world'), style: "white-space: nowrap;" %>で、日本には<%= @dojo_count %>以上の道場があります。

+ +

CoderDojo で学べる内容は道場ごとに様々で、例えば次のような内容です。

+ + + +

内容も規模もそれぞれ異なりますが、どの道場でも主体的に学ぶ姿勢が大切です。

+ +

+ 詳細は次のスライドをお読みください。 +

+
+
+ +
+
+ スライドが見えない場合はコチラ +
+
+

+ CoderDojo の様子については、 +
+ 次の動画や記事をぜひ！😆 +

+ +
+ <%= link_to( + lazy_image_tag('/video-thumbnail.webp', alt: 'あなたが CoderDojo に来る理由は何ですか？', min: true), + 'https://www.youtube.com/watch?v=5Q3r4XQflFs&list=PL94GDfaSQTmKzw7RLjbmUgl8VyfBR9E8e&index=1' + ) %> +
+ + + +
+
+ +
+
+ <%= render partial: 'shared/social_buttons' %> + +
+ + + CoderDojo について +
+ もっと知る + +
+
+ + + + +
+
+

+ 🗾 + 日本各地の道場 +

+
+

+ 近くの道場を探してみましょう！ +
+ 参加方法は各道場のWebサイトに記載されています +

+
+ + + 近日開催から探す + + + + + 地図情報から探す + +
+ <%= render partial: 'shared/dojos', locals: { regions_and_dojos: @regions_and_dojos } %> +
+ + + + +
+

+ 📰 + 最近の CoderDojo +

+
+ +

+ 最新情報はメールで受け取れます。 +
+ (毎月配信) +

+ <%= render partial: 'shared/newsletter' %> +
+ + + 過去の記事を読む + +
+
+ + + + +
+
+

+ 📚 + もっと詳しく知る +

+
+

+ 🎧 Podcast + や + 📺 YouTube + など、様々な方法で CoderDojo の最新情報を発信しています。お好みの方法で最新情報をキャッチしてみよう！ +

+ +
+

+ 📑 Kata では運営に役立つ情報を、 + 📣 Twitter では最近の活動状況を、🌐 CoderDojo Foundation では海外の雰囲気を知ることができます。 +

+
+

+ 『地元で道場を立ち上げてみたい』『道場向けの各種支援を知りたい』という場合は 📑 Kata の『立ち上げる』や『支援』をお読みください。 +

+
+ <%= link_to( + lazy_image_tag('/kata_cover.webp', alt: 'Kata カバー画像', min: true, style: 'margin-bottom: 15px;'), + '/kata' + ) %> +
+
+ 資料集「Kata」を読む +
+
+
+ + + + +
+
+

+ ✅ + よくある質問と回答 +

+
+ +
+ + + 他の質問と回答を見る + +
+
+ +
+
+

+ 📮 + お問い合わせ +

+
+

+ お問い合わせの前によくある質問と回答をご確認いただけると幸いです 📨 +

+

+ + +
+ 問い合わせフォーム +
+ +

+
diff --git a/app/views/home/show.html.haml b/app/views/home/show.html.haml deleted file mode 100644 index 65b5af090..000000000 --- a/app/views/home/show.html.haml +++ /dev/null @@ -1,324 +0,0 @@ -#top.title.text-center - %i.cd.cd-logo - %h1 CoderDojo Japan - %p 子どものためのプログラミング道場 - %br - -%section.cover - = lazy_image_tag '/coderdojo-japan_cover.webp', alt: 'CoderDojo Japan カバー画像', min: true - -%section.introduction.text-center.list - %p - CoderDojo は子どものためのプログラミング道場です。2011年にアイルランドから始まった - %a{href: dojomap_url(path='/world'), style: 'white-space: nowrap;'}<> 国際的な非営利活動 - で、日本には - %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", title: "CoderDojo ガイダンス <一般・ボランティア向け資料>"}<> - コチラ - %p#youtube{style: "margin-top: 60px;"} - CoderDojo の様子については、 - %br.ignore-pc<> - 次の動画や記事をぜひ！😆 - - %div.home-point-thumbnail{style: "margin-top: 30px; margin-bottom: 30px;"} - = link_to lazy_image_tag('/video-thumbnail.webp', alt: 'あなたが CoderDojo に来る理由は何ですか？', min: true), 'https://www.youtube.com/watch?v=5Q3r4XQflFs&list=PL94GDfaSQTmKzw7RLjbmUgl8VyfBR9E8e&index=1' - /%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/"} CoderDojoとは? 運営者に話を聞いてみた! - %small (バケモノ.jp) - %li - %a{href: "http://ict-enews.net/zoomin/17coderdojo/"} CoderDojoをはじめてみませんか - %small (ICT教育ニュース) - %li - %a{href: "https://takadanobaba.keizai.biz/column/1/"} 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' - .btn-cover{style: "margin-bottom: 40px;"} - %a.btn-blue{href: kata_path(anchor: 'coderdojo')}<> - %i.fad.fa-yin-yang - CoderDojo について - %br.ignore-pc<> - もっと知る - -/ - %hr - %section#events.detail-introduction.text-center - %h2 - %a{href: '#events'} 🆕 - イベントのお知らせ - %ol{style: "list-style: none; margin-left: -40px; margin-top: 30px;"} - %li - = link_to lazy_image_tag('dojocon_japan_2022.webp', alt: "DojoCon Japan 2022", style: "margin-bottom: 15px;"), "https://dojocon2022.coderdojo.jp/" - - %p{style: 'margin-bottom: 30px;'} - 11月27日に - %a{href: "https://dojocon2022.coderdojo.jp/"}<> DojoCon Japan - 開催! 全国のCoderDojo関係者と話してみませんか? 😆✨ - -/ - %p.event-notice{style: "margin-top: 30px; margin-bottom: 60px;"} - %a{href: "https://bit.ly/pokemon-special-workshop-in-kashiwa"} プログラミングでポケモンをうごかしてみよう - %br - %small - 5月16日 (日) 10am〜、オンライン開催 - - - -%section.dojos.text-center.grayscale-bg#dojos - %br - %h2{style: "color: dimgray;"} - %a{href: '#dojos'} 🗾 - 日本各地の道場 - %br - %p{style: "margin: 0 30px 20px 30px;"} - 近くの道場を探してみましょう！ - %br.ignore-sp<> - 参加方法は各道場のWebサイトに記載されています - .btn-cover{style: "margin-bottom: 40px;"} - %a.btn-blue{href: events_path}<> - %i.far.fa-calendar-alt - 近日開催から探す - /%a.btn-blue{href: zen_url}<> - %a.btn-blue{href: dojomap_url}<> - %i.far.fa-map-marked - 地図情報から探す - = render partial: 'shared/dojos', locals: { regions_and_dojos: @regions_and_dojos } - -/ Start with 'div' not 'section' due to grayscale-bg area -/.text-center.grayscale-bg{style: "padding-top: 40px; padding-bottom: 50px;"} -/ %section.detail-introduction#news -%section#news.detail-introduction.text-center.list{style: 'margin: 30px auto 50px;'} - %h2{style: "color: dimgray;"} - %a{href: '#news'} 📰 - 最近の CoderDojo - %br - - %ul.list{style: "list-style: none;"} - %li - %a{href: 'https://news.coderdojo.jp/2025/02/14/coderdojo-de-nyaicecode/'} 🎲 ダイス×プログラミング『ニャイス！コード』を75台寄贈 - %li - %a{href: 'https://news.coderdojo.jp/2025/02/10/dojoletter-vol-80-2024%e5%b9%b412%e6%9c%88%e5%8f%b7/'} 📰 DojoLetter Vol.80 2024年12月号 - %li - %a{href: 'https://news.coderdojo.jp/2025/01/14/dojoletter-vol-79-2024%e5%b9%b411%e6%9c%88%e5%8f%b7/'} 📰 DojoLetter Vol.79 2024年11月号 - %li - %a{href: 'https://news.coderdojo.jp/2024/12/25/box-japan-to-coderdojo/'} 🎄 128台のノート PC 寄贈、Box Japan から CoderDojo へ - %li - %a{href: 'https://news.coderdojo.jp/2024/12/10/dojoletter-vol-78-2024%e5%b9%b410%e6%9c%88%e5%8f%b7/'} 📰 DojoLetter Vol.78 2024年10月号 - %p{style: 'margin-top: 30px;'} - 最新情報はメールで受け取れます。 - %br.ignore-pc<> - %small - (毎月配信) - = render partial: 'shared/newsletter' - .btn-cover{style: 'margin-top: 40px;'} - %a.btn-blue{href: news_url}<> - %i.far.fa-newspaper - 過去の記事を読む - -/%section#timeline.text-center{style: 'margin-bottom: 50px;'} -/ - %h3.text-center{style: 'margin-bottom: 30px;'} - %a{href: "https://x.com/search?vertical=default&q=dojocon%20OR%20coderdojo%20OR%20コーダー道場%20lang%3Aja"} - %i.fab.fa-x-twitter - 最近の CoderDojo - %br -/ - .twitter-timeline-wrap - %a.twitter-timeline{href: "https://twitter.com/CoderDojoJapan?ref_src=twsrc%5Etfw", - '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;"} - %a{href: '#kata'} 📚 - もっと詳しく知る - %br - %p - %a{href: podcasts_path}🎧 Podcast - や - %a{href: "https://www.youtube.com/CoderDojoJapan"} 📺 YouTube - など、様々な方法で CoderDojo の最新情報を発信しています。お好みの方法で最新情報をキャッチしてみよう！ - - %ul{style: "list-style: none;"} - %li - %a{href: kata_path} 📑 Kata (型) - %span{style: 'font-size: 65%'} (Wiki) - %li - %a{href: podcasts_path} 🎧 DojoCast - %span{style: 'font-size: 65%'} (Podcast) - %li - %a{href: news_path} 📰 DojoLetter - %span{style: 'font-size: 65%'} (Newsletter) - %li - %a{href: "https://www.youtube.com/CoderDojoJapan"} 📺 DojoChannel - %span{style: 'font-size: 65%'} (YouTube) - %li - %a{href: "https://x.com/CoderDojoJapan"} 📣 CoderDojo Japan - %span{style: 'font-size: 65%'} (Twitter) - %li - %a{href: "https://www.facebook.com/groups/coderdojo.jp"} 👥 CoderDojo Japan - %span{style: 'font-size: 65%'} (Facebook) - %li - %a{href: foundation_url} 🌐 CoderDojo Foundation - %span{style: 'font-size: 65%'} (海外) - %br - %p - %a{href: kata_path} 📑 Kata - では運営に役立つ情報を、 - %a{href: "https://twitter.com/CoderDojoJapan"}<> 📣 Twitter - \ では最近の活動状況を、 - %a{href: foundation_url}<> 🌐 CoderDojo Foundation - \ では海外の雰囲気を知ることができます。 - %br - %p - 『地元で道場を立ち上げてみたい』『道場向けの各種支援を知りたい』という場合は - %a{href: kata_path}< 📑 Kata - \ の - %a{href: kata_path(anchor: 'startup')}<> 『立ち上げる』 - や - %a{href: kata_path(anchor: 'support')}<> 『支援』 - をお読みください。 - %div.kata - = link_to lazy_image_tag('/kata_cover.webp', alt: 'Kata カバー画像', min: true, style: 'margin-bottom: 15px;'), '/kata' - .btn-cover{style: 'margin-top: 20px; margin-bottom: 0px;'} - %a.btn-blue{href: kata_path}<> - %i.far.fa-books - 資料集「Kata」を読む - - -%section.detail-introduction.partners_logo.text-center#partners{style: "padding-top: 50px;"} - %h2{style: "color: dimgray;"} - %a{href: '#partners'} 🤝 - パートナー法人 - %p{style: "margin: 50px 0px 20px 0px;"} - 様々な法人が CoderDojo の取り組みを支援しています。 - - = render partial: 'shared/partners' - .btn-cover{style: 'margin-top: 40px; margin-bottom: 100px;'} - %a.btn-blue{href: partnership_path}<> - %i.far.fa-handshake - 法人向け資料を読む - - -%section.detail-introduction#contact{style: "padding-top: 30px;"} - %br - %h2#faq.text-center{style: "color: dimgray;"} - %a{href: '#faq'} ✅ - よくある質問と回答 - %br - - %ul{style: "list-style: none; margin-left: -30px;"} - %li - %p - Q．CoderDojo ってなんですか? - %br - A． - %a{href: welcome_path}<> 📜 イラスト付きスライド - があるので、ぜひチェックしてみてください 👀 - %li - %p - Q．CoderDojo ってどんな雰囲気? - %br - A． - %a{href: '#youtube'}<> 📺 YouTube 動画 - を用意しました！よければご視聴ください 😆 - - %li - %p - Q．初めてです。どうしたらよい? - %br - A． - %a{href: root_path(anchor: 'dojos')}<> 🗾 全国の道場 - から興味のある道場を探し、開催情報を調べてみましょう 🔍 - %li - %p - Q．直近の開催情報はありますか？ - %br - A． - %a{href: events_path}<> 📅 近日開催の道場 - から直近の開催情報をご確認いただけます ✅ - %li - %p - Q．道場を立ち上げてみたいです。 - %br - A． - %a{href: kata_path(anchor: 'startup')}<> 📚 Kata - \ に資料があります！運営に関わってみたい方はぜひ! 🤝 - .btn-cover{style: 'margin-top: 40px;'} - %a.btn-blue{href: kata_path(anchor: 'faq'), style: 'padding-left: 18px; padding-right: 18px;'}<> - %i.far.fa-comment-check - 他の質問と回答を見る - - -%section.detail-introduction.text-center - %br - %h2#inquiry{style: "color: dimgray;"} - %a{href: '#inquiry'} 📮 - お問い合わせ - %br - %p - お問い合わせの前に - %a{href: '#faq'}<> よくある質問と回答 - をご確認いただけると幸いです 📨 - %br - %br - / Contact Form via Wufoo - #wufoo-qkjthoy0qpuvg9{style: "margin-top: -10px"} - %a{href: "https://yasslab.wufoo.com/forms/qkjthoy0qpuvg9"}> 問い合わせフォーム - :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/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb new file mode 100644 index 000000000..39f7f4584 --- /dev/null +++ b/app/views/layouts/application.html.erb @@ -0,0 +1,149 @@ + + + + + + + + + + <%= full_title(yield(:title)) %> + + <%= stylesheet_link_tag 'application', 'data-turbolinks-track': 'true', media: 'all' %> + <%= stylesheet_link_tag 'extension/header', 'data-turbolinks-track': 'true', media: 'all' %> + <%= javascript_include_tag 'application', 'data-turbolinks-track': 'true' %> + <%= csrf_meta_tags %> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + <%= render 'shared/header' %> + + <% flash.each do |message_type, message| %> +
<%= message %>
+ <% end %> + + <%= yield %> + + <%= render 'shared/footer' %> + + + + + + + + + + + + +
+ + + + + diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml deleted file mode 100644 index d66c9843e..000000000 --- a/app/views/layouts/application.html.haml +++ /dev/null @@ -1,119 +0,0 @@ -!!! -%html{lang: "#{page_lang(yield(:lang))}"} - %head - %meta{content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type"} - %meta{charset: "utf-8"} - %meta{content: "IE=edge", "http-equiv" => "X-UA-Compatible"} - %meta{content: "width=device-width, initial-scale=1,\n\t\t minimum-scale=1, maximum-scale=1, user-scalable=no", name: "viewport"} - %meta{content: "rfZAU6VfAqDrPGPHca_W7UZQqHrczs4pH_CiLw9M_zY", name: "google-site-verification"} - - %title= full_title(yield(:title)) - = stylesheet_link_tag 'application', 'data-turbolinks-track' => true, media: 'all' - = stylesheet_link_tag 'extension/header', 'data-turbolinks-track' => true, media: 'all' - = javascript_include_tag 'application', 'data-turbolinks-track' => true - = csrf_meta_tags - - %meta{content: "715330868", property: "fb:admins"} - %meta{content: "805184859580207", property: "fb:app_id"} - %meta{content: "#{full_title(yield(:title))}", property: "og:title"} - %meta{content: "#{full_url(yield(:url))}", property: "og:url"} - %meta{content: "#{full_description(yield(:desc))}", name: "description"} - %meta{content: "#{full_description(yield(:desc))}", property: "og:description"} - %meta{content: "website", property: "og:type"} - %meta{content: "#{meta_image(yield(:meta_image))}", property: "og:image"} - %meta{content: "image/png", property: "og:image:type"} - %meta{content: "CoderDojo Japan", property: "og:site_name"} - - %meta{content: "summary", name: "twitter:card"} - %meta{content: "@CoderDojoJapan", name: "twitter:site"} - %meta{content: "@CoderDojoJapan", name: "twitter:creator"} - %meta{content: "#{full_title(yield(:title))}", name: "twitter:title"} - %meta{content: "#{full_description(yield(:desc))}", name: "twitter:description"} - %meta{content: "#{meta_image(yield(:meta_image))}", name: "twitter:image"} - %meta{content: "#{full_url(yield(:url))}", name: "twitter:url"} - - %link{href: "https://coderdojo.jp/", rel: "alternate", hreflang: "ja"} - %link{href: "https://coderdojo.jp/english", rel: "alternate", hreflang: "en"} - %link{href: "/img/apple-icon-57x57.png", rel: "apple-touch-icon", sizes: "57x57"} - %link{href: "/img/apple-icon-60x60.png", rel: "apple-touch-icon", sizes: "60x60"} - %link{href: "/img/apple-icon-72x72.png", rel: "apple-touch-icon", sizes: "72x72"} - %link{href: "/img/apple-icon-76x76.png", rel: "apple-touch-icon", sizes: "76x76"} - %link{href: "/img/apple-icon-114x114.png", rel: "apple-touch-icon", sizes: "114x114"} - %link{href: "/img/apple-icon-120x120.png", rel: "apple-touch-icon", sizes: "120x120"} - %link{href: "/img/apple-icon-144x144.png", rel: "apple-touch-icon", sizes: "144x144"} - %link{href: "/img/apple-icon-152x152.png", rel: "apple-touch-icon", sizes: "152x152"} - %link{href: "/img/apple-icon-180x180.png", rel: "apple-touch-icon", sizes: "180x180"} - %link{href: "/img/android-icon-192x192.png", rel: "icon", sizes: "192x192", type: "image/png"} - %link{href: "/img/favicon-16x16.png", rel: "icon", sizes: "16x16", type: "image/png"} - %link{href: "/img/favicon-32x32.png", rel: "icon", sizes: "32x32", type: "image/png"} - %link{href: "/img/favicon-96x96.png", rel: "icon", sizes: "96x96", type: "image/png"} - %link{href: "/manifest.json", rel: "manifest"} - %link{color: "#1373ce", href: "/img/safari-pinned-tab.svg", rel: "mask-icon"} - %meta{content: "#ffffff", name: "msapplication-TileColor"} - %meta{content: "/img/ms-icon-144x144.png", name: "msapplication-TileImage"} - %meta{content: "#ffffff", name: "theme-color"} - - %link{href: "https://fonts.googleapis.com/css?family=Fjalla+One", rel: "stylesheet", type: "text/css"} - %script{src: "https://kit.fontawesome.com/82f32b9df5.js", crossorigin: "anonymous"} - - / Twemoji: https://twemoji.twitter.com/ - %script{src: 'https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js', crossorigin: 'anonymous'} - / %script{src: 'https://unpkg.com/twemoji@latest/dist/twemoji.min.js', crossorigin: 'anonymous'} - / %script{src: '/js/twemoji.min.js', async: ''} - - / Lazyload: https://github.com/aFarkas/lazysizes - %script{src: '/js/lazysizes.min.js', async: ''} - - / Navbar controller: https://polyfill.io/v3/ - %script{src: '/js/polyfill.min.js', async: ''} - - / DocSearch (v2): https://docsearch.algolia.com/ - %link{href: "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css", rel: "stylesheet"} - / DocSearch (v3): https://docsearch.algolia.com/docs/DocSearch-v3 - /%link{href: 'https://cdn.jsdelivr.net/npm/@docsearch/css@3', rel: 'stylesheet'} - - %body - = render 'shared/header' - - flash.each do |message_type, message| - %div{class: "alert alert-#{message_type}"}= message - = yield - = render 'shared/footer' - - / at the end of the BODY - :javascript - twemoji.parse(document.body); - - / DocSearch (v2): https://docsearch.algolia.com/ - %script{src: "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js", type: "text/javascript"} - / DocSearch (v3): https://docsearch.algolia.com/docs/DocSearch-v3 - /%script{src: 'https://cdn.jsdelivr.net/npm/@docsearch/js@3'} - - :javascript - docsearch({ - // This is search ONLY API key, scoped to your production index. - // So don't have to worry disclosing it in the frontend. - // https://docsearch.algolia.com/docs/migrating-from-legacy/ - appId: '#{ENV["ALGOLIA_APP_ID"]}', - apiKey: '#{ENV["ALGOLIA_API_KEY"]}', - indexName: 'coderdojo', - inputSelector: '#searchbox', - debug: false // Set this true if you want to inspect the dropdown - }); - - #fb-root - :javascript - (function(d, s, id) { - var js, fjs = d.getElementsByTagName(s)[0]; - if (d.getElementById(id)) return; - js = d.createElement(s); js.id = id; - js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.8&appId=805184859580207"; - fjs.parentNode.insertBefore(js, fjs); - }(document, 'script', 'facebook-jssdk')); - :javascript - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); - - ga('create', 'UA-62337761-1', 'auto'); - ga('send', 'pageview'); diff --git a/app/views/stats/show.html.erb b/app/views/stats/show.html.erb new file mode 100644 index 000000000..c1b93b8c9 --- /dev/null +++ b/app/views/stats/show.html.erb @@ -0,0 +1,401 @@ +<% provide(:title, '統計情報') %> +<% provide(:desc, 'CoderDojo の統計情報をまとめたページです。全国の活動状況を把握したい場面などでご活用ください。') %> +<% provide(:url, stats_url) %> +<% provide(:meta_image, '/img/ogp-stats.jpeg') %> + + + + +
+ <%= lazy_image_tag 'stats_cover.png', alt: 'Cover photo for CoderDojo Stats' %> +
+ +
+

統計情報

+
+ 本ページでは CoderDojo の統計情報をまとめています。
全国の活動状況を把握したい場面などでご活用ください。 +
+ +

+ 📊 + 推移グラフ +

+
+ <%= high_chart_globals(@high_charts_globals) %> + + +

<%= high_chart("annual_dojos", @annual_dojos_chart) %>

+ + +

<%= high_chart("annual_event_histories", @annual_event_histories_chart) %>

+ + +

<%= high_chart("annual_participants", @annual_participants_chart) %>

+
+ +

+ 🆕 + 最新データ +

+ +

<%= Time.current.year %>年のデータも含めた
最新の統計情報 (実測値) は次のとおりです。

+
+ + + + + + + + + + + +
掲載中の道場数累計開催回数累計参加者数
<%= @sum_of_dojos %><%= @sum_of_events %><%= @sum_of_participants %>
+
+ +
+
+ <%= high_chart("dojo_tag_chart", @dojo_tag_chart) %> +
+ +

+ 📝 + 集計方法と集計対象について +

+ +

+ 毎週月曜朝10時に集計をしています。 +
+ 集計対象の道場数は次のとおりです。 +

+

+ <%= @annual_dojos_table[@period_end.to_s] %> / + <%= @annual_dojos_whole[@period_end.to_s] %> Dojos +

+ （非アクティブになった道場も含まれています） + + + +
+ + 🔍 + 集計対象と集計割合の推移 + +
+
+ + + + <% @period_range.each do |year| %> + + <% end %> + + + + <% @annual_dojos_table.each_value do |num| %> + + <% end %> + + + + <% @annual_dojos_whole.each_value do |num| %> + + <% end %> + + + + <% @annual_dojos_ratio.each_value do |num| %> + + <% end %> + +
+ 西暦 + + ’<%= year.to_s[2..] %> +
+ 集計数 + + <%= num %> +
+ 総道場 + + <%= num %> +
+ 割合 + [%] + + + <%= (num.eql?('100.0') ? '100' : num) %> + +
+ + ※ 非アクティブになった道場も含まれています + +
+ +
+ + ☯️ + 開催回数と参加者数の推移 + +
+
+ + + + <% @period_range.each do |year| %> + + <% end %> + + + + <% @annual_dojos_ratio.each_value do |num| %> + + <% end %> + + + + <% @annual_events_table.each_value.with_index(@period_start) do |num, year| %> + + <% end %> + + + + <% @annual_participants_table.each_value.with_index(@period_start) do |num, year| %> + + <% end %> + +
+ 西暦 + + + ’<%= year.to_s[2..] %> + +
+ 割合 + [%] + + + <%= num.eql?('100.0') ? '100' : num %> + +
+ 開催 + (集計) + + <%= num %> +
+ 参加 + (集計) + + <%= num %> +
+ + ※ 冒頭の推移グラフ を表にしたデータです + +
+ +
+ + 💭 + 開催回数と参加者数の見込み + +
+
+ + + + <% @period_range.each do |year| %> + + <% end %> + + + + <% @annual_dojos_ratio.each_value do |num| %> + + <% end %> + + + + <% @annual_events_table.each_value.with_index(@period_start) do |num, year| %> + + <% end %> + + + + <% @annual_participants_table.each_value.with_index(@period_start) do |num, year| %> + + <% end %> + +
+ 西暦 + + + ’<%= year.to_s[2..] %> + +
+ 割合 + [%] + + + <%= num.eql?('100.0') ? '100' : num %> + +
+ 開催 + (見込) + + + <%= Rational(num, Rational(@annual_dojos_ratio[year.to_s], 100)).to_i %> + + +
+ 参加 + (見込) + + + <%= Rational(num, Rational(@annual_dojos_ratio[year.to_s], 100)).to_i %> + +
+ + <% year = @period_end.to_s %> + ※ <%= year %>年の参加見込の計算例: + <%= @annual_participants_table[year] %> / 0.<%= @annual_dojos_ratio[year].remove('.') %> + = <%= Rational(@annual_participants_table[year], Rational(@annual_dojos_ratio[year], 100)).to_i %> + (小数点以下は切り捨て) + +
+ +

+ 🗾 + 地域別の道場数 +

+
+ +
+
+
+

+ » 地図データを見る
+ » 個別データを見る
+

+
+ + + <%= render partial: 'shared/dojos_stats', locals: { regions_and_dojos: @regions_and_dojos } %> + +

+ ✅ + 都道府県別の道場数 +
+ <%= "(#{@data_by_prefecture_count} / #{Prefecture.count})" %> +
+

+
+ + + + + + <% @data_by_prefecture.each_with_index do |(prefecture, count), index| %> + + <% if count == 0 %> + + + <% else %> + + + <% end %> + + <% end %> +
+ 都道府県名 + + 道場数 +
+ <%= prefecture %> + + <%= count %> + + <%= prefecture %> + + <%= count %> +
+
+ +

+ 📚 + 関連リンク +

+ +
+
+ + + + diff --git a/app/views/stats/show.html.haml b/app/views/stats/show.html.haml deleted file mode 100644 index 9ade9e71b..000000000 --- a/app/views/stats/show.html.haml +++ /dev/null @@ -1,302 +0,0 @@ -- provide(:title, '統計情報') -- provide(:desc, 'CoderDojo の統計情報をまとめたページです。全国の活動状況を把握したい場面などでご活用ください。') -- provide(:url, stats_url) -- provide(:meta_image, "/img/ogp-stats.jpeg") - -%script{ type: 'text/javascript', src: '/js/jquery.japan-map.js'} - -%section#top{style: 'padding-top:40px; background-color: white; max-width: 400px; margin: 0 auto;'} - = lazy_image_tag 'stats_cover.png', alt: 'Cover photo for CoderDojo Stats' - -%section.stats.text-center - %h1 統計情報 - %div{style: "margin: 30px 36px 0;"} - 本ページでは CoderDojo の統計情報をまとめています。 - %br.ignore-sp<> - 全国の活動状況を把握したい場面などでご活用ください。 - - %h2#graph{style: "margin-top: 70px; color: #333333;"} - %a{href: '#graph'}< - 📊 - 推移グラフ - %div{align: 'center'} - = high_chart_globals(@high_charts_globals) - - / 道場数の推移 - %p{style: 'margin: 40px auto;'} - = high_chart("annual_dojos", @annual_dojos_chart) - - / 開催回数の推移 - %p{style: 'margin: 40px auto;'} - = high_chart("annual_event_histories", @annual_event_histories_chart) - - / 参加者数 - %p{style: 'margin: 40px auto;'} - = high_chart("annual_participants", @annual_participants_chart) - - %h2#latest{style: "margin-top: 70px; color: #333333;"} - %a{href: '#latest'}< - 🆕 - 最新データ - %p - #{Time.current.year}年のデータも含めた - %br<> - 最新の統計情報 - %small (実測値) - は次のとおりです。 - %div{style: "margin-top: 20px;", align: 'center' } - %table{style: 'margin-top: 4px;', border: '1'} - %tr - %th 掲載中の道場数 - %th 累計開催回数 - %th 累計参加者数 - %tr.text-center - %td= @sum_of_dojos - %td= @sum_of_events - %td= @sum_of_participants - - %div#tag{style: "margin-top: 20px;", align: 'center'} - %br - = high_chart("dojo_tag_chart", @dojo_tag_chart) - - %h2#table{style: "margin-top: 70px; color: #333333;"} - %a{href: '#table'}< - 📝 - 集計方法と集計対象について - %ul{style: 'list-style: none; margin-left: -10px;'} - %li 参加者数はユニーク数ではなく延べ数です。 - %li 集計対象は API などで集計可能な道場です。 - - %p{style: 'margin-top: 10px;'} - 毎週月曜朝10時に集計をしています。 - %br - 集計対象の道場数は次のとおりです。 - %p{style: 'margin-top: 10px; margin-bottom: -5px;'} - %b= @annual_dojos_table[@period_end.to_s] - %b / - %b= @annual_dojos_whole[@period_end.to_s] - %b Dojos - %span{style: 'font-size: 10px;'} （非アクティブになった道場も含まれています） - - - :css - .table-container { - overflow-x: auto; - -webkit-overflow-scrolling: touch; /* iOSでのスムーズスクロール */ - max-width: 99%; /* 横幅を画面サイズに合わせる */ - margin: auto 5px; - } - - %div#table-target{align: 'center', style: 'margin-top: 50px; scroll-margin-top: 80px;'} - %b - %a{href: '#table-target'} 🔍 - 集計対象と集計割合の推移 - - %div.table-container{align: 'center'} - %table.compact{style: 'margin-top: 10px;', border: '1'} - %tr - %th - %span.table-head 西暦 - - @period_range.each do |year| - %th - %span.table-head ’#{year.to_s[2..]} - %tr{style: 'text-align: center;'} - %td - %span.table-head 集計数 - - @annual_dojos_table.each_value do |num| - %td - %span.table-item= num - %tr{style: 'text-align: center;'} - %td - %span.table-head 総道場 - - @annual_dojos_whole.each_value do |num| - %td - %span.table-item= num - %tr{style: 'text-align: center;'} - %td - %span.table-head 割合 - %span.table-label<> [%] - - @annual_dojos_ratio.each_value do |num| - %td - %span.table-item= num.eql?('100.0') ? '100' : num - %span{style: 'font-size: 10px;'} - ※ - 非アクティブになった道場も含まれています - - - %div#table-actual{align: 'center', style: 'margin-top: 50px; scroll-margin-top: 80px;'} - %b - %a{href: '#table-actual'} ☯️ - 開催回数と参加者数の推移 - - %div.table-container{align: 'center'} - %table.compact{style: 'margin-top: 10px;', border: '1'} - %tr - %th - %span.table-head<> 西暦 - - @period_range.each do |year| - %th - %b - %span.table-head ’#{year.to_s[2..]} - %tr{style: 'text-align: center;'} - %td - %span.table-head<> 割合 - %span.table-label<> [%] - - @annual_dojos_ratio.each_value do |num| - %td - %span.table-item= num.eql?('100.0') ? '100' : num - %tr{style: 'text-align: center;'} - %td - %span.table-head<> 開催 - %span.table-label<> (集計) - - @annual_events_table.each_value.with_index(@period_start) do |num, year| - %td - %span.table-item= num - %tr{style: 'text-align: center;'} - %td - %span.table-head<> 参加 - %span.table-label<> (集計) - - @annual_participants_table.each_value.with_index(@period_start) do |num, year| - %td - %span.table-item= num - %span{style: 'font-size: 10px;'} - ※ - %a{href: '#graph'}<> 冒頭の推移グラフ - を表にしたデータです - - %div#table-estimate{align: 'center', style: 'margin-top: 50px; scroll-margin-top: 80px;'} - %b - %a{href: '#table-estimate'} 💭 - 開催回数と参加者数の見込み - - %div.table-container{align: 'center'} - %table.compact{style: 'margin-top: 10px;', border: '1'} - %tr - %th - %span.table-head<> 西暦 - - @period_range.each do |year| - %th - %b - %span.table-head ’#{year.to_s[2..]} - %tr{style: 'text-align: center;'} - %td - %span.table-head<> 割合 - %span.table-label<> [%] - - @annual_dojos_ratio.each_value do |num| - %td - %span.table-item= num.eql?('100.0') ? '100' : num - %tr{style: 'text-align: center;'} - %td - %span.table-head<> 開催 - %span.table-label<> (見込) - - @annual_events_table.each_value.with_index(@period_start) do |num, year| - %td - %span.table-item= Rational(num, Rational(@annual_dojos_ratio[year.to_s], 100)).to_i - /%span.table-item== num - /%span.table-item== Rational(@annual_dojos_ratio[year.to_s], 100) - %tr{style: 'text-align: center;'} - %td - %span.table-head<> 参加 - %span.table-label<> (見込) - - @annual_participants_table.each_value.with_index(@period_start) do |num, year| - %td - %span.table-item= Rational(num, Rational(@annual_dojos_ratio[year.to_s], 100)).to_i - %span{style: 'font-size: 10px;'} - - year = @period_end.to_s - ※ - #{year}年の参加見込の計算例: #{@annual_participants_table[year]} / 0.#{@annual_dojos_ratio[year].remove('.')} = #{Rational(@annual_participants_table[year], Rational(@annual_dojos_ratio[year], 100)).to_i} - %small (小数点以下は切り捨て) - - - %h2#map{style: "margin-top: 70px; color: #333333;"} - %a{href: '#map'}< - 🗾 - 地域別の道場数 - .japan-map - /%p#japan-map-text{style: "margin: 20px auto; font-size: 140%;"} 名前: 道場数 - #japan-map-container - %div{style: "margin-top: 0px; margin-bottom: 60px;", align: 'center' } - %p - %a{href: dojomap_url} - » 地図データを見る - - / NOTE: Always show dojos with accordion style to compact - = render partial: 'shared/dojos_stats', locals: { regions_and_dojos: @regions_and_dojos } - - %h2#prefectures{style: "margin-top: 70px; color: #333333;"} - %a{href: '#prefectures'}< - ✅ - 都道府県別の道場数 - %div{style: 'padding-top: 10px; font-size: smaller;'} - = "(#{@data_by_prefecture_count} / #{Prefecture.count})" - %div{style: "margin-top: 20px;", align: 'center' } - %table{border: '1'} - %tr - %th{style: 'padding: 10px;'} - %small 都道府県名 - %th{style: 'padding: 10px;'} - %small 道場数 - - @data_by_prefecture.each_with_index do |(prefecture, count), index| - %tr - - if count == 0 - %td{style: 'background-color: gainsboro; padding: 0px;'} - %small= prefecture - %td{style: 'background-color: gainsboro; padding: 0px;'} - %small= count - - else - %td{style: 'padding: 0px;'} - %small= prefecture - %td{style: 'padding: 0px;'} - %small= count - - %h2#references{style: "margin-top: 70px; color: #333333;"} - %a{href: '#references'}< - 📚 - 関連リンク - %ul - %li - %a{href: "https://bit.ly/coderdojo-japan-stats-past-works"} 統計情報に関する『これまで』の開発 - GitHub - %li - %a{href: "https://bit.ly/coderdojo-japan-stats-future-works"} 統計情報に関する『これから』の開発 - GitHub - %li - %a{href: "https://bit.ly/coderdojo-japan-stats-data-sheet"} 日本の CoderDojo (財団&Japan) - Spreadsheet -%br/ - -:css - span.table-head { font-size: x-small } - span.table-label { font-size: 7px } - span.table-item { font-size: xx-small } - -:javascript - $(function(){ - var areas = JSON.parse('#{@data_by_region.to_json }'.replace( /"/g, '"')); - var dataByPref = JSON.parse('#{@data_by_prefecture.to_json}'.replace( /"/g, '"')); - - $("#japan-map-container").japanMap( - { - // NOTE: Tweak stats_controller if you want to tweak map colors - areas: areas, - selection: "prefecture", - borderLineWidth: 0.1, - drawsBoxLine: false, - movesIslands: true, - showsAreaName: true, - showsPrefectureName: false, - prefectureNameType: "short", - width: 651, - font : "Hiragino Kaku Gothic Pro", - fontSize : 12, - fontColor : "white", - fontShadowColor : "#444455", - onSelect:function(data){ - // This code is used for tapping by Mobile devices - $("#japan-map-text").html(data.name + ": "+ dataByPref[data.name]); - }, - onHover:function(data){ - $("#japan-map-text").html(data.name + ": "+ dataByPref[data.name]); - } - } - ); - }); - -