ICUのじかんわり | Timetable.icu

ICU生の時間割・履修計画アプリの決定版

できること

🔎あなたにピッタリのコースを見つける

• 公式授業一覧から取得されたすべてのコースを検索

📅完璧な時間割を組む

• Long 4, 5, 6, 7など、ICUならではのコマ割りも表示

🔄マルチデバイス同期

• ログインしてすべてのデバイスで最新の時間割を共有

Screenshots

Page	Screenshots
Home
Explore
Timetable

目標

• 100人のTermly Active UserをICU内で獲得する
  • Google / DuckDuckGoで「ICU 履修登録」「ICU 時間割」「ICU academic planning」「ICU registration」で1番目
• 私が卒業しても自動で更新される状態にする
• 授業データを公開情報のみで構築する
  • 教室情報は各自に打ち込んでもらえるように
  • regnoはsyllabus公開後にリンクから取得
  • GitLab CI/CD?

大切にしたいこと

• とにかく時間割作成に使いやすいものである
  • long時間割対応 (しょうもないことだがアイデンティティ)
  • 軽量 (めざせ 全ページPageSpeedInsights 100): 全ページ97点以上達成，充分だろう
• ICUらしくある
  • いろいろなものがひしめくリベラルアーツの感じを楽しく表現する
• プロジェクトとして持続可能なものである
  • 後輩に引き継ぐ前提で作る，その価値があるものにする
  • 後進育成
    • Web/アプリ開発入門
    • ハッカソン
  • オープンソース
  • ICUのいろいろな団体とコラボする
  • できればCTLなどでも使ってもらいたい
  • 木越が責任を持って取り組む
• Transparency
  • Share Issues, Feature Requests
  • 透明性のある予算と，ちゃんと収支均衡を取る

挑戦したいこと

• PR
  • 対面で宣伝
  • Instagram等でICU関連の団体/個人に宣伝してもらう
  • 受験生にリーチ
    • 「こんなサイトを学生が作る大学なんだ！」+入学後に使ってもらう
• コンポーネントテスト
• ちゃんとWebアナリティクスを取って開発の励みにする

ライバル

• ICUrriculum
• Timetable4ICU: 2026のスケジュールは更新されていない
• すごい時間割
• Penmark

参考

• Hupass
• 現在の時間割
• Twinte
• Webサービス公開前のチェックリスト
• 過去のTimetable for icu
  • 1代目「ICUTTABLE」
    • 不明
  • 2代目「ICUTTABLE#2」: ICU生向け時間割アプリ「ICUTTABLE#2」開発者インタビュー
    • 新井友朗さん（ID17-18か？）
  • 3代目「Timetable For ICU」: 私の芽―ICU時間割アプリを作る
    • 千葉彌平さん（ID19; お会いしたことある, 確か平島大先生のご紹介?）
      • 課題: Apple Developers Programの登録料を賄えない
    • GitHub
    • Twitter
    • Facebook
  • 4代目 : Timetable4ICU - 国際基督教大学の時間割アプリ
    • Kohshi Yamaguchi (ID24-25?; お会いしたことある)
      • Apple Developers Programの登録料は気にならないとお会いしたときに仰っていた
    • 3代目のスクリーンショットと比較する限り，3代目を引き継いだ？
    • GitHub
    • Twitter

---

Development

技術選定

Frontend

• Astro
• React
• Tailwindcss
• DaisyUI
• TypeScript

Backend

• Astro
• BetterAuth (Google OAuth)
• Drizzle ORM
• TypeScript

Infra

• Cloudflare Workers
• Cloudflare D1

Test

• Playwright

Runtime/Package Manager

• Bun

技術構成はこちらの記事でも解説されています: 国際基督教大学の非公式時間割/履修計画アプリ「ICUのじかんわり」をAstro+Cloudflare Workers+D1でつくりました | Zenn

🚀 Project Structure

/
├── migrations/
│   └── migration.sql
├── public/
│   └── favicon.svg
├── scripts/
│   ├── data/
│   │   ├── ehandbook/  // 一般公開されているシラバスページ（HTML）はここに入れる
│   │   └── icumap/     // 学生向けのシラバスページ（HTML）はここに入れる
│   └── parser.py
├── src/
│   ├── assets/
│   │   └── astro.svg
│   ├── components/
│   │   └── Component.astro
│   ├── constants/
│   │   └── config.ts // Constants used globally
│   ├── db/
│   │   ├── data/
│   │   └── schema/
│   ├── lib/
│   │   └── server.ts // schema definitions, auth-related files
│   ├── pages/
│   │   ├── api/
│   │   │   └── api.ts
│   │   ├── index.astro
│   │   └── en/
│   │       └── index.astro
│   ├── styles/
│   │   └── global.css
│   ├── env.d.ts // Type for Astro
│   └── middleware.ts
└── package.json

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm dev	Starts local dev server at localhost:4321
pnpm run build	Build your production site to ./dist/
pnpm preview	Preview your build locally, before deploying
pnpm astro ...	Run CLI commands like astro add, astro check
pnpm astro -- --help	Get help using the Astro CLI

Run Test

pnpm dlx playwright test

Format Code

pnpm run format

Create types from wrangler.jsonc

pnpm dlx wrangler types

Schema Definition, Migration

Create schema for BetterAuth

pnpm dlx auth@latest generate --config=./src/lib/auth/cli.ts --output=./src/db/schema/auth.ts

Create migration file by Drizzle Kit --custom Create Empty Migration File --name=clear_user_name_image Set Custom Name on Migration File

pnpm drizzle-kit generate

一度生成したmigrationファイルをなかったことにする

pnpm drizzle-kit drop

Migration to D1

はじめに一度のみ，コースのカテゴリーを入れてあげる必要がある

# Local
pnpm wrangler d1 execute timetable_icu --file=./src/db/data/seed_categories.sql
# Remote
pnpm wrangler d1 execute timetable_icu --remote --file=./src/db/data/seed_categories.sql

Remoteは1度目は通らないことがあるが2回目やればいけるときがある

pnpm run db:migrate:local

pnpm run db:migrate:remote

もし外部キー制約が通らない場合

bun wrangler d1 execute timetable_icu --remote --file=./migrations/0012_smart_mojo.sql

などとしてmigration出来るが，これではD1のmigration履歴が残らないため，上記execute後に上記 sqlファイルの中身を一旦空にしてapplyする方法がある．私は一度これをやってPasskey Tableを消してしまったので推奨しない． -->しかし，wrangler applyではPRAGMA foreign_keys = OFF;が勝手に無効化されることがあるので，bun wrangler d1 executeでやらなければいけない場面もありそう．

Debug with Cloudflare Environment

pnpm run build && pnpm x wrangler dev

D1でのSQL文実行例

pnpm wrangler d1 execute timetable_icu --file=scripts/out/sync_courses.sql

Corse data insertion

Create JSON from HTML

pnpm run db:scrape:icumap    # 学生専用サイトからダウンロードしたHTMLがある前提
pnpm run db:scrape:ehandbook # 公開情報からダウンロードしたHTMLがある前提

Local DBにJSONからcourses/categoriesを入れる

pnpm run db:push:local

HTML->JSON->Local DBを一括で実行

pnpm run db:sync:local

Remote DBにJSONからcourses/categoriesを入れる

pnpm run db:push:remote

HTML->JSON->Remote DBを一括で実行

pnpm run db:sync:remote

ライセンス出力

pnpm dlx generate-license-file --input package.json --output CREDITS

リモートのログ出力

pnpm wrangler tail