t-pod
株式会社東洋館出版社の社内資産です。 GitHub Pages で公開するためにリポジトリを公開していますが、オープンソースではありません。無断での複製・改変・転用はお断りします（LICENSE）。外部からの Issue・Pull Request は受け付けていません。
教育イベント・研究会向けのタイムテーブル PWA です。参加者はスマートフォンから、プログラム・配布資料・関連書籍を閲覧できます。
🔗 https://events.toyokan.co.jp/ （参加者には ?id=<イベントID> 付きのURLを配布します）
特徴
- 静的サイト（HTML / Vanilla JS / Tailwind CSS Play CDN）として GitHub Pages で公開
?id=<イベントID> で複数イベントを切り替え- UI とイベントデータを分離し、新規イベントは JSON の追加だけで運用
- 会場の「つながっているが極端に遅い」回線を前提にした Service Worker（経路ごとにキャッシュ戦略を切替）とオフライン表示
- イベント別のブランド色、PWA 名・アイコン（実体
.webmanifest 推奨）、会場マップに対応
- TIMETABLE / FILES / BOOKS の3画面と、スマートフォン向けのスワイプ操作
- 当日は該当する日付タブを初期表示し、現在の進行位置へ自動スクロール
- 半透明の固定ヘッダーと、画面下端から浮かせたガラス調のボトムナビ（iOS 26 Liquid Glass 風のカプセル）。短いタブ切替・押下フィードバックなど、軽量なモダンUI（動きを減らす設定・透明度を下げる設定・非力な端末では不透明版へ自動で落とす）
- 右下にドット絵のマスコット「ふせんネコ」。イベントデータと現在時刻から「あと◯日だよ」「いまは◯◯の時間だよ」などを吹き出しで伝える。造形は 24×24 のグリッド定義 1 箇所から実行時生成し、色はイベントのブランド色に追従（
eventInfo.mascot: false で無効化可）
- ふせんネコは配布用の SVG 資産（標準・にっこり・まじめ・うれしい・ひらめき）としても取り出せる。同じ定義から生成しているので、アプリ内の表示と配布アイコンでシルエットがずれない
- JSON 由来テキスト・URL のサニタイズ、モーダルのフォーカストラップ、通信タイムアウト時の再試行導線など、堅牢性・アクセシビリティに配慮
- 参加者向けページは検索結果に掲載させず、ルートURLから個別イベントの一覧を公開しない
URL
| URL | 表示 |
|---|
/ | LINEまたはQRコードからのアクセス案内と、東洋館出版社公式LINEの友だち追加ボタン |
/?id=2026-zensanken-37 | 指定イベントのプログラム・資料・書籍 |
作成済みイベントの本番URLは、開発者向けのURL台帳（docs/ 配下。python scripts/generate_event_url_index.py で生成）にまとめています。README からは直接リンクしません。
LINE公式アカウントのキーワード応答に貼るリンクは、台帳の「LINE配信用URL」列（?id=<id>&openExternalBrowser=1）を使ってください。 LINEが送ったリンクはそのままだとLINE内ブラウザで開き、そこではAndroidの「ホーム画面に追加」プロンプトが発火せず、iOSの共有シートにも「ホーム画面に追加」が出ません。openExternalBrowser=1 を付けると端末のChrome / Safariで直接開くため、追加の導線がそのまま機能します。付け忘れてLINE内ブラウザで開かれた場合に備えて、アプリ側にも開き直しの案内（バナー→モーダル）を用意しています。
新しいイベントを追加する
着手前に、似た名称（全国算数／算数サマーフェス）や年度違いの取り違えを避けるため、python scripts/find_event.py "<キーワード>" で id・ファイルパスを確定します（--current / --upcoming で今日基準の現行イベントも確認可）。
events/<id>.json を作成する。<id> は半角英数・ハイフン・アンダースコアのみ。ルートの id フィールドをファイル名と同じ値にする（既存を複製した場合は書き換え忘れに注意。ファイル名との不一致は scripts/validate_events.py がエラー検出）。events.json の events[] に開発・検証用の索引を1件追加する。- イベント別マニフェスト（
events/<id>.webmanifest）とアイコン、会場マップを追加する。マニフェストは data URI 動的生成にフォールバックできるが、iOS では scope の扱いが不安定になり外部リンクから PWA へ戻りにくくなるため、実体ファイルの用意を推奨（eventInfo.manifestPath で参照）。
/?id=<id> をローカルで確認し、チラシ等の QR コードに設定する。
終了したイベントの扱い
終了後もページは削除せず公開したままにします（旧チラシの QR を生かすため）。終了かどうかは開催日から自動判定します。**最終開催日の 1 週間後（＋7日）を過ぎたイベントは「終了済み」**とみなし、個別 JSON を原則更新・複製しません（似た名称・同じ会の別回との取り違え防止）。手動フラグは不要ですが、中止・延期など特殊ケースのみ個別 JSON ルート直下に "_status": "ended" / "active" を置くと日付判定より優先されます（scripts/find_event.py の表示と、UI ではマスコットの場面判定が参照します）。
JSON に不慣れな担当者向けに、Excel 入力ひな形 と 記入・変換手順 を用意しています。
生成後は、イベント索引・開発者向けURL台帳・個別JSON・日付ID・会場ID・マニフェスト・アイコンの整合性を検証します。
python scripts/import_event_workbook.py "入力済みイベント.xlsx"
python scripts/import_event_workbook.py "入力済みイベント.xlsx" --write
python scripts/validate_events.py --event <id>
Excel取込ではURL台帳も自動更新されます。events.json を手動編集した場合は、次のコマンドで台帳を更新してください。
python scripts/generate_event_url_index.py
データの扱い
- イベント情報は
events/<id>.json に置き、サイトの利用者もそのまま取得できます。公開承認済みの情報（問い合わせ先を含む）だけを記載し、未発表のイベントを先行して入れません。
- 参加者の個人情報は収集しません。フォームや配布資料は外部サービス（Google フォーム・Google ドライブ等）へのリンクとし、PWA 内では処理しません。
- 端末に保存するのは、表示用のキャッシュ（Service Worker / Cache API）と表示設定（
localStorage の t-pod:*）だけです。アクセス解析は入れていません。
- 外部から読み込むもの: Tailwind CSS Play CDN（
cdn.tailwindcss.com）、Google Fonts（Zen Kaku Gothic New・DotGothic16）、書影画像（東洋館出版社サイト・Amazon の画像配信）。
- 参加者向けページは
noindex を指定し、ルートURLからイベント一覧を公開しません。ただしリポジトリは公開なので、URL を知らなくても JSON は GitHub 上で閲覧できます。
制限事項
- LINE 内ブラウザでは「ホーム画面に追加」ができません（上記の
openExternalBrowser=1 で回避）。
- 初回表示は Tailwind Play CDN の読み込みと実行時生成に最も時間がかかります（ビルド工程なしを優先した結果）。
file:// で直接開くと動きません（下記「開発」を参照）。
開発
ビルド工程はありません。main の内容を GitHub Pages がそのまま配信します。シェル（HTML/JS/アセット）を変えたら sw.js の CACHE_VERSION を上げてください。
ローカル確認
file:// では fetch と Service Worker が動かないため、静的サーバを使用します。
python3 -m http.server 8080
- 参加者向け案内:
http://localhost:8080/
- 個別イベント:
http://localhost:8080/?id=2026-zensanken-37
- 存在しないイベント:
http://localhost:8080/?id=does-not-exist
JSON の構文確認例:
python3 -m json.tool events.json
python3 -m json.tool events/2026-zensanken-37.json
検証（CI と同じコマンド）
プルリクエストと main への push では、GitHub Actions が次の 2 つを実行します（.github/workflows/validate-events.yml）。手元でも同じコマンドで確認できます。
python -m pip install -r requirements-tools.txt
python scripts/validate_events.py # イベントJSON・索引・アセットの整合性
python -m unittest discover -s tests -v # 回帰テスト
tests/ が見ているのは、イベント関連スクリプトの挙動（test_event_tools.py）、ふせんネコの造形と生成物のずれ（test_fuseneko.py）、そして UI シェルのソースそのもの（test_shell_source.py）です。最後のひとつは index.html に NUL バイトが混ざっていないことを確かめます——HTML パーサーは NUL を U+FFFD へ黙って置き換えてしまい、grep や diff もこのファイルを「バイナリ」として扱うようになるためです。
マスコット「ふせんネコ」
造形の定義は assets/fuseneko/fuseneko-grid.js の 1 箇所だけです。配布用の SVG
（assets/fuseneko/fuseneko-*.svg）はそこから生成するため、手では編集しません。
python3 scripts/build_fuseneko.py # SVG を生成する
python3 scripts/build_fuseneko.py --check # 生成物が定義とずれていないか調べる
python3 scripts/build_fuseneko.py --preview # ターミナルにドット絵を描く
python3 scripts/build_fuseneko.py --preview FN_HAPPY # 表情を重ねて描く
サイズ・表情・色・背景を並べた確認ページ: http://localhost:8080/dev/fuseneko.html
隠し要素（いずれもイベントページのみ）:
| 操作 | 起こること |
|---|
| 右下のネコを素早く 3 回つつく | 「ぼく、ふせんネコ！」と名乗る |
| 右下のネコを長押し（0.6 秒以上） | 「ごろごろ…」となでられて、ハートが出る |
| 深夜（0〜5 時）・早朝（5〜7 時）に開く | その時間だけの一言が増える |
名乗った文言は 8 秒ほどでいつもの一言に戻ります。名前はボタンの読み上げ／ホバー表示にも
入っているので、支援技術やパソコンからも分かります。
ページに埋め込むときは fuseneko-grid.js → fuseneko.js の順に読み込み、
createFuseneko({ size, color, expression, ariaLabel }) を呼びます。
色は 1 色（テーマ色）だけ渡せば、本体・折り返し・輪郭・目鼻口の濃淡が自動で決まります。
ドキュメント
詳細仕様は README から docs/requirements.md へ分離しています。なお、リポジトリが public の場合は同ファイルも公開されます。
デプロイ
GitHub の Settings → Pages で Source を Deploy from a branch、Branch を main / / (root) に設定しています。独自ドメイン events.toyokan.co.jp は CNAME ファイルと DNS で割り当てています（CNAME を消すと公開URLが変わるので注意）。パスは相対指定のため、サブパス配信（/t-pod/）でも動きます。Pages は Jekyll でビルドされるので、開発用の文書・スクリプト（progress.md・docs/・scripts/ など）は _config.yml の exclude で公開サイトから外しています。開発用のファイルを足したら exclude にも追記してください（テストが検出します）。
ライセンス
Proprietary（All rights reserved）。株式会社東洋館出版社に帰属し、オープンソースライセンスは付与していません。詳細は LICENSE を参照してください。
リポジトリを公開していても、ここに置いたファイルと Git 履歴はすべて外部から閲覧できます。公開してよい情報だけをコミットしてください（判断基準は 公開範囲の検討メモ）。
