CodeIgniter4でAPIを使用して天気情報を表示する方法

2024.08.22

WEB

システム開発

APIってなに？と聞かれても、具体的に答えることができないくらいの知識しか無かったので、自身の学習も兼ねて、今回はAPIに着目していきたいと思います。

INDEX

前提
APIとは
APIの使用例
アプリケーションの実行
さいごに

前提

ubuntu v22.04
PHP v8.1.2
CodeIgniter v4.5.1

APIとは

Application Programming Interfaceの略称
異なるソフトウェアアプリケーション同士が通信し、機能やデータをやり取りするためのインターフェースで、これにより開発者は他のアプリケーションやサービスの機能を簡単に利用できるようになる。
完結にまとめると、「プログラムや機能に対するお仕事依頼用の窓口」

参考

APIの使用例

今回は弊社の業務でも使用しているCodeIgniter4で、OpenWeatherMapという天気情報を取得できるAPIを使用してみます。

前回の記事でもご紹介しましたが、CodeIgniter4の導入方法については、ばねさんの記事「Codeigniter4.4が出ていたので簡単なフォームを作りながら基礎を学んでみる」の「CodeIgniter4のインストール」を参考にしていただければと思います。

まず、APIキーを取得します。

OpenWeatherMapにアクセスし、新規アカウントを作成します。既にアカウントを持っている場合はログインします。
Create key欄に適当な「API key name」を入力して、Generateボタンを押下します。
作成されたAPIキーをコピーしておきます。

次に、CodeIgniter4のプロジェクトルートにある.envファイル(無ければenvファイルをコピーしてください)に下記を追加します。

openweathermap.apiKey = '取得したAPIキー'

次に、プロジェクトルートで下記を実行し、新しいコントローラーを作成します。

php spark make:controller Weather

生成されたWeather.phpファイルを開き、下記のように修正します。

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class Weather extends BaseController
{
    public function index()
    {
        return view('weather_form');
    }

    public function getWeather()
    {
        $city = $this->request->getPost('city');
        $apiKey = getenv('openweathermap.apiKey');

        $encodedCity = urlencode($city);
        $apiUrl = "http://api.openweathermap.org/data/2.5/weather?q={$encodedCity}&appid={$apiKey}&units=metric&lang=ja";

        $client = \Config\Services::curlrequest();
        try {
            $response = $client->get($apiUrl);
            $data = json_decode($response->getBody(), true);

            if ($data['cod'] == 200) {
                return view('weather_result', ['weather' => $data]);
            } else {
                return view('weather_form', ['error' => $data['message']]);
            }
        } catch (\Exception $e) {
            return view('weather_form', ['error' => 'APIリクエスト中にエラーが発生しました。']);
        }
    }
}

ここでは、

getWeatherメソッドでフォームから送信された都市名を受け取り、OpenWeatherMap APIを使用して天気情報を取得
都市名をURLエンコードしてAPIリクエストURLに組み込む
APIからのレスポンスを処理して天気情報を表示するビューを返し、エラーが発生した場合はエラーメッセージを表示する

という動きをしています。

次に、天気情報を表示するためのビューを作成します。 app/Viewsディレクトリにweather_form.phpとweather_result.phpというファイルを作成して、それぞれ下記を追加します。

weather_form.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>天気情報</title>
</head>
<body>
    <h1>天気情報</h1>
    <form action="/weather/getWeather" method="post">
        <?= csrf_field() ?>
        <label for="city">都市名を入力してください:</label>
        <input type="text" name="city" id="city" required>
        <button type="submit">天気を取得</button>
    </form>
    <?php if (isset($error)): ?>
        <p style="color: red;"><?= esc($error) ?></p>
    <?php endif; ?>
</body>
</html>

weather_result.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>天気結果</title>
</head>
<body>
    <h1><?= esc($weather['name']) ?>の天気</h1>
    <p>気温: <?= esc($weather['main']['temp']) ?> °C</p>
    <p>天気: <?= esc($weather['weather'][0]['description']) ?></p>
    <p>湿度: <?= esc($weather['main']['humidity']) ?>%</p>
    <p>風速: <?= esc($weather['wind']['speed']) ?> m/s</p>
    <a href="/weather">他の都市を確認</a>
</body>
</html>

次に、app/Config/Routes.phpファイルを開き、今回の作業で必要なルートを下記のように追加します。

$routes->get('/weather', 'Weather::index');
$routes->post('/weather/getWeather', 'Weather::getWeather');

アプリケーションの実行

実際にAPIを使用して天気情報を表示できるか試してみます。

php spark serve

で、アプリケーションを起動し、都市名を入れてGet Weatherボタンを押下してみます。

のように、正しく天気情報を取得できることを確認できました。

さいごに

今回は、CodeIgniter 4を使用してOpenWeatherMap APIから天気情報を取得し、表示するアプリケーションを作成する方法について紹介しました。
今回ご紹介したOpenWeatherMap API以外にも便利なAPIがたくさんあるので、またご紹介できればと思います。

この記事がPHP初学者の方や、CodeIgniter4で開発を行ってみようと考えている方へ少しでも参考になれば幸いです。

この記事を書いた人

チェリー: モノを売るより創りたいという想いで、約5カ月間の独学期間を経て、営業職からエンジニアへ転職。現在は、ソリューション事業部のWebエンジニアとして、主にシステムの開発・運用に従事している。趣味は料理と釣り。

この執筆者の最新記事

この執筆者の記事一覧

2024年11月19日WEB CodeIgniter4でAPIを使用してランダムユーザーを生成する方法
2024年8月22日WEB CodeIgniter4でAPIを使用して天気情報を表示する方法
2024年6月28日WEB .envファイルを使わずにCodeIgniter4で環境変数を設定する方法

この記事のカテゴリ

WEB システム開発