SOTOTUNA
龍谷大学政策学部の現役生・卒業生・教職員をつなぐ、モバイル向けWebアプリのフロントエンドです。
開発
npm install
npm run dev
ブラウザで http://localhost:5173 を開きます。
ビルド
npm run build
npm run preview
公開対象は index.html と public/assets/ です。Vercelでは次の設定を使用します。
- Framework Preset: Vite
- Build Command:
npm run build
- Output Directory:
dist
- Production Branch:
main
GitHubの main へpushすると、Git連携済みのVercelプロジェクトが自動で本番ビルドします。
現在のモック仕様
- 初回は「ログイン／会員登録」の入口画面から開始します。
- 会員登録はメールアドレスのみを使い、電話番号は収集しません。
- メール確認コード送信と実際の会員認証は未実装です。
- 投稿・プロフィール・リアクションはブラウザのローカルストレージに保存します。
- プロフィール詳細は初期登録では求めず、マイページから任意に編集できます。
卒業期の対応
画面では ○期生（20XX年卒） の形式で表示します。
2026-09-07 意見収集シートへの対応
実際の公開画面は index.html です。src/App.jsx は現在の入口から読み込まれない旧実装です。
既存の緑・クリーム・Zen Maru Gothic・イラスト素材を保ち、補足文字のコントラスト、モバイル幅、フォーカス、モーション抑制を調整しました。
- 質問の編集、解決済み／未解決の切替、画像添付（JPEG/PNG/WebP・5MB以下、長辺1200pxへ縮小）
- 「気になる」「ありがとう」が分かる並び順と件数ラベル
- 回答フォームの下に同カテゴリの関連質問
- 本紹介ウィークで本を登録、分野で絞り込み
- 年間スケジュールからイベント詳細へ遷移、指定のイベントリクエストフォームへ接続
- アプリの目的を説明する初回ガイド、マイページ内に利用ルール
- 使い方からiPhone/Androidを選ぶホーム画面追加案内
- 「匿名の後輩」を「匿名のメンバー」へ変更し、初参加者を歓迎する案内
- 協力ボタンから募集詳細のやりとり欄へ誘導
- 討論会のゼミ切替・属性プレビューを除去し、登録ゼミに応じて表示
- ありがとうの木の成長段階と次段階までの数を表示
投稿・添付・本の登録は既存のモック仕様と同じく、このブラウザのローカル保存です。会員間の共有はまだありません。
画像添付・本登録の保存失敗時はフォームを維持し、完了表示しません。既存データのキーと形式は維持します。
未完了（接続・情報が必要）
意見シートの行番号を記載しています。
- 2: ログインボーナスの種類・獲得条件・運用方針が未決。
- 3: 画像添付UIとローカル保存は実装。サーバーへのアップロードと会員間共有は未接続。
- 4: やりとり欄への導線は改善。協力者の会員ID管理・相手への送信は共有バックエンドが必要。
- 7: ゼミ選考の正式日程・募集要項・公開元が必要。未確認情報は追加しない。
- 8: 登録ゼミによる表示に修正済み。レジュメの保管とサーバー側の閲覧権限は未実装。静的データの表示切替はアクセス制御ではない。
- 10: メール通知は送信基盤・本人認証・配信設定APIが必要。
- 13: ありがとう・メンション・返信の受信通知は会員間共有と受信イベントが必要。
- 18: 成長表示は実装済み。実際の他会員からのありがとう集計は未接続。自己リアクションで受信数を増やさない。
- 21: 通報の送信先・管理画面・共有APIが必要。運営へ送っていない状態を送信済みと表示しない。
検証
Chromeで画像付き質問の投稿、編集、解決済み、再読込後の保持、本の登録と再読込、年間イベント遷移、利用ルール、ホーム追加案内を検証。
ローカルMacのOS制限でビルドツールのネイティブバイナリを実行できなかったため、ローカルの node_modules のみ公式Rollup/esbuild WebAssembly版へ置き換えて npm run build を検証。Git管理対象の依存定義・ロックファイル・Vercelビルド設定は変更していません。
追加調整（2026-09-07）
- 右上の利用ルールを取り除き、マイページ内の案内を維持。
- 使い方内の「ホーム画面に追加する」から端末を選ぶ導線に変更。ガイド最終ページからも同じ案内へ進む。
- オリジナルのありがとう（ハートと葉）・気になる（芽と虫眼鏡）をPNG化し、一覧と詳細へ配置。
- 既存のSマークを参照したホーム画面アイコン、apple-touch-icon、Web App Manifestを追加。インストール自体は利用者がブラウザの操作で行う。
- 生成素材の原画を基に、透過検証・余白統一・縮小を行った。アプリ用PNGは不透明背景。
追加調整の検証: Chromeの360px幅で、ガイド直後／最終ページからの端末選択、iPhoneとAndroidの手順、選び直し、スキップ、マイページのルール、反応数更新と画像読込を確認。実機ホーム画面へのインストールは未検証。
手順の参照: Apple公式、Chrome公式。
プロフィールアイコン（2026-09-07）
プロフィールで選べる10種類をオリジナルPNGへ変更し、投稿・回答・募集のやりとり・イベント・マイページで共通表示。既存会員のカメも同じシリーズの素材を追加。保存値は従来のまま保ち、既存のアイコン選択を引き継ぐ。192px画像を30〜56pxで表示する。
Chromeで全10素材の読込、クマの選択・保存・再読込後の保持、360px幅での表示を確認。
操作アイコンの統一とサイズ調整（2026-09-07）
解決済み・参加予定のチェック絵文字を削除。検索・協力・イベント参加／人数はオリジナルPNG、募集タイプは既存のイラストPNGへ変更。プロフィール選択、反応、ナビ、イベント、先生のアイコンを縮小し、操作ボタンは44px以上を維持。協力行は狭い画面で折り返し、ボタン内の文字は折り返さない。
Chrome 360px幅で検索結果、募集タイプ表示、協力時の人数増加と詳細への遷移、参加前後の人数とボタン表示を確認。ビルド合格。
文字密度の調整（2026-09-07）
Zen Maru Gothicと既存配色を維持し、質問カードの余白を18〜20px、本文行間を1.8、ヘッダー・件数との間隔を14pxへ調整。名前・補助ラベルのウェイトを500にし、現役生バッジは既存の淡緑へ変更。質問一覧の本文を最大3行へ拡張。回答・募集・やりとりにも本文行間を適用。
利用ルールは内容を維持して5つの「短い見出し＋説明」へ整理し、項目間を24pxに。Chrome 390px／360pxでカード・ルールの表示と横はみ出しがないことを確認。
協力とメール連絡（お試し版）
「協力する」から連絡用メールアドレスと募集者への共有同意を入力します。協力後は内容の変更・取消ができます。自分の募集は「マイ → 募集」から開き、「協力者・連絡先を見る」で一覧の表示を確認できます。
現在は端末内保存のみで、実際のメール共有・協力者同期は未実装です。一覧のサンプルは架空の宛先です。
バックエンド構築
Cloudflare + Supabaseの設定・DB権限・接続確認画面については 構築状況 を参照してください。現行の5タブ画面の接続は次段階です。
