【実務編 第5回】地図を表示しよう

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

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

第1〜4回：ログイン・Firebase認証・Firestore・Push通知

第5回：地図を表示しよう ← 今回

はじめに

今回はメモアプリに位置情報機能を追加します。
メモを作成した場所（または手動で設定した場所）を地図上に記録して、「あのメモはどこで作ったんだっけ？」が一目でわかるようにします。

今回実装する内容

機能	内容
位置情報の許可リクエスト	現在地を取得するためのユーザー許可
現在地の取得	GPS等を使って今いる場所を取得する
地図の表示	Google Mapsをアプリ内に表示する
ピンの表示	保存したメモの場所に地図上でピンを立てる
位置情報の保存	メモのデータに緯度・経度を追加してFirestoreに保存

事前準備：Google Maps APIキーを取得する

1. Google Cloud Consoleで設定

Google Cloud Console にアクセス
Firebaseのプロジェクトと同じGoogleアカウントでログイン
「APIとサービス」→「ライブラリ」 から 「Maps SDK for Android」 を有効化
「APIとサービス」→「認証情報」 から APIキーを作成
作成したAPIキーをメモしておく

💡 Firebaseプロジェクトと連携：FirebaseはGoogle Cloudと連携しているので、同じコンソールで管理できます。

Step 1：Google Mapsをプロジェクトに導入する

✍️ Claude Codeへの指示例：

Google Maps SDKをプロジェクトに導入してください。
APIキーは「ここに取得したAPIキーを貼り付け」です。

libs.versions.tomlを使ったバージョン管理で追加してください。
APIキーはAndroidManifest.xmlに設定する形でお願いします。

Step 2：位置情報の許可リクエストを実装する

✍️ Claude Codeへの指示例：

現在地を取得するための位置情報許可リクエストを実装してください。

・メモ作成画面に「現在地を記録する」ボタンを追加する
・ボタンを押したとき、位置情報の許可が得られていない場合は許可ダイアログを表示する
・許可を拒否された場合は「位置情報の許可が必要です。設定から許可してください。」とメッセージを表示する
・許可済みの場合はそのまま現在地を取得する

Step 3：現在地を取得してメモに保存する

✍️ Claude Codeへの指示例：

「現在地を記録する」ボタンを押したとき、
現在地の緯度・経度を取得してメモのデータに保存してください。

・取得中は「現在地を取得中...」と表示する
・取得成功時は「現在地を記録しました」と表示して、「地図で確認する」ボタンを表示する
・取得失敗時は「現在地を取得できませんでした」とメッセージを表示する
・緯度・経度はFirestoreのメモデータにも保存する

Step 4：地図画面を作る

✍️ Claude Codeへの指示例：

メモの位置情報を地図で表示する画面を作ってください。

・「地図で確認する」ボタンを押すとこの画面に遷移する
・そのメモに紐づいた場所にピンを立てる
・ピンをタップするとメモのタイトルが吹き出しで表示される
・地図は該当のピンの位置を中心に表示する

Step 5：全メモを地図上に表示する

✍️ Claude Codeへの指示例：

メニューに「地図で一覧」という項目を追加して、
タップすると位置情報が設定されているすべてのメモのピンを
1枚の地図上にまとめて表示する画面を追加してください。

各ピンをタップするとそのメモのタイトルが吹き出しで表示されて、
吹き出しをタップするとそのメモの編集画面に遷移するようにしてください。

動作確認チェックリスト

[ ] 「現在地を記録する」ボタンが表示される
[ ] 初回タップ時に位置情報許可ダイアログが表示される
[ ] 許可後に現在地が取得されてメモに保存される
[ ] 「地図で確認する」ボタンで地図画面に遷移できる
[ ] 地図上に正しい位置にピンが表示される
[ ] 「地図で一覧」に位置情報付きのメモのピンが全て表示される

まとめ

学んだこと	ポイント
Maps SDKの導入	APIキーの取得と設定がセット
位置情報の許可	通知と同様、拒否されても動作するよう設計する
現在地の取得	「取得中・成功・失敗」の3状態をそれぞれ指示する
地図上のピン	1件表示と全件一覧表示の2パターンを用意する