From b75c072573b0a31e54c104b591926d99bd699c5e Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Thu, 16 Apr 2026 09:36:30 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[add]=20README=E3=81=AB=E5=88=B6=E4=BD=9C?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E3=83=BB=E6=8A=80=E8=A1=93=E9=81=B8=E5=AE=9A?= =?UTF-8?q?=E3=82=BB=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- README.md | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) mode change 100755 => 100644 README.md diff --git a/README.md b/README.md old mode 100755 new mode 100644 index fc256b12..d19b7720 --- a/README.md +++ b/README.md @@ -2,6 +2,67 @@ 技大祭当日に使うビンゴアプリです。 +## 制作背景 + +### 課題 + +従来の学園祭ビンゴ大会では、抽選機で排出された番号をホワイトボードに手書きで掲示していました。この運用には以下の課題がありました。 + +- **視認性の問題**：後方の参加者には文字が見えづらい +- **人員コスト**：板書担当として人員を別途確保する必要がある + +### 目的 + +抽選番号や景品の当選状況を Web 上でリアルタイムに確認できるアプリを作成し、参加者体験の向上と運営の効率化を両立させることを目的としました。 + +参加者（600〜1000人規模）が自身のスマートフォンから番号を確認できるようにするとともに、会場の大型ディスプレイへの表示、管理者向けの運営機能も提供しています。 + +--- + +## 技術選定 + +### 技術スタック + +| レイヤー | 技術 | +|------|------| +| フロントエンド | Next.js / TypeScript | +| バックエンド | Hasura Engine (GraphQL) | +| データベース | PostgreSQL | +| ストレージ | MinIO | +| インフラ | オンプレサーバ（Proxmox VM） + Cloudflare Tunnel | +| 開発環境 | Docker / Docker Compose | + +### 選定理由 + +**Hasura (GraphQL)** + +このアプリの主要要件は「複数ユーザーへのリアルタイム配信」でした。Hasura の GraphQL Subscription を使うことで WebSocket 通信を容易に実装できること、また GUI 上でスキーマ作成からCRUD API・Subscription クエリの生成まで行えるため、バックエンドの実装コストを大幅に削減できると判断し採用しました。 + +開発期間が3か月、チームのほとんどが Web 開発未経験という状況で、当日リリースを最優先にするためバックエンドに時間を割かずフロントの UI に注力できる構成を選びました。 + +**検討・不採用の選択肢** + +- **Go 言語**：アーキテクチャ設計・REST API・WebSocket 実装を短期間で揃えるには難易度が高いと判断し見送り +- **Socket.io**：バックエンドを別途実装する必要があること、600〜1000人規模の同時接続では負荷が懸念されたため不採用 + +**Next.js / TypeScript** + +nutmeg（所属サークル）内の複数プロジェクトで採用されており、技術的な質問・知見の共有がしやすい環境にあったため採用しました。 + +**インフラ（オンプレ + Cloudflare Tunnel）** + +Proxmox 上の VM にサービスを構築し、Cloudflare Tunnel 経由で外部公開しています。PostgreSQL のデータは VM ディスクに bind mount することで、コンテナ再起動後もデータを永続化しています。 + +### 今後の技術的な課題と展望 + +現在の構成には以下の課題があります。 + +- **Hasura v3 への移行困難**：v3 では Subscription が非対応のため移行できず、最新のドキュメントや機能拡張の恩恵を受けられない状態 +- **OSS 依存リスク**：MinIO が無料利用の機能を制限する方針変更を実施するなど、OSS の仕様変更への対応コストが発生 +- **Subscription の内部構造の不透明さ**：負荷時にどこをチューニングすべきかが判断しづらい + +これらを踏まえ、ユーザー画面はサーバーからの一方向配信で十分であることから、**Go 言語 + SSE (Server-Sent Events)** への移行を検討しています。Go のゴルーチンによる並列処理は今回の規模感（同時接続数百人〜千人）でも本領を発揮できると考えており、サークル内での技術統一にも貢献できると考えています。 + ## Branch 命名規則 新機能の Branch 名：feature/issue○○/title[isuue の簡単な説明] From 87896a4ede153f9724abf4a1f180e1c4c8f78c01 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Thu, 16 Apr 2026 11:29:13 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[fix]=20README=E3=81=8B=E3=82=89=E6=8A=80?= =?UTF-8?q?=E8=A1=93=E9=81=B8=E5=AE=9A=E3=81=AE=E6=A4=9C=E8=A8=8E=E3=83=BB?= =?UTF-8?q?=E4=B8=8D=E6=8E=A1=E7=94=A8=E3=81=AE=E9=81=B8=E6=8A=9E=E8=82=A2?= =?UTF-8?q?=E3=81=A8=E4=BB=8A=E5=BE=8C=E3=81=AE=E6=8A=80=E8=A1=93=E7=9A=84?= =?UTF-8?q?=E3=81=AA=E8=AA=B2=E9=A1=8C=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/README.md b/README.md index d19b7720..659e1f7e 100644 --- a/README.md +++ b/README.md @@ -40,28 +40,13 @@ 開発期間が3か月、チームのほとんどが Web 開発未経験という状況で、当日リリースを最優先にするためバックエンドに時間を割かずフロントの UI に注力できる構成を選びました。 -**検討・不採用の選択肢** - -- **Go 言語**：アーキテクチャ設計・REST API・WebSocket 実装を短期間で揃えるには難易度が高いと判断し見送り -- **Socket.io**：バックエンドを別途実装する必要があること、600〜1000人規模の同時接続では負荷が懸念されたため不採用 - **Next.js / TypeScript** nutmeg（所属サークル）内の複数プロジェクトで採用されており、技術的な質問・知見の共有がしやすい環境にあったため採用しました。 **インフラ（オンプレ + Cloudflare Tunnel）** -Proxmox 上の VM にサービスを構築し、Cloudflare Tunnel 経由で外部公開しています。PostgreSQL のデータは VM ディスクに bind mount することで、コンテナ再起動後もデータを永続化しています。 - -### 今後の技術的な課題と展望 - -現在の構成には以下の課題があります。 - -- **Hasura v3 への移行困難**：v3 では Subscription が非対応のため移行できず、最新のドキュメントや機能拡張の恩恵を受けられない状態 -- **OSS 依存リスク**：MinIO が無料利用の機能を制限する方針変更を実施するなど、OSS の仕様変更への対応コストが発生 -- **Subscription の内部構造の不透明さ**：負荷時にどこをチューニングすべきかが判断しづらい - -これらを踏まえ、ユーザー画面はサーバーからの一方向配信で十分であることから、**Go 言語 + SSE (Server-Sent Events)** への移行を検討しています。Go のゴルーチンによる並列処理は今回の規模感（同時接続数百人〜千人）でも本領を発揮できると考えており、サークル内での技術統一にも貢献できると考えています。 +Proxmox 上の VM にサービスを構築し、Cloudflare Tunnel 経由で外部公開しています。 ## Branch 命名規則