タイムテーブルを表示できるようにする

_data/time_table.yml

@@ -0,0 +1,155 @@
+slot_minutes: 10
+day_end_hour: 17
+
+rooms:
+  - 大会議室（セッション）
+  - 中会議室（WS1 電子工作）
+  - 中会議室（WS2 LTブース）
+  - 中会議室（WS3）
+  - 中会議室（WS4）
+
+room_styles:
+  大会議室（セッション）:   { color: "#c43b3b" }
+  中会議室（WS1 電子工作）: { color: "#2e7d32" }
+  中会議室（WS2 LTブース）: { color: "#1976d2" }
+  中会議室（WS3）:          { color: "#7b1fa2" }
+  中会議室（WS4）:          { color: "#ef6c00" }
+
+events:
+  # 大会議室（セッション）
+  - room:  "大会議室（セッション）"
+    start: "10:00"
+    end:   "10:10"
+    title: "開会式"
+
+  - room:  "大会議室（セッション）"
+    start: "10:10"
+    end:   "10:50"
+    title: "基調講演<br>プログラミング教育の脱構築——生成AI時代における〈学び〉を再考する<br>（宮島 衣瑛さん）"
+    link:  "/sessions/keynote1/"
+
+  - room:  "大会議室（セッション）"
+    start: "11:00"
+    end:   "11:50"
+    title: "プログラミングコンテスト<br>ファイナリスト作品発表"
+    link: "/contests"
+
+  - room:  "大会議室（セッション）"
+    start: "12:40"
+    end:   "13:30"
+    title: "みんなのセッション"
+    link: "/sessions/3/"
+
+  - room:  "大会議室（セッション）"
+    start: "13:40"
+    end:   "14:10"
+    title: "九州Dojo座談会"
+
+  - room:  "大会議室（セッション）"
+    start: "14:20"
+    end:   "14:40"
+    title: "CoderDojoに救われて現在親子でメンターをやっている話<br>（とり子さん・memetanさん）"
+    link: "/sessions/2/"
+
+  - room:  "大会議室（セッション）"
+    start: "14:50"
+    end:   "15:10"
+    title: "エンジニアではない私がCoderDojoを立ち上げた<br>（吉田彩さん）"
+    link: "/sessions/1/"
+
+  - room:  "大会議室（セッション）"
+    start: "15:20"
+    end:   "16:00"
+    title: "招待講演<br>AI時代の子どもたちの学びとは——未来の教育を考える<br>（小宮山 利恵子さん）"
+    link:  "/sessions/keynote2/"
+
+  - room:  "大会議室（セッション）"
+    start: "16:00"
+    end:   "16:10"
+    title: "コンテスト結果発表"
+
+  - room:  "大会議室（セッション）"
+    start: "16:10"
+    end:   "16:20"
+    title: "スポンサーセッション,<br>CoderDojoJapanの活動報告"
+
+  - room:  "大会議室（セッション）"
+    start: "16:20"
+    end:   "16:30"
+    title: "閉会式"
+
+  # WS1 電子工作（随時受付）
+  - room:  "中会議室（WS1 電子工作）"
+    start: "11:00"
+    end:   "16:00"
+    title: "micro:bitで<wbr>フルカラーLEDを<wbr>自在にコントロール<br>ワークショップ"
+    note: "随時受付<br>12:00~13:00は休憩時間 "
+    link: "/events/microbit-neopixel-control/"
+
+
+  # WS2 LTブース
+  - room:  "中会議室（WS2 LTブース）"
+    start: "11:20"
+    end:   "12:00"
+    title: "DojoConLT大会<br>（大人編）"
+    note: "登壇者のみ要申込"
+    link: "/events/dojocon-lt-senior/"
+
+  - room:  "中会議室（WS2 LTブース）"
+    start: "13:00"
+    end:   "13:40"
+    title: "DojoConLT大会<br>（ニンジャ編）"
+    note: "登壇者のみ要申込"
+    link: "/events/dojocon-lt-junior/"
+
+  - room:  "中会議室（WS2 LTブース）"
+    start: "13:40"
+    end:   "14:40"
+    title: "ぼくのかんがえた<br>さいきょうのCoderDojo<br>ワークショップ"
+    note: "発表・投票・表彰を行います"
+    link: "/events/saikyo-coderdojo/"
+
+
+  # WS3
+  - room:  "中会議室（WS3）"
+    start: "11:20"
+    end:   "12:50"
+    title: "Blenderでシマエナガを作ろう！"
+    note: "要申込"
+    link: "/events/blender-shimaenaga/"
+
+  - room:  "中会議室（WS3）"
+    start: "13:10"
+    end:   "13:40"
+    title: "ぼくのかんがえた<br>さいきょうのCoderDojo<br>ワークショップ"
+    note: "ワークを行います"
+    link: "/events/saikyo-coderdojo/"
+
+  - room: "中会議室（WS3）"
+    start: "14:00"
+    end:   "15:20"
+    title: "親子で学ぶ！<br>AI活用てづくりえほん<br>ワークショップ "
+    link: "/events/ai-picture-books/"
+
+
+  # WS4
+  - room:  "中会議室（WS4）"
+    start: "11:00"
+    end:   "12:00"
+    title: "Doodle3Dで<br>お絵描きしたものを<br>3Dプリンタで<br>印刷してみよう"
+    note: "要申込"
+    link: "/events/doodle3d/"
+
+  - room: "中会議室（WS4）"
+    start: "12:00"
+    end:   "13:00"
+    title: "Doodle3Dで<br>お絵描きしたものを<br>3Dプリンタで<br>印刷してみよう"
+    note: "随時受付"
+    link: "/events/doodle3d/"
+
+  - room:  "中会議室（WS4）"
+    start: "13:30"
+    end:   "15:10"
+    title: "プログラミングロボット<br>Rootで遊ぼう！"
+    note: "随時受付"
+    link: "/events/irobot-root/"

_includes/header.html

@@ -24,11 +24,12 @@ <h1 class="xl:block hidden mx-auto max-w-lg pt-5 px-8">
     </div>
     <nav id="menu-nav" class="hidden my-2 flex-col items-stretch transition-all duration-300">
       <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">
+        class="flex flex-col min-h-20 items-stretch gap-2 *:px-5 *:text-center *:text-[20px] *:leading-[1.75] *:text-[#cc8f2e] [&_a]:block">
         <li><a href="/#outline">開催概要</a></li>
         <li><a href="/sessions/">セッション</a></li>
         <li><a href="/events/">イベント</a></li>
         <li><a href="/contests/">コンテスト</a></li>
+        <li><a href="/time-table/">タイムテーブル</a></li>
         <li><a href="https://suzuri.jp/DojoConJapan" target="_blank">グッズ</a></li>
         <li><a href="/sponsorship/list/">スポンサー紹介</a></li>
         <li><a href="{{ site.contact }}" target="_blank">お問い合わせ</a></li>

_includes/navbar.html

@@ -1,11 +1,12 @@
-<div class="hidden xl:block sticky mx-4 top-4 z-10">
+<div class="xl:block hidden sticky mx-4 top-4 z-10">
   <nav
     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">
+    <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-5">
       <li><a href="/#outline">開催概要</a></li>
       <li><a href="/sessions/">セッション</a></li>
       <li><a href="/events/">イベント</a></li>
       <li><a href="/contests/">コンテスト</a></li>
+      <li><a href="/time-table/">タイムテーブル</a></li>
       <li><a href="https://suzuri.jp/DojoConJapan" target="_blank">グッズ</a></li>
       <li><a href="/sponsorship/list/">スポンサー紹介</a></li>
       <li><a href="{{ site.contact }}" target="_blank">お問い合わせ</a></li>

_pages/time-table.html

@@ -0,0 +1,88 @@
+---
+layout: default
+permalink: /time-table/
+title: タイムテーブル
+---
+{% include navbar.html %}
+
+{% comment %}
+  Jekyll プラグインで事前計算されたタイムテーブル表を使用
+  ロジックはプラグインで計算済み。Liquid は描画のみを担当
+{% endcomment %}
+
+{% assign tte         = site.data.time_table_events %}
+{% assign events      = tte.events %}
+{% assign rooms       = tte.rooms %}
+{% assign time_labels = tte.time_labels %}
+{% assign total_slots = tte.total_slots %}
+{% assign total_rooms = tte.total_rooms %}
+
+<section class="w-[calc(100dvw-40px)] max-w-7xl mx-auto mt-25 xl:mt-15">
+  <h2 class="text-4xl text-center mb-8">
+    タイムテーブル
+    <span class="block mt-3 text-2xl">TIME TABLE</span>
+  </h2>
+  <div class="overflow-x-auto border-[1px] border-[#e6e6e9]" aria-label="タイムテーブル（横スクロール可）">
+    <table class="ttable" style="--room-count: {{ rooms | size }};">
+      <thead>
+        <tr>
+          <th scope="col" class="ttable__th ttable__th--start">時間</th>
+          {% comment %} ルーム単位でヘッダーを描画 {% endcomment %}
+          {% for room in rooms %}
+            <th scope="col"
+                class="ttable__th ttable__th--room"
+                style="--room-color: {{ room.style.color | default: '#c43b3b' }};">
+              <span class="ttable__room-cap">{{ room.name }}</span>
+            </th>
+          {% endfor %}
+        </tr>
+      </thead>
+
+      <tbody>
+        {% comment %} スロット単位（行単位）でイベントを描画 {% endcomment %}
+        {% for slot in (0..total_slots) %}
+          <tr>
+            <th scope="row" class="ttable__cell ttable__cell--start">{{ time_labels[slot] }}</th>
+
+            {% comment %} 各イベントを描画 {% endcomment %}
+            {% for room_index in (0..total_rooms) %}
+              {% assign event = events[slot][room_index] %}
+              {% assign room  = rooms[room_index] %}
+
+              {% if event == 'continued' %}
+                {% comment %} イベント継続中 (rowspan で描画するため出力は不要) {% endcomment %}
+              {% elsif event %}
+                {% comment %} イベントを描画 {% endcomment %}
+                {% assign accent = event.accent | default: room.style.color | default: '#c43b3b' %}
+                {% assign link_url = event.url | default: event.link %}
+
+                <td class="ttable__cell ttable__cell--event"
+                    rowspan="{{ event.duration }}"
+                    style="--span: {{ event.duration }};">
+                  {% if link_url %}
+                    <a class="ttable__event" href="{{ link_url | relative_url }}" style="--accent: {{ accent }};">
+                  {% else %}
+                    <div class="ttable__event" style="--accent: {{ accent }};">
+                  {% endif %}
+                      <div class="ttable__event-time" >{{ event.start }}–{{ event.end }}</div>
+                      <div class="ttable__event-title">{{ event.title }}</div>
+                      {% if event.subtitle %}<div class="ttable__event-subtitle">{{ event.subtitle }}</div>{% endif %}
+                      {% if event.badge %}<span class="ttable__badge">{{ event.badge }}</span>{% endif %}
+                      {% if event.note %}<div class="ttable__event-note">{{ event.note }}</div>{% endif %}
+                  {% if link_url %}
+                    </a>
+                  {% else %}
+                    </div>
+                  {% endif %}
+                </td>
+              {% else %}
+                {% comment %} イベント無し {% endcomment %}
+                <td class="ttable__cell ttable__cell--empty" aria-label="空き時間"></td>
+              {% endif %}
+            {% endfor %}
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</section>

_plugins/time_table_generator.rb

@@ -0,0 +1,100 @@
+module Jekyll
+  module TimeTableGenerator
+    # タイムテーブル表を事前に計算してイベント表形式に変換
+    # これにより、Liquid テンプレートは単純な表示のみを担当
+    class Generator < Jekyll::Generator
+      safe true
+      priority :high
+
+      # デフォルト設定値
+      DEFAULT_SLOT_MINUTES   = 15
+      DEFAULT_DAY_START_HOUR = 10  # 10:00
+      DEFAULT_DAY_END_HOUR   = 16  # 16:00
+
+      def generate(site)
+        tt = site.data['time_table']
+        return unless tt
+
+        # 設定値を取得
+        slot_minutes = tt.fetch('slot_minutes',   DEFAULT_SLOT_MINUTES)
+        day_start    = tt.fetch('day_start_hour', DEFAULT_DAY_START_HOUR)
+        day_end      = tt.fetch('day_end_hour',   DEFAULT_DAY_END_HOUR)
+        rooms        = tt.fetch('rooms',          [])
+        events       = tt.fetch('events',         [])
+        room_styles  = tt.fetch('room_styles',    {})
+
+        # イベント情報を表形式で生成
+        time_table_events = create_event_table(events, rooms, room_styles, slot_minutes, day_start, day_end)
+
+        # 生成したイベント表データを Liquid に提供
+        site.data['time_table_events'] = time_table_events
+      end
+
+      private
+
+      def create_event_table(events, rooms, room_styles, slot_minutes, day_start, day_end)
+        total_slots = ((day_end - day_start) * 60 / slot_minutes).to_i
+
+        # 時間ラベルを生成
+        time_labels = (0...total_slots).map do |slot|
+          minutes = day_start * 60 + slot * slot_minutes
+          "#{minutes / 60}:%02d" % (minutes % 60)
+        end
+
+        # ルーム情報を生成（room.style でアクセス可能）
+        rooms_data = rooms.map do |room_name|
+          {
+            'name'  => room_name,
+            'style' => room_styles[room_name] || {}
+          }
+        end
+
+        # イベント表を生成（2次元配列）
+        table = Array.new(total_slots) { Array.new(rooms.size) }
+
+        events.each do |event|
+          place_event(event, table, rooms, slot_minutes, day_start, total_slots)
+        end
+
+        {
+          'events'      => table,
+          'rooms'       => rooms_data,
+          'time_labels' => time_labels,
+          'total_slots' => total_slots - 1,  # Liquidの (0..n) は inclusive なので -1
+          'total_rooms' => rooms.size  - 1,  # Liquidの (0..n) は inclusive なので -1
+        }
+      end
+
+      def place_event(event, table, rooms, slot_minutes, day_start, total_slots)
+        room_index = rooms.index(event['room'])
+        return unless room_index
+
+        # 時間を分に変換して揃える
+        event_start = time_to_minutes(event['start'])
+        event_end   = time_to_minutes(event['end'])
+
+        # スロット計算（分に揃える）
+        slot_start = [(event_start - day_start * 60) / slot_minutes, 0].max.to_i
+        slot_end   = [(event_end   - day_start * 60) / slot_minutes, total_slots].min.to_i
+        duration   = slot_end - slot_start
+
+        return if slot_start >= total_slots || duration <= 0
+
+        # イベントの長さ情報 (duration) を追加
+        table[slot_start][room_index] = event.merge('duration' => duration)
+
+        # 継続スロットをマーク
+        (slot_start + 1...slot_end).each do |slot|
+          break if slot >= total_slots
+          table[slot][room_index] = 'continued'
+        end
+      end
+
+      def time_to_minutes(time_str)
+        return 0 unless time_str
+        hours, minutes = time_str.split(':').map(&:to_i)
+        hours * 60 + minutes
+      end
+    end
+  end
+end

_posts/2025-10-16-time-table.md

@@ -0,0 +1,15 @@
+---
+layout: post
+title: タイムテーブルの公開
+title-in-news-list: タイムテーブルの公開
+date: 2025-10-16
+categories: news
+tags: タイムテーブル
+permalink: /news/time-table/
+---
+
+お待たせしました。DojoCon Japan 2025 のタイムテーブルを公開しました。<br>
+各セッション、ワークショップの詳細ページも順次公開していますので、ぜひご覧ください。
+<p class='mt-6'>
+  <a href='/time-table/'>タイムテーブル</a>
+</p>