TOP実装

Author: Fukusan64

_data/sessions.yml

@@ -0,0 +1,53 @@
+- title: プログラミング教育の脱構築——生成AI時代における〈学び〉を再考する
+  showInTopPage: false
+  speaker: 宮島 衣瑛（@kiriem_）
+  affiliation: CoderDojo Japan 理事 / 広島大学大学院 特命助教
+  img: /img/sessions/profile/miyajima-kirie.webp
+  tag: 基調講演
+  url: /sessions/keynote1/
+  outline: |
+    生成AIの急速な進展により、「プログラミングを学ぶこと」の意味や価値そのものが、根本から問い直される時代がきています。
+    だからこそ今、子どもたちが〈つくる〉ことを楽しみ、世代を超えた仲間と学び合う CoderDojo コミュニティのような学びの場が、これまで以上に重要な意味を持ってきます。
+    本講演では、「教育・学びとは何か」を根底から問い直す視点から、プログラミング教育の脱構築を提案し、これからの CoderDojo のあり方も皆さんと考えていきたいと思います。
+
+- title: 生成AI時代における子どもたちに必要な力とは？
+  showInTopPage: false
+  speaker: 小宮山 利恵子
+  affiliation: 株式会社リクルート スタディサプリ教育AI研究所所長、 国立大学法人 東京学芸大学大学院教育学研究科教授
+  img: /img/sessions/profile/komiyama-rieko-square.webp
+  tag: 招待講演
+  url: /sessions/keynote2/
+  outline: |
+    生成AIが瞬時に答えを導く時代において、子どもたちに本当に必要なのは「問いを立てる力」です。
+    本講演では、AIに頼るだけでは得られない学びとして、現場体験や五感を通じた身体知、そしてアナログとデジタルをつなぐ教育の可能性を探ります。
+    効率化の先にある“人間ならではの学び”をどう育むのかを考えます。
+
+- title: エンジニアではない私がCoderDojoを立ち上げた
+  showInTopPage: true
+  speaker: 吉田 彩
+  affiliation: 主婦
+  img: /img/sessions/thumbnails/session1.webp
+  tag: セッション
+  url: /sessions/session1/
+  outline: |
+    プログラミングも出来ない、PCのことも詳しくない、8歳と4歳の子どものママでしかなかった私が、CoderDojo久留米と出会い、息子と通い、そこで出会った人達に憧れ、
+    自分も新しい事にチャレンジしたい、そしてその姿を子どもに見せたいと思いCoderDojo 早良を立ち上げました。
+    しかし知識がない私は立ち上げと運営に苦戦する日々、そんな時に息子がメンターとして助けてくれるように。
+    初回から参加応募30人を超え、チャンピオンに知識がなくとも、みんなで探求する唯一無二のCoderDojo早良です。
+
+- title: CoderDojoに救われて現在親子でメンターをやっている話
+  showInTopPage: true
+  speaker: とり子 ・ memetan
+  affiliation: <br />とり子：CoderDojo香椎 CoderDojoさが メンター <br /> memetan：CoderDojo香椎 CoderDojoさが ユースメンター
+  img: /img/sessions/thumbnails/session2.webp
+  tag: セッション
+  url: /sessions/session2/
+  outline: |
+    こだわりが強く周囲に馴染めず不登校だった息子は、主体的に学べるCoderDojoで居場所を感じられました。
+    今では親子でCoderDojoのメンターになり仲間ができ楽しく活動しています。
+    本能のまま意欲的に次々作品やシステムを作り、現在は有難いことに開発の仕事もいただいています。
+
+    好奇心が強すぎる子への関わりについて、母親の立場から自身の経験をお話します。
+    偉そうに言える立場ではないですが経験談として参考程度に聞いていただければ幸いです。
+
+    息子本人からも開発の楽しさについて語ります。

_includes/top/sections/session.html

@@ -1,6 +1,8 @@
-{% comment %} <div id="session" class="max-w-3xl lg:max-w-[1800px] px-8 mx-auto pt-28 -mt-28 mb-16 flex flex-col lg:-mt-64 lg:flex-row items-center lg:items-start">
-  <div class="w-full lg:w-2/5 mb-8 lg:mt-68">
-    <div class="lg:max-w-sm lg:place-self-end lg:mr-[10%]">
+
+<div
+  class="max-w-3xl lg:max-w-[1800px] px-8 mx-auto mt-20 lg:mt-0 mb-16 flex flex-col lg:flex-row items-center lg:items-start">
+  <div class="w-full lg:w-2/5 mb-8 flex justify-end">
+    <div class="lg:max-w-sm lg:place-self-start lg:mr-[10%]">
       <h2 class="text-4xl mb-4 text-center lg:text-left">
         セッション
         <span class="block mt-2 text-2xl">SESSION</span>
@@ -11,36 +13,19 @@ <h2 class="text-4xl mb-4 text-center lg:text-left">
       </p>
     </div>
   </div>
-
-  <ul class="flex flex-wrap gap-x-6 gap-y-12 lg:w-3/5">
-    {% for i in (1..6) %}
-    <li class="flex-1 min-w-full sm:min-w-64">
-      <img class="w-full" src="https://placehold.jp/1920x1080.png" alt="セッションのイメージ">
-      <p class="mt-2">セッションタイトル。2行ぐらいあるかも</p>
-      <p class="text-xs mb-2 leading-5">セッションの説明です。最大2行ぐらいまで許容しそうな雰囲気</p>
-      <p class="text-xs text-gray-400 leading-5">
-        登壇者：仮の団体名・仮の登壇者の氏名<br />
-        所属：仮の所属名</p>
+  <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-12 lg:-mt-16 lg:w-3/5">
+    {% assign sessions = site.data.sessions | where: "showInTopPage", true | slice: 0, 6 %}
+    {% for session in sessions %}
+    <li class="flex flex-col min-w-0">
+      <a href="{{ session.url }}" class="block hover:opacity-80 transition grow">
+        <img class="w-full md:max-h-[160px] md:object-contain" src="{{ session.img }}" alt="{{ session.title }}" />
+        <p class="mt-2">{{ session.title }}</p>
+        <p class="text-xs mb-2 leading-5">
+          登壇者: {{ session.speaker }}<br />
+          所属: {{ session.affiliation }}
+        </p>
+      </a>
     </li>
     {% endfor %}
   </ul>
-</div> {% endcomment %}
-
-<div id="session" class="max-w-3xl lg:max-w-[1800px] px-8 mx-auto pt-28 -mt-28 mb-16 flex flex-col lg:-mt-64 lg:flex-row items-center lg:items-start">
-  <div class="w-full lg:w-2/5 mb-8 lg:mt-55">
-    <div class="lg:max-w-sm lg:place-self-end lg:mr-[10%]">
-      <h2 class="text-4xl mb-4 text-center lg:text-left">
-        セッション
-        <span class="block mt-2 text-2xl">SESSION</span>
-      </h2>
-      <p class="leading-7 mb-10">
-        さまざまな分野で活やくしている人たちの話を聞いて、考え方やアイデアを広げてみよう。<br />
-        プログラミングや教育、地域での活動など、たくさんのヒントがつまった時間です。
-      </p>
-    </div>
-  </div>
-
-  <div class="lg:mt-50 mt-0 flex item-center justify-center h-[150px] lg:h-[300px] w-full lg:w-3/5">
-    <p class="size-full lg:text-7xl text-2xl text-gray-500 opacity-50 text-center flex items-center justify-center">Coming soon...</p>
-  </div>
 </div>