日誌担当者: 鎌田あるん
チームの活動内容
- ランキング登録機能完成
- ゴースト機能作成
投稿担当者の作業内容
- ランキング登録機能完成
残タスク・次回の作業内容
- ゴースト機能を完成させる
25/12/17 CodeUnion 活動報告
日誌担当者：久保 拓也
【今日の活動内容】
・問題と用語の追加
・アニメーションの追加、修正
【投稿担当者の作業内容】
・アニメーションの追加、修正
【残タスク、次回の作業内容】
・問題と用語の追加
・アニメーションの追加、修正
HTMLチーム５
日誌担当：鈴木祥護
プロジェクト名：MiraBa
本日の作業内容
1. サイドバー機能実装・検証
-
サイドバーの 開閉アニメーション（CSS + JavaScript） を実装
-
トグルボタン操作による開閉動作を確認
-
レイアウト崩れの原因を特定し、構造を整理
-
サイドバーが表示されない問題を解消
2. HTML / CSS 構造整理
-
public配下の構成を整理 -
HTML・CSS・JS の役割分離を明確化
-
桜（sakura.js / WebGL）は後付け前提として一旦切り離し
3. レイアウト調整
-
ヘッダー（MIRABAロゴ）の固定表示確認
-
メインコンテンツとサイドバーの余白・重なりを調整
-
カレンダー・各セクションの表示確認
4. 動作確認
-
見た目は整っている状態まで到達
-
機能面の課題（サイドバー常時クローズ状態など）を明確化
今後の予定（次回作業）
-
サイドバーを常時クローズ状態から開始する設定
- 検索機能の追加
- loading表記の見直し
- ログイン前とログイン後の表示変更の設定
業務日報 CodeUnion 2025/12/16
報告者：G3A113佐藤桃香
活動内容：デバッグ
報告者の活動内容：デバッグ
次回の活動内容：デバッグ
HTMLチーム５
日誌担当：鈴木 祥護
プロジェクト名：MiraBa（MIRABA）
【本日の主要な目標】
TOP画面の完成度向上を目的とし、
UIの操作性・視認性・デザイン統一感を高めるための改修を行う。
【活動内容】（担当者の作業）
-
レイアウトおよび構造整理
-
public 配下に CSS・JavaScript・HTML を整理し、実行環境で正しく動作する構成に修正。
-
桜アニメーション（WebGL / shader）を維持したまま、UIレイヤーのみを安全に調整。
-
-
TOP画面UIの調整
-
画面上部に固定ヘッダーとして「MIRABA」タイトルを配置。
-
筆記体フォントを採用し、M・Rを強調することでブランド性を向上。
-
ヘッダーはスクロールしても常時表示される仕様とした。
-
-
サイドバー設計の改善
-
左サイドバーを固定配置とし、画面全体との干渉を防止。
-
サイドバー背景を白色（不透明）に変更し、視認性を向上。
-
-
ダミーコンテンツの再設計
-
「活動の様子」「イベントカレンダー」「活動紹介」各セクションを整理。
-
各セクションのタイトルを中央配置し、タイトル部分のみに枠組みを適用。
-
活動の様子にはダミー画像を複数配置し、2列レイアウトで視覚的に分かりやすくした。
-
イベントカレンダーは月単位（2025年12月想定）の表記に変更し、大きめの表示で作成。
-
-
表示崩れ・不具合の修正
-
ローカルサーバー起動時に発生していたレイアウト崩れを修正。
-
桜背景が表示されない問題を切り分け、UI側の修正のみで安定表示を実現。
-
【次回の作業予定】
-
サイドバーの開閉アニメーションの実装と操作性向上
-
イベントカレンダーのデータ連携（Firestore化）
-
投稿・いいね・コメント機能のUI統合と動作確認
-
画面遷移時のアニメーション演出の追加
25/12/16 めがね2/3 活動報告
日誌担当者: 藤原創太
チームの活動内容
- ランキング登録APIを修正
- ランキング画面でランキングを取得して表示する
- 効果音を増やした
- フォントを適用した
- ランキング登録画面を作った
投稿担当者の作業内容
- ランキング登録APIを修正
- ランキング画面でランキングを取得して表示する
残タスク・次回の作業内容
- タイピング終わった後にランキングの登録したい
- （ゴースト→）ランカー対戦を作りたい
25/12/15 CodeUnion活動報告
【今日の活動内容】
解答後の結果画面の修正
問題と用語の追加
【投稿担当者の作業内容】
問題の追加
【残タスク、次回の作業内容】
問題と用語の追加
HTMLチーム５
日誌担当：鈴木祥護
プロジェクト名：MiraBa
[本日の主要な目標]
TOP画面を中心に、UI表現の強化（アニメーション背景・レイアウト改善）を行い、
各画面（TOP／メイン／投稿／マイページ）の役割を明確化する。
【活動内容】 【担当者の作業】
UI・画面構成の拡張および演出強化
１・TOP画面の再設計
・筆記体フォントを用いた「MIRABA」ロゴを画面最上部に配置。
・ロゴにアニメーション（浮遊表現）を加え、印象的なファーストビューを作成した。
・TOP画面を縦スクロール可能な構成とし、今後のコンテンツ追加に対応できる基盤を整備した。
２・背景表現の整理
・TOP画面には桜エフェクト（WebGL / shader）を使用した背景を適用。
・メイン画面／投稿画面／マイページ画面は VANTA.js を用いたアニメーション背景を採用し、画面ごとに演出を分離した。
３・画面間レイアウトの調整
・各エリア間の余白を広げ、PC表示を前提とした視認性の高いレイアウトに調整した。
・不要な中央オブジェクト（400×240の描画領域）を除去し、UI表示の妨げを解消した。
４・サイドバーの改善
・サイドバーの背景色を白に変更し、透明表現を廃止。
・TOP／メイン／投稿／マイページへの導線（ボタン）を復活・整理した。
５・ダミーコンテンツの配置
・TOP画面下部に、今後実装予定の
「画像エリア」「イベント用カレンダー」「活動紹介エリア」
を想定したダミーUIを配置した。
【次回の作業】
１・TOP画面下部コンテンツの具体化
・イベントカレンダーのデザイン確定
・活動紹介エリアをカード形式で整理する。
２・画面遷移の演出追加
・TOP → メイン等の画面切り替えにフェード・アニメーションを追加する。
３・コード整理
・各画面（TOP／メイン／投稿／マイページ）をHTML単位で分割し、
共通CSS・共通JSとして再整理する。
25/12/15 めがね2/3 活動報告
日誌担当者: 藤原創太
チームの活動内容
- ランキング登録APIを途中まで
- 音楽・効果音がなるようになった
- タイピング画面からリザルト画面に行く
投稿担当者の作業内容
- ランキング登録APIを途中まで
残タスク・次回の作業内容
- タイピング終わった後にランキングの登録したい
HTMLチーム５
日誌担当：鈴木祥護
プロジェクト名：MiraBa
[本日の主要な目標]
アプリのUI骨格の完成、デザインの完成
[活動内容] [担当者の作業]
UI骨格の作成と修正
レイアウトの見直し
[次回の作業]
切り替え画面の確定
画面ごとのレイアウト修正