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

_data/time_table.yml

@@ -0,0 +1,146 @@
+slot_minutes: 10
+
+rooms:
+  - 大会議室 (セッション)
+  - 展示 (コンテスト用)
+  - 展示
+  - 中会議室 (WS1 電子工作)
+  - 中会議室 (WS2 LTブース)
+  - 中会議室 (WS3)
+  - 中会議室 (WS4)
+
+room_styles:
+  大会議室 (セッション):   { color: "#c43b3b" }
+  展示 (コンテスト用):     { color: "#f5a201" }
+  展示:                    { color: "#888888" }
+  中会議室 (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:20"
+    title: "基調講演 (宮島さん)"
+    link:  "/sessions/keynote1/"
+
+  - room:  "大会議室 (セッション)"
+    start: "11:00"
+    end:   "12:00"
+    title: "コンテスト作品発表"
+
+  - room:  "大会議室 (セッション)"
+    start: "12:00"
+    end:   "12:40"
+    title: "ランチタイム"
+    note:  "適宜お昼をお取りください"
+
+  - room:  "大会議室 (セッション)"
+    start: "12:40"
+    end:   "13:00"
+    title: "みんなのセッション"
+
+  - room:  "大会議室 (セッション)"
+    start: "13:40"
+    end:   "14:00"
+    title: "九州チャンピオン座談会"
+
+  - room:  "大会議室 (セッション)"
+    start: "14:20"
+    end:   "14:40"
+    title: "スピーカーセッション とり子さん (20分)"
+
+  - room: 大会議室 (セッション)
+    start: "14:40"
+    end:   "14:50"
+    title: "伸びるかも予備"
+
+  - room:  "大会議室 (セッション)"
+    start: "14:50"
+    end:   "15:10"
+    title: "スピーカーセッション 早良区Dojoチャンピオン (20分)"
+
+  - room:  "大会議室 (セッション)"
+    start: "15:10"
+    end:   "15:20"
+    title: "スポンサーセッション (2件)"
+
+  - room:  "大会議室 (セッション)"
+    start: "15:20"
+    end:   "15:30"
+    title: "招待講演 (小宮山さん)"
+    link:  "/sessions/keynote2/"
+
+  - room:  "大会議室 (セッション)"
+    start: "16:00"
+    end:   "16:10"
+    title: "コンテスト結果発表"
+
+  - room:  "大会議室 (セッション)"
+    start: "16:10"
+    end:   "16:20"
+    title: "スポンサーセッション (1件)"
+    note:  "該当なしの場合は CoderDojo Japan 活動報告"
+
+  - room:  "大会議室 (セッション)"
+    start: "16:20"
+    end:   "16:30"
+    title: "閉会式"
+
+  # 展示
+  - room:  "展示 (コンテスト用)"
+    start: "10:00"
+    end:   "16:00"
+    title: "ファイナリスト作品展示"
+    note:  "14:00 投票締切"
+
+  - room:  "展示"
+    start: "10:00"
+    end:   "16:00"
+    title: "展示"
+
+  # WS1 電子工作 (随時受付)
+  - room:  "中会議室 (WS1 電子工作)"
+    start: "11:00"
+    end:   "16:00"
+    title: "電子工作ワークショップ (随時受付)"
+
+  # WS2 LTブース
+  - room:  "中会議室 (WS2 LTブース)"
+    start: "11:20"
+    end:   "12:00"
+    title: "Dojo関係者等大人LT (要申込)"
+
+  - room:  "中会議室 (WS2 LTブース)"
+    start: "13:00"
+    end:   "14:00"
+    title: "DojoニンジャLT (要申込)"
+
+  # WS3
+  - room:  "中会議室 (WS3)"
+    start: "11:00"
+    end:   "12:00"
+    title: "ブレンダー (要申込)"
+
+  - room:  "中会議室 (WS3)"
+    start: "13:00"
+    end:   "14:00"
+    title: "PLAYRISE"
+
+  # WS4
+  - room:  "中会議室 (WS4)"
+    start: "11:00"
+    end:   "12:00"
+    title: "PowerPoint とプログラミング"
+
+  - room:  "中会議室 (WS4)"
+    start: "14:10"
+    end:   "15:00"
+    title: "PowerPoint とプログラミング"

_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-5">
+  <h2 class="text-4xl text-center mb-8">
+    Time table
+    <span class="block mt-3 text-2xl">タイムテーブル</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