日誌担当：鈴木祥護

プロジェクト名：MiraBa

[本日の主要な目標]

アプリのUI骨格の完成、デザインの完成

[活動内容]　[担当者の作業]

UI骨格の作成と修正
レイアウトの見直し

[次回の作業]
切り替え画面の確定
画面ごとのレイアウト修正

日誌担当：鈴木祥護

プロジェクト名：MiraBa

[本日の主要な目標]

React開発環境の構築

[活動内容]　[担当者の作業]

Reactの環境構築完了。
VScodeでのリンクが不能。

[課題と解決の方向性]

ファイル感の見直し、パスの確認

[次回の作業]

Reactで画面表示する

日誌担当：鈴木祥護

プロジェクト名：MiraBa

本日の作業内容

1. React プロジェクト構成の整理

   • src フォルダ内の構成を見直し、Firebase 関連のファイルを src/firebase/ ディレクトリに移動。

   • 不要だった opp.jsx を削除し、プロジェクト全体の可読性を改善。

2. public フォルダの確認と整理

   • 初期状態で public フォルダが存在しない/消失した問題を確認。

   • 復元手順の説明（フォルダ作成、index.html 生成、構成の修復）。

3. index.html の正しい構成確認

   • Vite + React の標準形式に沿った index.html の構造を再提示。

4. 今後の作業に向けた準備

   • public フォルダ復元の確認を行いつつ、明日の作業にスムーズに入れるよう状況を整理。

明日の作業予定

1. 復元した public フォルダと src のリンク確認

2. App.jsx / main.jsx などの起動ポイントの整合性確認

3. 画面が “何も表示されない” 問題の本格的な原因調査

4. Firebase 読み込み・表示機能の再チェック

日誌担当：鈴木祥護
プロジェクト名：MiraBa

[本日の目標]

React を用いたアプリ構造への全面移行の準備として、既存コードの問題点の洗い出しと、
React 化に向けたフォルダ構成・コンポーネント化計画を明確化すること。

[活動内容]　[担当者の作業]

現行プロジェクト構造の調査と問題点の特定

• HTML / JS / CSS を直接読み込む旧構造と
  React コンポーネント構造が混在している点を確認。

• opp.js を React で呼び出せない問題や、静的 DOM と React DOM の衝突を整理。

• public フォルダ内のファイル構成（IMG, CSS, JS, JSX）が React 標準と異なっていたため、
  今後の移行に向けた再構成案を作成。

投稿フィード（Voices）処理の React 化準備

• 現行 opp.js の DOM 操作では React で動作しないため、
  投稿レンダリングを Voices.jsx に統合する方針を決定。

• 投稿画像 TK1〜4 の読み込みパス仕様を統一。

• public/IMG 内の画像が正常に認識されない問題を確認し、原因が “import 方式の不一致” であることを特定。

React プロジェクト（Vite）の構築計画策定

• React でアプリを安定稼働させるため、
  Vite を用いて新規プロジェクトを作成する。

• index.html から React を呼び出す方式（root 要素＋ index.jsx）で再構築する設計を作成。

• App.jsx 以下のコンポーネント分割案も作成し、ファイル配置の標準化方針を固めた。

[課題と解決の方向性]

1．静的 JS（opp.js）と React の競合

• 静的に DOM を生成する方式が React と衝突し表示されない。

• React 内部の state に投稿機能を完全移行することで解決予定。

2．画像パス・動画パスの認識不一致

• React 環境では IMG/xxxx の読み込み方法が通常の HTML と異なるため、
  public/IMG/... への統一と、Vite の参照ルールを採用することで解消する。

3．フォルダ階層の混在

• JSX と JS が同階層に混ざり、アプリの依存関係が複雑化していた。

• src / public に明確に分離し整理する工程を明日実行する。

[次回の作業]

1．Vite（React）環境の正式構築

• 新規 React プロジェクトを作成し、
  App.jsx / index.jsx / components フォルダを設置。

• 既存デザインを React へ移植する作業を開始。

2．投稿機能の React 完全移行

• Voices.jsx 内で map 処理を用いた投稿表示を実装。

• 写真付き投稿の画像パスを修正し、表示されない問題を解決する。

3．UI セクションの React 再構成

• HeroVideo（動画）

• CatchCopy（キャッチコピー1 & 2）

• Sidebar

• Header
  をコンポーネントとして再構築し、レイアウトの安定化を図る。

4．Firebase（Firestore）との接続準備

• 投稿データを Firestore に保存するため、
  fire.js の設定を React 構造へ移行する下準備を行う。

日誌担当：鈴木祥護

プロジェクト名：MiraBa

[本日の主要な目標]

本日は、以下の項目を実施し、サイトの基盤となる機能とデザインを実装しました。

[活動内容]　[担当者の作業]

• レイアウト修正:

  • 左サイドバーを固定し、右側のメインコンテンツのみスクロールする2分割レイアウトを確立しました。

  • ヘッダーのデザインを変更し、アイコンエリアとして再構築しました。

• デザイン調整:

  • 背景画像を設定し、サイト全体の雰囲気を統一しました。

  • キャッチコピー「ーMIRABAー みらいの私たちの場所を ありがとう と 笑顔をともに」の配置とデザインを改善しました。

  • 全体をモノクロトーンを基調としつつ、テーマカラー（#4bbac2）をアクセントに使用しました。

• 投稿機能（暫定版）の復旧と拡張:

  • js/app.js にて投稿データのレンダリングロジックを実装しました。

  • 「green bird」のボランティア活動を参考にした画像付き投稿を追加しました。

  • 投稿に対するコメント機能の表示を実装しました。

• コードの整理:

  • 単一ファイルだったコードを index.html, css/style.css, js/app.js, js/firebase.js に分割し、保守性を向上させました。

[課題と解決の方向性]

なし

[次回の作業]

• 投稿機能の本格実装:

  • 現在はJavaScript内の固定データを表示していますが、フォームから入力された内容を画面に反映させる処理を作成します。

  • （発展）Firebase Firestoreへのデータ保存処理の追加検討。

• 画像アップロード機能の検討:

  • ユーザーが自分のデバイスから画像を選択し、投稿に添付できる仕組みの調査と実装準備。

• 背景設計（動画対応）:

  • 静止画の背景だけでなく、動画を背景にするための技術検証と実装。

• 新画像投稿への対応:

  • 様々なアスペクト比の画像が投稿されてもレイアウトが崩れないよう、CSS（object-fit 等）の調整。

日誌担当：鈴木祥護

プロジェクト名：MiraBa

[本日の主要な目標]

アプリのUI骨格の完全な完成およびコードの整理・分割を行い、開発の基盤を固めること。

[活動内容]　[担当者の作業]

UI骨格の作成と修正

１・2分割レイアウト: 左サイドバー（固定）と右メインコンテンツ（スクロール）の確立。

２・デザイン調整: 背景画像の適用、ヘッダーアイコンの配置、キャッチフレーズのスタイル調整（枠削除など）。

３・コンテンツ配置: 全体貢献度ウィジェットを最下部に、キャッチフレーズを最上部に配置するレイアウト変更を実施。

４・JavaScriptを用いて、サンプル投稿および画像付き投稿（ボランティア活動の様子）を動的にレンダリングする機能を実装した。

５・単一のHTMLファイルから、css/style.css、js/app.js、js/firebase.js へコードを分離し、保守性を向上させた。

[課題と解決の方向性]

左サイドバーの固定と右コンテンツのスクロールが干渉し、表示が崩れる問題が発生。

投稿フィードに追加した画像が表示されず、コメントも反映されない状態だった。

[次回の作業]

１・画像リソースの配置：フォルダを作成し、背景画像やヒーロー画像をローカル環境に配置する。

２・認証機能の強化:ログイン状態に応じた投稿フォームの表示制御（現在は表示のみ）を実装する。

３・Firestore連携: 実際のデータベースへの書き込み・読み込み処理を js/app.js に実装し、リアルタイム更新を有効化する。

日誌担当：鈴木祥護

プロジェクト名：MiraBa

[本日の主要な目標]

作業量の削減とHTML/JS実装特化のため、Firebaseローカル開発環境の確立

[活動内容]　[担当者の作業]

Firebase CLI初期化、設定ファイル生成、Firestoreロケーション指定、Emulator Suite構成、エミュレータファイルDLを完了

[課題と解決の方向性]

サイトにおける画面設計の見直し

[次回の作業]

アプリのUI骨格作成に着手: 静的HTMLに基づき、認証機能以外の主要UI（フィード、ランキング、マップ）の構造を作成する。

前回作成したHTML/CSSをベースに、必要な画面要素（フィード一覧、投稿フォーム、ログインUIなど）をすべてコードに書き出し、デザインを整えます。

日誌担当者：鈴木　祥護

[活動内容]

・コンテンツ内容決め
・ターゲット層
・機能、用途
・背景（解決すべきことのためにできること）

[投稿担当者の作業内容]

上記の内容

[タスク]

・チーム名決定
・コンテンツデバイスの利用者、提供者の使用方法
・コンテンツ概要のまとめ
・機能の仕組みや使用
・デザインやネーム
・パワポ作成
・なんのアプリを用いて作成するか

[次回の作業内容]

・チーム名決め
・パワポ作成