Merge pull request #89 from coderdojo-japan/add-sesstions

セッション周りのページ追加

Author: Fukusan64

_data/sessions.yml

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

_includes/header.html

@@ -26,7 +26,7 @@ <h1 class="xl:block hidden mx-auto max-w-lg pt-5 px-8">
       <ul
         class="flex flex-col min-h-20 items-stretch gap-2 *:px-6 *:text-center *:text-[20px] *:leading-[1.75] *:text-[#cc8f2e] [&_a]:block">
         <li><a href="/#outline">開催概要</a></li>
-        <li><a href="/#session">セッション</a></li>
+        <li><a href="/sessions/">セッション</a></li>
         <li><a href="/events/">イベント</a></li>
         <li><a href="/contests/">コンテスト</a></li>
         <li><a href="https://suzuri.jp/DojoConJapan" target="_blank">グッズ</a></li>

_includes/navbar.html

@@ -3,7 +3,7 @@
     class="rounded-[40px] w-fit mx-auto bg-[#f5f5f5] mt-8 inset-shadow-[0px_-2px_10px_rgba(125,125,125,0.25)] shadow-[7px_7px_10px_rgba(125,125,125,0.15)] flex items-stretch">
     <ul class="flex flex-wrap min-h-20 items-center p-5 pr-0 justify-center divide-x-2 gap-y-2 *:text-[#cc8f2e] *:px-6">
       <li><a href="/#outline">開催概要</a></li>
-      <li><a href="/#session">セッション</a></li>
+      <li><a href="/sessions/">セッション</a></li>
       <li><a href="/events/">イベント</a></li>
       <li><a href="/contests/">コンテスト</a></li>
       <li><a href="https://suzuri.jp/DojoConJapan" target="_blank">グッズ</a></li>

_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>

_pages/sessions.md

@@ -0,0 +1,43 @@
+---
+layout: default
+permalink: /sessions/
+title: セッション
+---
+{% include navbar.html %}
+
+<h2 class="text-4xl text-center mb-8 mt-30 xl:mt-15">
+  セッション
+  <span class="block mt-5 text-2xl">SESSTIONS</span>
+</h2>
+
+<ul class="max-w-7xl mx-auto mb-8 px-4 sm:px-8 flex flex-wrap justify-between gap-y-16">
+  {% for session in site.data.sessions %}
+    <li class="w-full md:w-[47%] rounded-xl">
+      {% if session.url %}
+        <a href="{{ session.url }}">
+          <h3 class="text-2xl mb-2 hover:text-[#cc8f2e] transition-colors duration-200">{{ session.title }}</h3>
+        </a>
+      {% else %}
+        <h3 class="text-2xl mb-2">{{ session.title }}</h3>
+      {% endif %}
+
+      {% if session.tag %}
+        <span class="block w-fit mb-4 min-w-24 text-center px-4 py-px rounded-xs bg-[#cc8f2e] text-white">{{ session.tag }}</span>
+      {% endif %}
+
+      <div class="text-gray-600">
+        {{ session.outline }}
+      </div>
+
+      {% if session.url %}
+        <a class="block w-fit my-2 border rounded p-2 hover:bg-[#cc8f2e] hover:text-white transition-colors duration-200" href="{{ session.url }}">
+          <i class="fas fa-file mx-1"></i> 詳細を見る
+        </a>
+      {% endif %}
+
+      <div class="flex gap-x-4 mt-8">
+        <img src="{{ session.img }}" alt="{{ session.title | escape }}" />
+      </div>
+    </li>
+  {% endfor %}
+</ul>

_posts/2025-09-20-session1.md

@@ -0,0 +1,22 @@
+---
+layout: post
+title: セッション
+date: 2025-09-20T00:00:00 UTC+09:00
+permalink: /sessions/1/
+---
+
+# エンジニアではない私がCoderDojoを立ち上げた
+## 吉田彩（よしだ あや）
+CoderDojo早良 チャンピオン
+<div class="flex max-w-100 mx-auto my-4 justify-center">
+  <img class="w-full" src="/img/sessions/profile/yoshida-aya.webp" alt="吉田彩">
+</div>
+
+## 登壇者紹介
+2人の子どもを育てる母親です。今現在は本気で子育てをしたいので仕事をしていません。CoderDojo 久留米に2年間通い、チャンピオン美鈴さんやいろんな事にチャレンジする方々に出会い人生が変わりました！そして行動力だけでCoderDojo を立ち上げました。自主性、主体性を子供達に私を通して学んでもらえたらと思います。今は息子と一緒にITパスポートの試験を受けるため勉強中です。
+
+## 概要
+プログラミングも出来ない、PCのことも詳しくない、8歳と4歳の子どものママでしかなかった私が、CoderDojo久留米と出会い、息子と通い、そこで出会った人達に憧れ、自分も新しい事にチャレンジしたい、そしてその姿を子どもに見せたいと思いCoderDojo 早良を立ち上げました。しかし知識がない私は立ち上げと運営に苦戦する日々、そんな時に息子がメンターとして助けてくれるように。初回から参加応募30人を超え、チャンピオンに知識がなくとも、みんなで探求する唯一無二のCoderDojo早良です。
+<div class="flex max-w-100 mx-auto my-8 justify-center">
+  <img class="w-full" src="/img/sessions/thumbnails/session1.webp" alt="">
+</div>

_posts/2025-09-20-session2.md

@@ -0,0 +1,29 @@
+---
+layout: post
+title: セッション
+date: 2025-09-20T00:00:00 UTC+09:00
+permalink: /sessions/2/
+---
+
+# CoderDojoに救われて現在親子でメンターをやっている話
+## とり子・memetan
+とり子：CoderDojo香椎 CoderDojoさが メンター<br />
+memetan：CoderDojo香椎 CoderDojoさが ユースメンター
+<div class="flex max-w-100 mx-auto my-4 justify-center">
+  <img class="w-full" src="/img/sessions/profile/memetan-toriko.webp" alt="とり子・memetan">
+</div>
+
+## 登壇者紹介
+とり子（母親）：本職Webエンジニア、息子の影響で電子工作の趣味にどっぷり浸かる。<br />
+memetan（息子）：コンテスト受賞歴多数、13歳で未踏Jr採択、今年高校に入学し通いながら業務委託を受ける18歳。Webシステムや通信プロトコルを好むArchLinuxユーザー。
+
+## 概要
+こだわりが強く周囲に馴染めず不登校だった息子は、主体的に学べるCoderDojoで居場所を感じられました。
+今では親子でCoderDojoのメンターになり仲間ができ楽しく活動しています。
+本能のまま意欲的に次々作品やシステムを作り、現在は有難いことに開発の仕事もいただいています。<br>
+好奇心が強すぎる子への関わりについて、母親の立場から自身の経験をお話します。
+偉そうに言える立場ではないですが経験談として参考程度に聞いていただければ幸いです。<br>
+息子本人からも開発の楽しさについて語ります。
+<div class="flex max-w-100 mx-auto my-8 justify-center">
+  <img class="w-full" src="/img/sessions/thumbnails/session2.webp" alt="CoderDojoに救われて現在親子でメンターをやっている話">
+</div>