25/12/19 めがね2/3 活動報告

日誌担当者: 松村知生


チームの活動内容
ゴースト機能の作成

投稿担当者の作業内容
ランキング登録のバグ修正
リザルト画面の作成
pressanykeyにした。
画面遷移修正
ランキング画面のモードセレクト修正

残タスク、次回の作業内容
ゴースト機能のバグの修正、作成
細かいバグの修正
見た目の調整
明るさの調整
バックエンドの調整

ゴースト機能の作成と細かな修正をしました。
鎌田君がタイピング機能を作っていて大変そうなので応援します。

メガネが一人休んでしまっているので今週はメガネ1/2でしたね。らん丸1/2のパクリって言われてしまう…(-_-;)
鎌田君がバグ処理で忙しそうだったので善意でやりました。徳を積んだので次のじゃんけんも負けないでしょう。お天道様は見てるはず。

html5

日誌担当:鈴木 祥護
プロジェクト名:MIRABA

 

【本日の主要な目標】

TOP画面の完成度向上を目的として、
ヘッダー・サイドバー・配色・画面構成の調整および
サイドバー開閉機能の安定実装を行う。

【活動内容】(作業内容まとめ)

1. サイドバー開閉機能の実装・修正

  • JavaScript(sidebar.js)を用いて、MENUボタンによるサイドバーの開閉処理を実装。

  • closed / not(.closed) の複雑な状態管理を廃止し、
    open クラス単一管理方式へ設計変更。

  • 初期状態でサイドバーが表示されてしまう問題や、
    読み込み後に一瞬表示される不具合を解消。

  • メインコンテンツとの連動(押し出しアニメーション)を調整。

2. ヘッダー構成の整理とデザイン調整

  • ヘッダーを固定表示にし、スクロール時も常時表示される構成を確立。

  • タイトル「MIRABA」を中央配置に戻し、筆記体フォントを適用。

  • 「M」「R」を強調表示し、ブランド性を高めた。

  • サブタイトル SUZUKINOMIRABA を追加し、
    表示位置を再検討・修正。

  • ヘッダー下部に二重アンダーラインを追加し、デザイン性を向上。

  • 右上に「MIRABAについて」リンクを設置。

3. サイドバーUIの高級感演出

  • サイドバーをガラス風・ダークトーンで再設計。

  • backdrop-filter: blur() を用いた半透明表現を採用。

  • メニュー項目にホバー・クリック時のアニメーションを追加し、操作性を向上。

4. TOP画面レイアウトの整理

  • TOPページを縦スクロール構成に変更。

  • 仮背景として、以下のセクション構成を実装:

    • 黒背景(MIRABA表記・説明・活動・カレンダー)

    • 白背景(イベント・活動紹介・FAQ・別ビジョン・SNS)

  • 各セクションを「1画面1コンテンツ」として整理。

  • イベントカレンダー(2025年12月)をダミー表示。

5. 配色・トーン調整

  • 黒系カラーを明るめに調整し、可読性を向上。

  • 白系カラーを温かみのあるトーンに変更。

  • 全体として「落ち着き・上品さ・未来感」を意識した配色へ統一。

【次回の作業予定】

  1. TOP背景(黒1〜黒5、白1〜白5)の本実装とグラデーション調整。

  2. 各セクションへの演出(フェードイン・スクロール連動)。

  3. サイドバー項目クリック時のページ内遷移実装。

25/12/17 CodeUnion 活動報告

日誌担当者:久保 拓也
【今日の活動内容】

・問題と用語の追加

・アニメーションの追加、修正

【投稿担当者の作業内容】

・アニメーションの追加、修正

【残タスク、次回の作業内容】

・問題と用語の追加

・アニメーションの追加、修正

HTMLチーム5

日誌担当:鈴木祥護

プロジェクト名:MiraBa

本日の作業内容

1. サイドバー機能実装・検証

  • サイドバーの 開閉アニメーション(CSS + JavaScript) を実装

  • トグルボタン操作による開閉動作を確認

  • レイアウト崩れの原因を特定し、構造を整理

  • サイドバーが表示されない問題を解消

2. HTML / CSS 構造整理

  • public 配下の構成を整理

  • HTML・CSS・JS の役割分離を明確化

  • 桜(sakura.js / WebGL)は後付け前提として一旦切り離し

3. レイアウト調整

  • ヘッダー(MIRABAロゴ)の固定表示確認

  • メインコンテンツとサイドバーの余白・重なりを調整

  • カレンダー・各セクションの表示確認

4. 動作確認

 

今後の予定(次回作業)

  • サイドバーを常時クローズ状態から開始する設定

  • 検索機能の追加
  • loading表記の見直し
  • ログイン前とログイン後の表示変更の設定

HTMLチーム5

日誌担当:鈴木 祥護

プロジェクト名:MiraBa(MIRABA)

【本日の主要な目標】

TOP画面の完成度向上を目的とし、
UIの操作性・視認性・デザイン統一感を高めるための改修を行う。

【活動内容】(担当者の作業)

  1. レイアウトおよび構造整理

    • public 配下に CSS・JavaScript・HTML を整理し、実行環境で正しく動作する構成に修正。

    • 桜アニメーション(WebGL / shader)を維持したまま、UIレイヤーのみを安全に調整。

  2. TOP画面UIの調整

    • 画面上部に固定ヘッダーとして「MIRABA」タイトルを配置。

    • 筆記体フォントを採用し、M・Rを強調することでブランド性を向上。

    • ヘッダーはスクロールしても常時表示される仕様とした。

  3. サイドバー設計の改善

    • 左サイドバーを固定配置とし、画面全体との干渉を防止。

    • サイドバー背景を白色(不透明)に変更し、視認性を向上。

  4. ダミーコンテンツの再設計

    • 「活動の様子」「イベントカレンダー」「活動紹介」各セクションを整理。

    • 各セクションのタイトルを中央配置し、タイトル部分のみに枠組みを適用。

    • 活動の様子にはダミー画像を複数配置し、2列レイアウトで視覚的に分かりやすくした。

    • イベントカレンダーは月単位(2025年12月想定)の表記に変更し、大きめの表示で作成。

  5. 表示崩れ・不具合の修正

    • ローカルサーバー起動時に発生していたレイアウト崩れを修正。

    • 桜背景が表示されない問題を切り分け、UI側の修正のみで安定表示を実現。

【次回の作業予定】

  1. サイドバーの開閉アニメーションの実装と操作性向上

  2. イベントカレンダーのデータ連携(Firestore化)

  3. 投稿・いいね・コメント機能のUI統合と動作確認

  4. 画面遷移時のアニメーション演出の追加

25/12/16 めがね2/3 活動報告

日誌担当者: 藤原創太


チームの活動内容

  • ランキング登録APIを修正
  • ランキング画面でランキングを取得して表示する
  • 効果音を増やした
  • フォントを適用した
  • ランキング登録画面を作った

投稿担当者の作業内容

  • ランキング登録APIを修正
  • ランキング画面でランキングを取得して表示する

残タスク・次回の作業内容

  • タイピング終わった後にランキングの登録したい
  • (ゴースト→)ランカー対戦を作りたい