現場の解像度が、設計の深さを決める
教育、生命科学、英語、AI、ソフトウェア開発にまたがる知見をもとに、開発者自身が課題発見、要件定義、UX設計、アーキテクチャ、検証、運用までを一貫して横断。教育現場の課題や利用者の行動を、個別の機能だけでなく、プロダクト全体の設計判断へ反映した。
01IDEA
FOR DEVELOPERS
学びの熱を、
実装する。学びの熱を、
設計で、
途切れさせない。
講義を、参加・理解・対話がつながる体験へ。
教育現場で継続的に使える実用性と、その体験を支えるUX、アーキテクチャ、セキュリティ、検証を、一つのシステムに統合した。
EDUCATIONAL DESIGN
専門領域を超え、COMPASSシリーズを一つの体験で貫く。
現場で使われ、現場とともに育つ
COMPASS Interactiveは、講義やプレゼンテーションを継続的に行う開発者自身が、その体験をより良くするために構築した教育システムである。実際の教育現場で運用しながら、講義の進行、学生の参加、理解度の確認、質問や議論のあり方を改善していく。開発者自身が長く使い続けられる実用性を持ちながら、他の教員もそれぞれの授業や発表に導入できる品質と汎用性を備えている。
すべてを貫く、COMPASSの思想
COMPASSシリーズは、「学びを、意思決定の力へ」という共通理念のもとに設計されている。COMPASS公式サイトや各紹介ページから、COMPASS InteractiveのStudent、Admin、Display、Archiveまで、その理念を一貫した世界観として展開。色彩やタイポグラフィだけでなく、情報の見せ方、言葉の選び方、操作のあり方まで統一し、どの接点からでもCOMPASSの思想と価値が伝わる体験を構築している。
DEVELOPER MESSAGE
ESSAY: AI時代に、専門性を「実装」するということ
02SYSTEM
TECHNICAL DEEP DIVE
体験を支える、技術と設計
ここからは、COMPASS Interactiveの技術構成、設計判断、実装、検証について詳しくご紹介します。ソフトウェア開発や情報工学に関する専門用語を含む、開発者・技術者向けのセクションです。
TECHNOLOGY STACK
教育体験を支える、統合技術基盤
ReactによるUIから、PostgreSQL、認証、リアルタイム通信、Private R2、AI、CI/E2Eまでを一つのアーキテクチャに統合。10万行を超える実装、テスト、設計資産を単一リポジトリで管理し、開発から検証、運用までを一貫して支えている。
Web・紹介サイト
Next.js / React / TypeScript
プロダクトUI
React 19 / TypeScript 6 / Vite 8 / React Router 7
データ・認証・アクセス制御
Supabase / PostgreSQL / Auth / RLS / RPC
サーバーレス・AI・リアルタイム
Edge Functions / OpenAI API / Realtime API
ホスティング・ストレージ・配信
Cloudflare Pages / Workers / Private R2
品質保証・CI/CD
GitHub Actions / Playwright / pgTAP / axe-core / SBOM
Supporting Stack
| Area | Technology / Method |
|---|---|
| Toolchain | Node.js / npm / Git / GitHub |
| AI Development Agents | OpenAI Codex / Claude Code |
| Change Management | Feature Flags / Expand-first Migration / Rollback Runbook |
| Load Control | Versioned Snapshot / Backoff / Visibility-aware Sync |
| Academic Sources | PubMed / Crossref / OpenAlex |
STACK OVERVIEW
UIから運用まで、一つのコードベースで貫く。
React UI、PostgreSQL、26のEdge Functions、Private R2、E2E、Runbook。COMPASS Interactiveは、状態、認可、費用、障害、運用までを引き受ける一つのシステムである。
440files
管理対象ファイル
112,703lines
管理対象行数
28
Database migration
26
Edge Functions
55groups
非Live回帰テスト
Directory Metrics
2026年7月24日時点。生成物、依存パッケージ、テスト結果、ローカル資格情報を除外。
| Directory | Files | Lines | Role |
|---|---|---|---|
| src/ | 117 | 28,448 | React UI、状態管理、Repository、PDF、字幕、要約 |
| supabase/ | 127 | 51,182 | Migration、RLS、RPC、Edge Functions、pgTAP |
| cloudflare/ | 8 | 9,508 | Private R2配信Workerとテスト |
| publisher/ | 15 | 2,389 | Local Publisherと復旧経路 |
| e2e/ | 14 | 3,147 | Playwright E2E |
| scripts/ | 77 | 9,124 | 回帰、負荷、セキュリティ、Gate |
| docs/ | 82 | 8,905 | 設計記録、Runbook、Rollback、運用資料 |
| 合計 | 440 | 112,703 | 実装・テスト・設計・運用資産 |
ARCHITECTURE OVERVIEW
教育体験を支える、五つの技術境界
COMPASS Interactiveは、画面、データ、サーバー処理、資料配信、検証環境を、それぞれ独立した責務として分離しています。教育現場での使いやすさを保ちながら、認可、負荷、費用、障害、運用上のリスクを一つの場所へ集中させない構成です。
Student / Admin / Display / Archive
学生、教員、教室表示、講義後閲覧を、それぞれの利用状況に適した画面として分離しています。同じ講義データを共有しながら、利用者ごとに必要な情報と操作だけを提示します。
PostgreSQL / RLS / RPC / Anonymous Auth
講義状態、所有権、認可、Lifecycle、監査情報をPostgreSQL側の正本として管理します。ブラウザ内の状態だけに依存せず、重要な操作はデータベース側で再検証します。
26 Edge Functions / AI Grants / Usage Ledger
秘密情報、有料処理、管理操作、外部API連携をブラウザから分離します。AIや外部サービスの利用条件、予算、実行履歴もサーバー側で管理します。
Local Publisher → Private R2 → Cloudflare Worker
PDF本文を講義状態とは別の経路で管理し、短寿命の認可付き経路から配信します。資料保護と軽量な講義同期を両立するための境界です。
GitHub Actions / Playwright / pgTAP / Runbook
コード、データベース、ブラウザ操作、統合動作、変更手順を同じリポジトリで検証します。本番環境から隔離された自動検証によって、変更による破壊を早期に検出します。
01Browser
公開情報の表示と、短寿命の操作権限
02PostgreSQL
講義状態、所有権、認可、監査の正本
03Edge Functions
Secret、有料API、管理操作、外部連携
04Cloudflare
Web配信、Private Asset、Range配信
05CI
本番環境から隔離された自動検証
この構成では、講義、コメント、Pollなどのデータ分類より先に、システム全体の責務境界を示します。個別機能ではなく、どこで状態を管理し、どこで認可し、どこで外部処理を行うのかを先に理解できる構成です。
ENGINEERING DESIGN
教育上の要件を、壊れにくい構造へ
匿名参加と、確かな所有権
MEANING
名前や学籍番号を入力せずに参加できる一方で、投稿や回答の所有者はシステム上で区別されます。参加の心理的障壁を下げながら、他者のデータを変更できない境界を保ちます。
DESIGN
ブラウザ内のparticipant IDだけを認可根拠にはしません。Supabase Anonymous Authのauth.uid()を参加者の所有権へ結びつけ、講義状態と所有権をPostgreSQL側で再検証します。
- Anonymous Auth
- auth.uid()
- Participant ownership
- RLS / RPC authorization
変わった部分だけを、5秒で届ける
MEANING
講義中に必要な更新を素早く届けながら、通信量とサーバー負荷を抑えます。画面全体を繰り返し取得せず、変化した情報だけを同期します。
DESIGN
講義状態をsection単位のversionで管理します。クライアントは既知のversionをsnapshot RPCへ送り、更新されたsectionだけを受け取ります。
- Foreground — 5 sec
- Failure — Exponential backoff
- Background — Limited synchronization
- Hidden tab — Reduced activity
- Comment history — On demand
講義の開始から終了までを、サーバーが管理する
MEANING
講義の終了忘れや状態の不整合を防ぎ、終了後の閲覧や保存期間まで一貫して管理します。
DESIGN
講義開始時に、サーバー時刻を基準として最大90分のhard_stop_atを確定します。手動終了、Cron、各RPCの期限判定は、同じ冪等な終了処理へ集約します。
- DRAFT
- OPEN
- CLOSED
- ARCHIVE
- EXPIRY
資料を守りながら、講義を軽く保つ
MEANING
配布資料を保護しながら、ページ同期や講義操作の負荷を抑えます。PDF本文と、講義中に変化する状態を別々の経路で扱います。
DESIGN
PDF本文はPrivate R2へ保存し、Supabaseには資料ID、version、現在ページ、R2参照のみを保持します。Cloudflare Workerが短寿命ticket、Origin、Range、retentionを検証して配信します。
- Local validation
- Pending upload
- Immutable object
- Commit / Activate
- Short-lived authorized delivery
この構成により、資料保護、途中失敗、再送、配信負荷を単一のupload処理へ集中させません。
AIの実行条件と責任を、先に設計する
MEANING
AI機能を安全かつ継続的に利用するために、費用、根拠、公開条件、教員確認を明確にします。
DESIGN
AI処理を字幕、資料解析、Poll提案、5分要約、学術回答へ分離します。実行前に、講義状態、feature flag、一回限りのgrant、予算、同時実行枠を検証します。provider callの前に利用量を予約し、成功、失敗、不明応答をusage ledgerへ記録します。出力はschema、根拠、重複、情報量を検査し、必要な機能では教員確認を公開条件とします。
- Grant
- Budget reservation
- Provider call
- Quality gate
- Human review
AIモデルそのものだけでなく、AIを安全かつ持続的に運用するための境界を設計しています。
03EVIDENCE / VALIDATION
QUALITY ASSURANCE
変更を、安心して積み重ねるために。
COMPASS Interactiveでは、コード、データベース、ブラウザ、外部連携を横断して自動検証を行っています。正常な操作だけでなく、認可エラー、競合、通信失敗、マイグレーション、画面崩れなど、実運用で問題になり得る条件も検証対象に含めています。
Code & Dependencies
型エラー、依存関係、秘密情報の混入、production buildへの影響を継続的に確認します。
- TypeScript
- Lint
- Production Build
- Secret Scan
- High-severity Audit
- SBOM
Database & Authorization
新規環境への導入に加え、既存データを保持した状態からの更新も検証します。所有権、RLS、同時実行、型の不整合までをデータベース側で確認します。
- Clean Migration
- Upgrade Migration
- pgTAP
- RLS Isolation
- Ownership
- Race Conditions
- DB Type Drift
Browser & Accessibility
Student、Admin、Displayの各画面を、複数のブラウザと画面サイズで検証します。操作性、アクセシビリティ、レイアウト崩れ、表示領域からのはみ出しも確認対象です。
- Chromium
- WebKit
- Desktop
- Mobile
- axe-core
- Visual Contract
- Overflow Detection
Integration & Failure Handling
単一の関数だけでなく、Edge Functions、データベース、ブラウザをまたぐ一連の操作を検証します。タイムアウト、再試行、同時リクエスト、途中失敗時の挙動も確認します。
- Edge → Database → Browser
- Timeout
- Retry
- Concurrent Requests
- Safe Failure
- Trace / Video / Logs
Validation Summary
55 NON-LIVE REGRESSION GROUPSCLEAN + UPGRADE MIGRATION TESTSDESKTOP + MOBILE E2ECHROMIUM + WEBKITOPERATIONAL VALIDATION
β版試験から、実際の講義運用まで。
COMPASS Interactiveは、協力者約20名が複数端末から参加するβ版E2E試験を通過しています。Student、Admin、Displayを同時に接続し、参加、5秒差分同期、字幕、クイズ、コメント、PDF表示、教員操作、講義終了までの一連のフローを確認しました。（2026年7月25日時点）
さらに、実際の講義でも主要機能を運用しています。開発者自身が約200名規模の講義やプレゼンテーションで継続的に使用することを前提に、画面共有、教員操作、リアルタイム同期、講義ライフサイクルまで含めて設計しています。
Validation Scope
- 20-person beta E2E
- Multiple devices
- Student / Admin / Display
- End-to-end lecture flow
- Classroom operation
- Designed for 200-person use
開発者・プロダクト設計者Yuto Matsui
生命科学・教育・AIを横断し、研究・教育現場で自ら見いだした課題を、実装可能なプロダクトへ変換する。
GitHub Portfolio↗得意領域
- 生命科学・分子生物学研究
- フルスタックWebアプリケーション開発
- 研究データ解析パイプラインの構築
- 独自バックエンド基盤による業務自動化・効率化
- AI統合型システムの設計・検証
Technical Expertise技術領域を表示
- 主要言語
- TypeScript / Python
- フロントエンド
- React / Next.js / Vite
- バックエンド・データ基盤
- FastAPI / Supabase / PostgreSQL
- 開発・運用基盤
- Git / Docker / Linux / Cloudflare
- AIエージェント
- OpenAI Codex / Claude Code