Skip to content

Commit 20e6c57

Browse files
authored
Merge pull request #79 from coderdojo-japan/add-time-table-page
タイムテーブルを表示できるようにする
2 parents 95bba54 + 8a9e66f commit 20e6c57

File tree

9 files changed

+555
-3
lines changed

9 files changed

+555
-3
lines changed

_data/time_table.yml

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
slot_minutes: 10
2+
day_end_hour: 17
3+
4+
rooms:
5+
- 大会議室(セッション)
6+
- 中会議室(WS1 電子工作)
7+
- 中会議室(WS2 LTブース)
8+
- 中会議室(WS3)
9+
- 中会議室(WS4)
10+
11+
room_styles:
12+
大会議室(セッション): { color: "#c43b3b" }
13+
中会議室(WS1 電子工作): { color: "#2e7d32" }
14+
中会議室(WS2 LTブース): { color: "#1976d2" }
15+
中会議室(WS3): { color: "#7b1fa2" }
16+
中会議室(WS4): { color: "#ef6c00" }
17+
18+
events:
19+
# 大会議室(セッション)
20+
- room: "大会議室(セッション)"
21+
start: "10:00"
22+
end: "10:10"
23+
title: "開会式"
24+
25+
- room: "大会議室(セッション)"
26+
start: "10:10"
27+
end: "10:50"
28+
title: "基調講演<br>プログラミング教育の脱構築——生成AI時代における〈学び〉を再考する<br>(宮島 衣瑛さん)"
29+
link: "/sessions/keynote1/"
30+
31+
- room: "大会議室(セッション)"
32+
start: "11:00"
33+
end: "11:50"
34+
title: "プログラミングコンテスト<br>ファイナリスト作品発表"
35+
link: "/contests"
36+
37+
- room: "大会議室(セッション)"
38+
start: "12:40"
39+
end: "13:30"
40+
title: "みんなのセッション"
41+
link: "/sessions/3/"
42+
43+
- room: "大会議室(セッション)"
44+
start: "13:40"
45+
end: "14:10"
46+
title: "九州Dojo座談会"
47+
48+
- room: "大会議室(セッション)"
49+
start: "14:20"
50+
end: "14:40"
51+
title: "CoderDojoに救われて現在親子でメンターをやっている話<br>(とり子さん・memetanさん)"
52+
link: "/sessions/2/"
53+
54+
- room: "大会議室(セッション)"
55+
start: "14:50"
56+
end: "15:10"
57+
title: "エンジニアではない私がCoderDojoを立ち上げた<br>(吉田彩さん)"
58+
link: "/sessions/1/"
59+
60+
- room: "大会議室(セッション)"
61+
start: "15:20"
62+
end: "16:00"
63+
title: "招待講演<br>AI時代の子どもたちの学びとは——未来の教育を考える<br>(小宮山 利恵子さん)"
64+
link: "/sessions/keynote2/"
65+
66+
- room: "大会議室(セッション)"
67+
start: "16:00"
68+
end: "16:10"
69+
title: "コンテスト結果発表"
70+
71+
- room: "大会議室(セッション)"
72+
start: "16:10"
73+
end: "16:20"
74+
title: "スポンサーセッション,<br>CoderDojoJapanの活動報告"
75+
76+
- room: "大会議室(セッション)"
77+
start: "16:20"
78+
end: "16:30"
79+
title: "閉会式"
80+
81+
# WS1 電子工作(随時受付)
82+
- room: "中会議室(WS1 電子工作)"
83+
start: "11:00"
84+
end: "16:00"
85+
title: "micro:bitで<wbr>フルカラーLEDを<wbr>自在にコントロール<br>ワークショップ"
86+
note: "随時受付<br>12:00~13:00は休憩時間 "
87+
link: "/events/microbit-neopixel-control/"
88+
89+
90+
# WS2 LTブース
91+
- room: "中会議室(WS2 LTブース)"
92+
start: "11:20"
93+
end: "12:00"
94+
title: "DojoConLT大会<br>(大人編)"
95+
note: "登壇者のみ要申込"
96+
link: "/events/dojocon-lt-senior/"
97+
98+
- room: "中会議室(WS2 LTブース)"
99+
start: "13:00"
100+
end: "13:40"
101+
title: "DojoConLT大会<br>(ニンジャ編)"
102+
note: "登壇者のみ要申込"
103+
link: "/events/dojocon-lt-junior/"
104+
105+
- room: "中会議室(WS2 LTブース)"
106+
start: "13:40"
107+
end: "14:40"
108+
title: "ぼくのかんがえた<br>さいきょうのCoderDojo<br>ワークショップ"
109+
note: "発表・投票・表彰を行います"
110+
link: "/events/saikyo-coderdojo/"
111+
112+
113+
# WS3
114+
- room: "中会議室(WS3)"
115+
start: "11:20"
116+
end: "12:50"
117+
title: "Blenderでシマエナガを作ろう!"
118+
note: "要申込"
119+
link: "/events/blender-shimaenaga/"
120+
121+
- room: "中会議室(WS3)"
122+
start: "13:10"
123+
end: "13:40"
124+
title: "ぼくのかんがえた<br>さいきょうのCoderDojo<br>ワークショップ"
125+
note: "ワークを行います"
126+
link: "/events/saikyo-coderdojo/"
127+
128+
- room: "中会議室(WS3)"
129+
start: "14:00"
130+
end: "15:20"
131+
title: "親子で学ぶ!<br>AI活用てづくりえほん<br>ワークショップ "
132+
link: "/events/ai-picture-books/"
133+
134+
135+
# WS4
136+
- room: "中会議室(WS4)"
137+
start: "11:00"
138+
end: "12:00"
139+
title: "Doodle3Dで<br>お絵描きしたものを<br>3Dプリンタで<br>印刷してみよう"
140+
note: "要申込"
141+
link: "/events/doodle3d/"
142+
143+
- room: "中会議室(WS4)"
144+
start: "12:00"
145+
end: "13:00"
146+
title: "Doodle3Dで<br>お絵描きしたものを<br>3Dプリンタで<br>印刷してみよう"
147+
note: "随時受付"
148+
link: "/events/doodle3d/"
149+
150+
- room: "中会議室(WS4)"
151+
start: "13:30"
152+
end: "15:10"
153+
title: "プログラミングロボット<br>Rootで遊ぼう!"
154+
note: "随時受付"
155+
link: "/events/irobot-root/"

_includes/header.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@ <h1 class="xl:block hidden mx-auto max-w-lg pt-5 px-8">
2424
</div>
2525
<nav id="menu-nav" class="hidden my-2 flex-col items-stretch transition-all duration-300">
2626
<ul
27-
class="flex flex-col min-h-20 items-stretch gap-2 *:px-6 *:text-center *:text-[20px] *:leading-[1.75] *:text-[#cc8f2e] [&_a]:block">
27+
class="flex flex-col min-h-20 items-stretch gap-2 *:px-5 *:text-center *:text-[20px] *:leading-[1.75] *:text-[#cc8f2e] [&_a]:block">
2828
<li><a href="/#outline">開催概要</a></li>
2929
<li><a href="/sessions/">セッション</a></li>
3030
<li><a href="/events/">イベント</a></li>
3131
<li><a href="/contests/">コンテスト</a></li>
32+
<li><a href="/time-table/">タイムテーブル</a></li>
3233
<li><a href="https://suzuri.jp/DojoConJapan" target="_blank">グッズ</a></li>
3334
<li><a href="/sponsorship/list/">スポンサー紹介</a></li>
3435
<li><a href="{{ site.contact }}" target="_blank">お問い合わせ</a></li>

_includes/navbar.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
<div class="hidden xl:block sticky mx-4 top-4 z-10">
1+
<div class="xl:block hidden sticky mx-4 top-4 z-10">
22
<nav
33
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">
4-
<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">
4+
<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">
55
<li><a href="/#outline">開催概要</a></li>
66
<li><a href="/sessions/">セッション</a></li>
77
<li><a href="/events/">イベント</a></li>
88
<li><a href="/contests/">コンテスト</a></li>
9+
<li><a href="/time-table/">タイムテーブル</a></li>
910
<li><a href="https://suzuri.jp/DojoConJapan" target="_blank">グッズ</a></li>
1011
<li><a href="/sponsorship/list/">スポンサー紹介</a></li>
1112
<li><a href="{{ site.contact }}" target="_blank">お問い合わせ</a></li>

_pages/time-table.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
layout: default
3+
permalink: /time-table/
4+
title: タイムテーブル
5+
---
6+
{% include navbar.html %}
7+
8+
{% comment %}
9+
Jekyll プラグインで事前計算されたタイムテーブル表を使用
10+
ロジックはプラグインで計算済み。Liquid は描画のみを担当
11+
{% endcomment %}
12+
13+
{% assign tte = site.data.time_table_events %}
14+
{% assign events = tte.events %}
15+
{% assign rooms = tte.rooms %}
16+
{% assign time_labels = tte.time_labels %}
17+
{% assign total_slots = tte.total_slots %}
18+
{% assign total_rooms = tte.total_rooms %}
19+
20+
<section class="w-[calc(100dvw-40px)] max-w-7xl mx-auto mt-25 xl:mt-15">
21+
<h2 class="text-4xl text-center mb-8">
22+
タイムテーブル
23+
<span class="block mt-3 text-2xl">TIME TABLE</span>
24+
</h2>
25+
<div class="overflow-x-auto border-[1px] border-[#e6e6e9]" aria-label="タイムテーブル(横スクロール可)">
26+
<table class="ttable" style="--room-count: {{ rooms | size }};">
27+
<thead>
28+
<tr>
29+
<th scope="col" class="ttable__th ttable__th--start">時間</th>
30+
{% comment %} ルーム単位でヘッダーを描画 {% endcomment %}
31+
{% for room in rooms %}
32+
<th scope="col"
33+
class="ttable__th ttable__th--room"
34+
style="--room-color: {{ room.style.color | default: '#c43b3b' }};">
35+
<span class="ttable__room-cap">{{ room.name }}</span>
36+
</th>
37+
{% endfor %}
38+
</tr>
39+
</thead>
40+
41+
<tbody>
42+
{% comment %} スロット単位(行単位)でイベントを描画 {% endcomment %}
43+
{% for slot in (0..total_slots) %}
44+
<tr>
45+
<th scope="row" class="ttable__cell ttable__cell--start">{{ time_labels[slot] }}</th>
46+
47+
{% comment %} 各イベントを描画 {% endcomment %}
48+
{% for room_index in (0..total_rooms) %}
49+
{% assign event = events[slot][room_index] %}
50+
{% assign room = rooms[room_index] %}
51+
52+
{% if event == 'continued' %}
53+
{% comment %} イベント継続中 (rowspan で描画するため出力は不要) {% endcomment %}
54+
{% elsif event %}
55+
{% comment %} イベントを描画 {% endcomment %}
56+
{% assign accent = event.accent | default: room.style.color | default: '#c43b3b' %}
57+
{% assign link_url = event.url | default: event.link %}
58+
59+
<td class="ttable__cell ttable__cell--event"
60+
rowspan="{{ event.duration }}"
61+
style="--span: {{ event.duration }};">
62+
{% if link_url %}
63+
<a class="ttable__event" href="{{ link_url | relative_url }}" style="--accent: {{ accent }};">
64+
{% else %}
65+
<div class="ttable__event" style="--accent: {{ accent }};">
66+
{% endif %}
67+
<div class="ttable__event-time" >{{ event.start }}–{{ event.end }}</div>
68+
<div class="ttable__event-title">{{ event.title }}</div>
69+
{% if event.subtitle %}<div class="ttable__event-subtitle">{{ event.subtitle }}</div>{% endif %}
70+
{% if event.badge %}<span class="ttable__badge">{{ event.badge }}</span>{% endif %}
71+
{% if event.note %}<div class="ttable__event-note">{{ event.note }}</div>{% endif %}
72+
{% if link_url %}
73+
</a>
74+
{% else %}
75+
</div>
76+
{% endif %}
77+
</td>
78+
{% else %}
79+
{% comment %} イベント無し {% endcomment %}
80+
<td class="ttable__cell ttable__cell--empty" aria-label="空き時間"></td>
81+
{% endif %}
82+
{% endfor %}
83+
</tr>
84+
{% endfor %}
85+
</tbody>
86+
</table>
87+
</div>
88+
</section>

_plugins/time_table_generator.rb

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
module Jekyll
2+
module TimeTableGenerator
3+
# タイムテーブル表を事前に計算してイベント表形式に変換
4+
# これにより、Liquid テンプレートは単純な表示のみを担当
5+
class Generator < Jekyll::Generator
6+
safe true
7+
priority :high
8+
9+
# デフォルト設定値
10+
DEFAULT_SLOT_MINUTES = 15
11+
DEFAULT_DAY_START_HOUR = 10 # 10:00
12+
DEFAULT_DAY_END_HOUR = 16 # 16:00
13+
14+
def generate(site)
15+
tt = site.data['time_table']
16+
return unless tt
17+
18+
# 設定値を取得
19+
slot_minutes = tt.fetch('slot_minutes', DEFAULT_SLOT_MINUTES)
20+
day_start = tt.fetch('day_start_hour', DEFAULT_DAY_START_HOUR)
21+
day_end = tt.fetch('day_end_hour', DEFAULT_DAY_END_HOUR)
22+
rooms = tt.fetch('rooms', [])
23+
events = tt.fetch('events', [])
24+
room_styles = tt.fetch('room_styles', {})
25+
26+
# イベント情報を表形式で生成
27+
time_table_events = create_event_table(events, rooms, room_styles, slot_minutes, day_start, day_end)
28+
29+
# 生成したイベント表データを Liquid に提供
30+
site.data['time_table_events'] = time_table_events
31+
end
32+
33+
private
34+
35+
def create_event_table(events, rooms, room_styles, slot_minutes, day_start, day_end)
36+
total_slots = ((day_end - day_start) * 60 / slot_minutes).to_i
37+
38+
# 時間ラベルを生成
39+
time_labels = (0...total_slots).map do |slot|
40+
minutes = day_start * 60 + slot * slot_minutes
41+
"#{minutes / 60}:%02d" % (minutes % 60)
42+
end
43+
44+
# ルーム情報を生成(room.style でアクセス可能)
45+
rooms_data = rooms.map do |room_name|
46+
{
47+
'name' => room_name,
48+
'style' => room_styles[room_name] || {}
49+
}
50+
end
51+
52+
# イベント表を生成(2次元配列)
53+
table = Array.new(total_slots) { Array.new(rooms.size) }
54+
55+
events.each do |event|
56+
place_event(event, table, rooms, slot_minutes, day_start, total_slots)
57+
end
58+
59+
{
60+
'events' => table,
61+
'rooms' => rooms_data,
62+
'time_labels' => time_labels,
63+
'total_slots' => total_slots - 1, # Liquidの (0..n) は inclusive なので -1
64+
'total_rooms' => rooms.size - 1, # Liquidの (0..n) は inclusive なので -1
65+
}
66+
end
67+
68+
def place_event(event, table, rooms, slot_minutes, day_start, total_slots)
69+
room_index = rooms.index(event['room'])
70+
return unless room_index
71+
72+
# 時間を分に変換して揃える
73+
event_start = time_to_minutes(event['start'])
74+
event_end = time_to_minutes(event['end'])
75+
76+
# スロット計算(分に揃える)
77+
slot_start = [(event_start - day_start * 60) / slot_minutes, 0].max.to_i
78+
slot_end = [(event_end - day_start * 60) / slot_minutes, total_slots].min.to_i
79+
duration = slot_end - slot_start
80+
81+
return if slot_start >= total_slots || duration <= 0
82+
83+
# イベントの長さ情報 (duration) を追加
84+
table[slot_start][room_index] = event.merge('duration' => duration)
85+
86+
# 継続スロットをマーク
87+
(slot_start + 1...slot_end).each do |slot|
88+
break if slot >= total_slots
89+
table[slot][room_index] = 'continued'
90+
end
91+
end
92+
93+
def time_to_minutes(time_str)
94+
return 0 unless time_str
95+
hours, minutes = time_str.split(':').map(&:to_i)
96+
hours * 60 + minutes
97+
end
98+
end
99+
end
100+
end

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
layout: post
3+
title: タイムテーブルの公開
4+
title-in-news-list: タイムテーブルの公開
5+
date: 2025-10-16
6+
categories: news
7+
tags: タイムテーブル
8+
permalink: /news/time-table/
9+
---
10+
11+
お待たせしました。DojoCon Japan 2025 のタイムテーブルを公開しました。<br>
12+
各セッション、ワークショップの詳細ページも順次公開していますので、ぜひご覧ください。
13+
<p class='mt-6'>
14+
<a href='/time-table/'>タイムテーブル</a>
15+
</p>

0 commit comments

Comments
 (0)