完成したもの
JAWS DAYS 2026のタイムテーブルを自分好みにカスタマイズしたビューアーを作りました。
できたものはこちらです。
デザインについては何も言っていないのですが、AWS風の色になっていました。
GitHubリポジトリはこちらです。
作った背景
JAWS DAYS 2026の開催に向けて、タイムテーブルを見ながら参加セッションを検討していました。
この公式タイムテーブルは、各セッションのプロポーザルを開いて、★を入れるとタイムテーブルにも★が付きます。
自分の参加するセッションがどれかわかるようになります。
また、現在時刻に赤いラインが表示されますので、今やっているセッションも一目瞭然です（PCの時間を変更して表示させています）。
しかし、控えめですよね？（特に★が）
お気に入りみたいな機能も1つずつプロポーザルページを開かないといけないのも煩雑です。
自分用を作りたくなりますよね？
私はなりました！
以前、AWS Summitミニスケジュールビューアーを作りましたが、GitHub Pagesで動作する似たようなものを作ることにしました。
このときは、Amazon Q CLIを使いましたが、今回はClaude Codeです。
ミニスケジュールビューアーを作成してから1年弱ですが、当時とは全然違い、実装がスムーズです。
普段からも感じていますが、似たようなものを作ると進化がよくわかります。
実装のポイント
Googleカレンダー、X連携
AWS Summitミニスケジュールビューアーにもあった機能です。
- Googleカレンダー追加とXポスト機能
Cookie による参加予定管理
AWS Summitミニスケジュールビューアーにはなかった参加セッション管理機能です。今回はGoogleカレンダーだけではなく、自前で予定管理できるようにしました。
- ブラウザのCookieでチェック状態を保存
- 再読み込みしても選択状態を維持
const COOKIE_NAME = "jawsdays2026_checked";
const COOKIE_DAYS = 90;
function getCookie(name) {
const match = document.cookie.match(
new RegExp("(^| )" + name + "=([^;]+)")
);
return match ? decodeURIComponent(match[2]) : null;
}
function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${encodeURIComponent(value)};expires=${d.toUTCString()};path=/;SameSite=Lax`;
}
function loadCheckedSessions() {
const val = getCookie(COOKIE_NAME);
if (val) {
const arr = JSON.parse(val);
checkedSessions = new Set(arr);
}
}
function saveCheckedSessions() {
const arr = Array.from(checkedSessions);
setCookie(COOKIE_NAME, JSON.stringify(arr), COOKIE_DAYS);
}
時間帯の重複チェックロジック
初期実装では単純な参加セッションチェック機能でしたが、参加できないところは選択不可になったほうが良いので追加しました。
- 開始・終了時刻の重複判定
- ワークショップなど長時間セッションへの対応
function sessionConflicts(checked, target) {
const targetStart = timeToMinutes(target.start);
const targetEnd = timeToMinutes(target.end);
const checkedStart = timeToMinutes(checked.start);
const checkedEnd = timeToMinutes(checked.end);
return targetStart < checkedEnd && checkedStart < targetEnd;
}
リアルタイム表示
AWS Summitミニスケジュールビューアーにもあった機能です。
- 現在時刻の自動更新
- 開催中セッションの強調表示
デバッグモード
上記、開催中セッションの強調表示を確認できるモードです。
URLパラメータ?mode=debugをつけると、現在日時を変更して動作確認ができるようになります。
開発で直面した技術的な課題やClaude Codeでも苦戦したポイント
トークン消費量
デフォルトのモデルが「Opus 4.5」となっていて、変更するのを忘れて指示を出したら、私の契約プランではすぐにLimitになってしまいリセット待ちになりました。
実装を「Sonnet 4.5」にお任せすることで、Limit解除待ちがなくなりました。
データ取得の壁
公式のタイムテーブルは動的に作成されていて、Pythonで取得してJSON変換しようとしましたが403になってダメだと言われたので、ブラウザで表示されたHTMLをそのまま渡すことでひとまず回避しました。
セッションの開始と終了時刻がない
タイムテーブルの各セッションデータは開始と終了時刻の情報を持っていませんでした。
HTMLの位置だけで配置されていたので、topで開始時刻、heightからセッション時間（分）を計算し、終了時間を割り出しました。
具体的には、次のセクションで説明するHTML構造から時刻を抽出しています。
タイムテーブルはHTMLのTableではない
タイムテーブルは<table>タグではなく、<div>タグで構成されていました。
Track列と時間軸は行列で対応しているのではなく、Trackの列がtrack-8というクラス（left:1040px）で列位置を指定、それぞれのセッション時間は、height:540px; top:1800px;で時間軸の位置を指定して配置していました。
Claude Codeだけでは構造を理解できず、最初にできたタイムテーブルは各セッションのTrackや時間帯が滅茶苦茶なものでした。
そのため、どのような定義になっているのかを自分で解析して指示する必要がありました。
<div
class="proposal email-tags-selector-v2-container proposal-in-timetable variable-width width-m track-8 "
style="
height:540px;
top:1800px;
"
>
<div class="ribbon-content"><span class="ribbon"><i class="fa-regular fa-star" ></i></span></div>
<div class="d-flex flex-column" style="height:100%;">
<div class="title">
<a href="/jawsdays-2026/proposal/8c6c2eea-7aad-4336-a393-22dc56578bc5">JAWS DAYS お茶会テーブル「純喫茶 鮫」</a>
</div>
<div class="flex-grow-1 speaker">
<div>
<img src="/files/jawsdays-2026/speaker/9e35e969-9a4f-48c7-95ed-b935a7dbeeb1.png" class="avatar" alt="お祭り班">
<div class="speaker-name">
お祭り班
</div>
</div>
</div>
</div>
</div>
まとめ
JAWS DAYS 2026のタイムテーブルを自分好みに作り替えてみました。
1年前にミニスケジュールビューアーの実装で使用したAmazon Q CLI（以下、Q CLI）と比較すると、より自然な対話で実装できるようになっていました。
また、当時のQ CLIではテーブルヘッダーの固定が大変でしたが、今回は簡単に実装してくれました。
そして、何も指示していないのにAWS風の色合いにしてくれるなど便利な面もありましたが、一方で人が見てすぐわかりそうな構造が理解できないところが面白い発見でした。
AI開発ツールの進化で、アイデアから実装までのスピードが格段に上がりました。休日の趣味の時間の片手間にできるのはとてもよいです。みなさんも、ぜひ試してみてください！