第8回：インターネットからデータを取ってこよう！天気アプリを作る

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

はじめに

これまで作ってきたアプリは、スマホの中だけで完結するものでした。
カウンターも、水分補給記録も、インターネットには接続していません。

でも実際のアプリは、インターネットから情報を取ってくるものがたくさんありますよね。

天気アプリ → 今日の天気をネットから取得
ニュースアプリ → 最新ニュースをネットから取得
地図アプリ → 地図データをネットから取得

今回は天気アプリを題材に、インターネットからリアルタイムのデータを取ってきて表示する仕組みをClaude Codeと一緒に作ります！

今回作るアプリ

機能	内容
🌤️ 現在の天気を表示	気温・天気の状態（晴れ・曇り・雨など）を表示
📍 都市名で検索	検索欄に都市名を入力して天気を調べる
🔄 更新ボタン	最新の天気情報を取得し直す

事前準備：無料の天気APIを取得する

インターネットから天気データを取得するには、天気情報を提供しているサービス（API） を利用します。今回は無料で使える「OpenWeatherMap」を使います。

APIキーを取得する手順

OpenWeatherMap にアクセス
「Sign Up」 で無料アカウントを作成
メール認証を完了させる
ログイン後、「API Keys」 タブを開く
表示されているAPIキー（英数字の文字列）をメモしておく

💡 APIキーとは？：

「このアプリが天気データをもらっていいですよ」という認証番号のようなものです。
自分だけの固有の文字列で、他の人に教えないようにしましょう。

⚠️ 注意：

APIキーが有効になるまで最大10分ほどかかります。
すぐに使えない場合は少し待ってから試してみてください。

Step 1：新しいプロジェクトを作って準備する

今回は新しいAndroidプロジェクトとして天気アプリを作ります。

1-1. Android Studioで新規プロジェクトを作成

項目	入力値
Name	WeatherApp
Package name	com.example.weatherapp
Language	Kotlin
Minimum SDK	API 24 (Android 7.0)

1-2. Claude Codeを起動

cd ~/AndroidStudioProjects/WeatherApp
claude

Step 2：画面のレイアウトを作ってもらう

まず見た目から作っていきましょう。

✍️ Claude Codeへの指示（プロンプト）例：

天気アプリの画面を作ってください。
まだデータは表示しなくていいので、レイアウトだけ作ってほしいです。

・上部に都市名を入力できる検索欄と「検索」ボタン
・画面の真ん中あたりに都市名・気温・天気の状態（晴れなど）を大きく表示するエリア
・下部に「更新する」ボタン

全体的にすっきりした青系のデザインにしてください。

Step 3：天気データを取得する機能を作ってもらう

レイアウトができたら、実際にインターネットから天気データを取得する機能を追加します。

✍️ Claude Codeへの指示（プロンプト）例：

OpenWeatherMapのAPIを使って天気データを取得する機能を追加してください。
APIキーは「ここに自分のAPIキーを貼り付け」です。

「検索」ボタンを押したとき、入力欄に入力された都市名の天気を取得して、
以下の情報を画面に表示してください。
・都市名
・気温（℃表示）
・天気の状態（例：晴れ、曇り、雨）

最初は「Tokyo」で動作確認したいです。

💡 APIキーの扱いについて：

APIキーはそのままコードに書いてもらって構いません。
ただし、将来GitHub などにコードを公開する場合は、APIキーが含まれないように注意が必要です（Claude Codeに「APIキーを安全に管理する方法に変更して」と聞いてみましょう）。

Step 4：日本語で天気を表示できるようにする

OpenWeatherMapの天気の状態は英語（”Clear”、”Cloudy”など）で返ってきます。
これを日本語に変換してもらいましょう。

✍️ Claude Codeへの指示（プロンプト）例：

天気の状態が「Clear」「Clouds」「Rain」などの英語で表示されています。
これを「晴れ」「曇り」「雨」のように日本語に変換して表示してください。
他の天気の種類もあわせて日本語対応してほしいです。

Step 5：動作確認する

Android Studioの ▶（Runボタン） でアプリを起動して確認しましょう。

確認チェックリスト

[ ] アプリが起動する
[ ] 検索欄に「Tokyo」と入力して「検索」ボタンを押す
[ ] 東京の気温と天気が表示される
[ ] 別の都市名（「Osaka」「New York」など）でも検索できる
[ ] 「更新する」ボタンで最新情報に更新される

Step 6：使いやすさをさらにアップする

基本が動いたら、もっと便利にしましょう。

読み込み中の表示を追加する

「検索」ボタンを押してからデータが表示されるまで、
「読み込み中...」というメッセージを表示してください。
くるくる回るインジケーターも出るとなお良いです。

エラー時のメッセージを追加する

存在しない都市名を入力したときや、
インターネットに繋がっていないときに、
「都市が見つかりませんでした」「通信エラーが発生しました」と
わかりやすいメッセージを表示してください。

最後に検索した都市を覚えておく

アプリを閉じても、最後に検索した都市名を覚えておいて、
次に開いたとき自動的にその都市の天気を表示してください。

よくある質問

Q. 検索ボタンを押しても何も表示されない

「検索」ボタンを押しても、天気が表示されません。
エラーが起きているか確認して、原因を教えてください。

Q. 「Tokyo」は動くけど日本語の「東京」で検索できない

「東京」と日本語で入力しても検索できません。
日本語の都市名でも検索できるようにしてほしいです。

Q. 気温が小数点だらけで表示される（例：23.456789℃）

気温が「23.456789℃」のように細かすぎる数字で表示されています。
「23℃」のように整数で表示してください。

「ネットにつながるアプリ」の可能性

天気アプリの仕組みを理解すると、同じやり方で様々な情報をインターネットから取ってこれるようになります。

アプリのアイデア	取得できるデータ
ニュースアプリ	最新ニュースの見出し一覧
為替レート確認アプリ	リアルタイムの通貨レート
映画情報アプリ	上映中の映画一覧・評価
電車遅延チェックアプリ	路線の運行情報

どれも「無料で使えるAPI」が公開されています。
Claude Codeに「〇〇のAPIを使って〇〇を表示するアプリを作りたい」と伝えるだけで作り始められます！

まとめ

学んだこと	ポイント
APIとは	ネット上のデータを取得するための仕組み
APIキーの取得	サービスのサイトで無料登録するだけ
データの取得	「〇〇のAPIを使って〇〇を表示して」と伝えるだけ
エラー対応	「通信エラーや入力ミスのときにメッセージを出して」と指示する

インターネットからデータを取ってくる機能を身につけると、アプリの可能性が一気に広がります。
「こんな情報をリアルタイムで見たい」というアイデアをClaude Codeにぶつけてみましょう！

シリーズを振り返って

全8回のシリーズ、お疲れ様でした！このシリーズで体験してきたことを振り返ります。

回	テーマ	身につけたこと
第1回	環境構築	Claude CodeとAndroid Studioのセットアップ
第2回	初めてのアプリ	Claude Codeへの指示の出し方・アプリの基本構造
第3回	デザイン	色・フォント・レイアウトのカスタマイズ
第4回	画面遷移	複数画面を行き来する仕組み
第5回	データ保存	アプリを閉じてもデータが消えない仕組み
第6回	公開	Google Playへの公開手順
第7回	オリジナル制作	アイデアからアプリを作る進め方
第8回	通信機能	インターネットからリアルタイムデータを取得