OpenWeatherAPIで任意の地域の天気を取得 ①

Laravel

こちらの続きです。

天気取得はOpenWeatherAPIを使用しました。

無料で使える情報は限られていますが、課金すればいろいろなタイプのお天気情報が取得できます。

無料で使えるものには説明欄に「Included in both free and paid subscriptions」と記述があるのでその中から選んでください。

今回はCurrentWeatherDataを使用しました。

※メールアドレス宛に確認メールが届くので、確認ボタンをクリックするまでAPIは使えません

お天気情報を取得するために必要なデータ

コールに必要なコードはドキュメントに書かれてあります。

英語なのでちょっと戸惑いますが、読んでみましょう。。

ここで必要なパラメーターが3つ。lat, lon, API key

最後のAPIキーはマイページで確認できますが、他の2つは専用urlで取得できる経度・緯度データのようです。

私はこのlat,lonを都度取るのではなくconstで定義しておきたかったので、予めapiを叩いてデータを取得しました。

例えば札幌のlat, lon情報を知りたければ

http://api.openweathermap.org/geo/1.0/direct?q=Sapporo&limit=5&appid={$appid}

このurlにアクセスすれば表示されます。変数部分にはご自身のキーを入れてください。

定数をセット

地域のデータ

ひとまず4地域のデータを定義しました。

config 配下にconstというファイルを作成しています。

こうすることで、コントローラーで

config('const.positions.' . 札幌 . '.lat');

で取得できます。

APIキー

また、APIキーは .envにセットして、.envをconfigで呼び出すことでコントローラーから使用します。

.env内 で以下のようにセットしている

WEATHER_CAST_API_KEY=".............."

ここまで出来たらもうお天気情報はすぐです!

コントローラー作成

今回、コントローラーのファイルをapiと、普通のリクエストで分けようと思います。

/app/http/Controllers/Api/WeatherController.php
/app/http/Controllers/WeatherController.php

このように、WeatherControllerを2つ用意しました。

web.phpでルーティング定義

ルートの定義をします。

use App\Http\Controllers\TwitterController;

Route::get('/', [WeatherController::class, 'index']);

GETで / のurlに来たら、WeatherControllerのindexメソッドを通る

という内容になっています。

api.phpでルーティング定義

api.phpにはapiに関するルートを記述します。

use App\Http\Controllers\Api\TwitterController;

Route::get('/weather', [WeatherController::class, 'getWeather']);

GETで /api/weather に来たら、WeatherControllerのgetWeatherメソッドを通る

という意味です。※api.phpに記述すると、自動で/api付与されます。

bladeファイル

セレクトボックスで選択するとAjaxが走る仕様なので、bladeはこんな感じ。

            <select name="destination" class="form-select form-select-lg mb-3" aria-label=".form-select-lg select example">
              <option selected>Open this select menu</option>
              <option value="札幌">SAPPORO</option>
              <option value="東京">TOKYO</option>
              <option value="大阪">OSAKA</option>
              <option value="沖縄">OKINAWA</option>
            </select>

    <h2>今の天気</h2>
              <div id="js_weatherWrap" class="row">
                <div class="col">
                  Column
                </div>
                <div class="col">
                  Column
                </div>
              </div>

「今の天気」以下にAjaxの取得結果が入ります。

やりたいこと

ここまでだらだら書いてよくわからなくなってきましたが、ここからやりたいことは

  • セレクトボックスのchangeイベントでajaxを走らせる
  • php側でapiを叩きデータ取得、jsonでJSへ返す
  • phpから受け取ったデータを処理、htmlへ表示

という部分ですので、まずはChangeイベントからのJSの動きを書いてゆきます!

続きます

タイトルとURLをコピーしました