【実務編 第6回】カメラ・写真を使おう

社員ブログ

※Claude Codeを使用して記事を作成しています。

シリーズ：Claude Codeで実務Androidアプリ開発

  • 第1〜5回：ログイン・Firebase認証・Firestore・Push通知・地図
  • 第6回：カメラ・写真を使おう ← 今回

はじめに

今回はメモアプリに画像添付機能を追加します。
カメラで撮影した写真やギャラリーから選んだ画像をメモに添付して、テキストだけでは伝えにくいものを視覚的に記録できるようにします。

画像の保存先はFirebase Storageを使います。
Firestoreがテキストデータの保存場所なら、Firebase Storageは画像・動画などのファイルを保存する場所です。

今回実装する内容

機能内容
カメラ起動アプリ内からカメラを起動して撮影する
ギャラリー選択スマホの写真一覧から画像を選ぶ
画像アップロード選択した画像をFirebase Storageに保存する
画像の表示メモ詳細画面に添付画像を表示する
画像の削除不要な添付画像を削除する

事前準備：Firebase Storageを有効化する

  1. Firebaseコンソールの左メニューから 「Storage」 を選択
  2. 「始める」 をクリック
  3. 「テストモードで開始」 を選択
  4. リージョンは asia-northeast1（東京） を選択
  5. 「完了」 をクリック

Step 1：Firebase Storageをプロジェクトに追加する

✍️ Claude Codeへの指示例：

Firebase Storageライブラリをプロジェクトに追加してください。
libs.versions.tomlを使ったバージョン管理で追加してください。

Step 2：カメラ・ギャラリーの選択UIを作る

✍️ Claude Codeへの指示例：

メモの作成・編集画面に画像添付機能を追加してください。

・「画像を追加」ボタンを追加する
・ボタンを押すと「カメラで撮影」「ギャラリーから選ぶ」の2択が表示される
・どちらを選んでも、選択した画像がプレビューとして画面に表示される
・画像は1枚だけ添付できる（複数枚は今回は対応しない）

Step 3：画像をFirebase Storageにアップロードする

✍️ Claude Codeへの指示例：

「保存」ボタンを押したとき、添付画像があればFirebase Storageに
アップロードしてから、画像のURLをFirestoreのメモデータに保存してください。

・保存先のパスは「images/{ユーザーID}/{メモID}.jpg」にしてください
・アップロード中は「アップロード中...」と表示してボタンを押せなくする
・アップロード失敗時は「画像のアップロードに失敗しました。もう一度お試しください。」と表示する

Step 4：保存した画像をメモ一覧・詳細画面に表示する

✍️ Claude Codeへの指示例：

メモ一覧画面で、画像が添付されているメモにはサムネイル画像を小さく表示してください。

メモの編集画面では、保存済みの画像をフルサイズで表示してください。
画像の上に「✕」ボタンを表示して、タップすると画像を削除できるようにしてください。

Step 5：画像の削除処理を実装する

✍️ Claude Codeへの指示例：

添付画像を削除するとき、Firebase Storage上の画像ファイルも合わせて削除するようにしてください。

また、メモ自体を削除するときも、紐づいている画像ファイルをStorageから削除するようにしてください。

動作確認チェックリスト

  • [ ] 「画像を追加」ボタンが表示される
  • [ ] 「カメラで撮影」でカメラが起動して撮影できる
  • [ ] 「ギャラリーから選ぶ」でギャラリーが開いて画像を選べる
  • [ ] 選択した画像がプレビューに表示される
  • [ ] 保存後にFirebaseコンソールのStorageに画像ファイルが保存されている
  • [ ] 一覧画面でサムネイルが表示される
  • [ ] 編集画面で「✕」ボタンで画像を削除できる
  • [ ] メモを削除するとStorageの画像も消えている

まとめ

学んだことポイント
Firebase Storageの導入テキスト以外のファイルはStorageで管理する
カメラ・ギャラリーの起動「2択で選べるようにして」と指示するだけ
アップロードのUX中断できないよう処理中はボタンを無効化する
ファイルの削除メモ削除時にStorageのファイルも必ず削除する
タイトルとURLをコピーしました