発想

メンバーの一人が最近音楽を始めたとのことで、音楽に紐づけてアイディアを出すことに決めた。 最近はberealというアプリが流行っているとのことで、そこからもアイディアを受けた。 通知が来たら、準にmp3をアップロードして完成させる、リレー小説ならぬリレー作曲をすることに決めました！

それぞれの技術要素についてのハイライト

---

設計段階

figmaを利用してデザインを作成しました。デザインを作成しながら、画面遷移やユーザビリティ、設計も同時進行で考えました。少ない時間の割には凝ったデザインになったと思います。 また、実際にリリースすることを考えて、アップロードされるアイコンやヘッダーを切り抜く処理などデモではわからない点にも多くこだわりました。

1. HTMLとCSS

HTMLファイルではセマンティックな構造を保持しつつ、モダンなUIデザインを採用しています。例えば、index.htmlファイルではheader、footer、divタグを使用してナビゲーションとコンテンツエリアを明確に分けています。 CSSスタイルは外部リンクで提供されるfont-awesomeとress（CSSリセットライブラリ）を使用して、ブラウザ間の一貫性を確保し、アイコンフォントを活用しています。

2. JavaScriptとFirebase

JavaScriptファイルではFirebaseとの統合を重点的に行っており、ユーザー認証、データの格納と取得、ファイルのアップロードとダウンロードを管理しています。ECMAScript Modules形式（.mjsファイル）を利用して、モジュール間の依存関係を明確にし、再利用性とメンテナンスのしやすさを向上しています

認証機能の実装

auth.mjsファイルでは、Firebase AuthのonAuthStateChangedを利用してユーザーのログイン状態を監視し、未認証の場合はログインページにリダイレクトする処理を実装しています。

// ログイン状態が変化した際のハンドラ
onAuthStateChanged((user) => {
  if (!user) {
    redirectToLoginPage(); // ログインしていなければログインページへ
  } else {
    setup(); // ログインしていればアプリのセットアップを行う
  }
});

データベース操作

music.mjsファイルでは、Firebase Firestoreを使ったデータの読み書きが実装されています。特に、音楽ファイルやサムネイルのアップロード、楽曲情報の取得を行っています。

// 楽曲データをFirestoreに保存する
setDoc(doc(db, "music", "someMusicId"), {
  name: "曲名",
  artist: "アーティスト名",
  date: new Date()
});

3. Firebase Storageの利用

アプリケーションではFirebase Storageを活用して、ユーザーがアップロードする音楽ファイルやプロフィール画像を安全に保存しています。profile.mjsではプロフィール画像のアップロードと取得の処理があります。

ファイルアップロード

// プロファイル画像をFirebase Storageにアップロードする
uploadBytes(getProfileImageRef(), imageFile).then((snapshot) => {
  console.log("Image uploaded successfully!");
});