ChatGPTを使用したアプリ開発記【動画投稿機能の実装】

🔧 ① 動画用のステートを追加

App.js

const [video, setVideo] = useState(null);

📝 ② フォームに動画アップロード欄を追加

App.js

<input type="file" accept="video/*" onChange={(e) => setVideo(e.target.files[0])} />

部分	解説
type="file"	ファイル選択用の入力フォーム（画像・動画など）を表示します。
accept="video/*"	ユーザーが選べるファイルの種類を動画ファイル（例: mp4, webm, mov）に制限します。* はすべての動画形式を許可するワイルドカードです。
onChange={(e) => setVideo(e.target.files[0])}	ファイルが選択されたときに呼び出されるイベントハンドラです。 e.target.files は選ばれたファイルのリストで、.files[0] はその中の最初の1つ（1ファイル目）を取得します。それを setVideo() に渡して、React の video 状態に保存します。

🚀 ③ handleSubmit 関数を修正

App.js

 let videoUrl = null;
  if (video) {
    const videoRef = ref(storage, `videos/${video.name}_${Date.now()}`);
    const snapshot = await uploadBytes(videoRef, video);
    videoUrl = await getDownloadURL(snapshot.ref);
  }
    const newPost = {
    text,
    time: formattedTime,
    likes: 0,
    user: user?.email,
    imageUrl,
    videoUrl,
  };

  setPosts([newPost, ...posts]);
  setText('');
  setImage(null);
  setVideo(null);
  };

🖼️ ④ 投稿一覧で動画を表示する

App.js

{post.videoUrl && (
  <video controls style={{ maxWidth: '100%' }}>
    <source src={post.videoUrl} type="video/mp4" />
    お使いのブラウザは video タグをサポートしていません。
  </video>
)}