こちらの続きです。
天気取得は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の動きを書いてゆきます!
続きます