Laravelで外部APIをJSONで受け取って表示する
概要
- 占いのAPIを使用します。
- Web.phpに直接書いても良いですが、Controllerを使う方が本格的なのでそっちで実装していきます。
Web.php -> Controller -> blade.php - API取得についてはGuzzleを使っていきます。
- Laravel10を使っています。
占いのAPIについて
占いのAPIは以下を利用させていただきます。
http://jugemkey.jp/api/waf/api_free.php
リクエスト時に日付を指定することで、その日の占い結果を12星座分返してくれるというものになります。
中身は以下のようになっていました。
{"horoscope":
{"2023/06/17":[
{"content":"素晴らしい出会いが期待できそうな日！理想とも思えるような人が、とうとう目の前に姿を表す予感。アンテナを張って。",
"item":"デニムのスカート",
"money":5,
"total":5,
"job":5,
"color":"ブルー",
"day":17,
"love":4,
"rank":2,
"sign":"牡羊座"},
{"content":"気分が落ち込みがちな一日。ずっと家にいると、イライラしてしまうかも。カフェに行くなどして、上手に気分転換を。",
"item":"ズッキーニ",
"money":3,
"total":2,
"job":2,
"color":"オレンジ",
"day":"",
"love":2,
"rank":10,
"sign":"牡牛座"},...
今日の日付の占い結果を取得する
前提
Guzzle: API通信やスクレイピングがcurl系の関数より簡単に使えるというもの
今回はFortuneControllerを作成して実装しています。
接続先はhttp://localhost/fortuneになります。
コントローラーの作成コマンドは以下になります。
php artisan make:controller FortuneController
- Guzzleをインストールする。(Laravelが入っているところ)
composer require guzzlehttp/guzzle
上記コマンドでインストールすると、composer.jsonにGuzzleが追加されます。 - ルーティングする。(Laravel8以降の記載方法)
Route::get('/fortune', [FortuneController::class, 'index']);
- GuzzleでAPIリクエストしてデータを取得する。
use Illuminate\Support\Facades\Http;
public function index() {
$date = date('Y/m/d');
$resp = Http::get('http://api.jugemkey.jp/api/horoscope/free/' . $date);
}
→ dd($resp->json());を追加して、ローカル環境に接続すると実際に取得できているか確認できます。
date関数で日付を/区切りで取得して、GuzzleのリクエストのURLに日付を結合しています。
- 取得した結果をランキング順にソートしてViewに渡す。
public function index() {
$date = date('Y/m/d');
$resp = Http::get('http://api.jugemkey.jp/api/horoscope/free/' . $date);
$resp = $resp->json();
$horoscope = $resp['horoscope'];
$dateFortune = $horoscope[$date];
array_multisort(
array_column($dateFortune, 'rank'), SORT_ASC, $dateFortune
);
return view('fortune', compact('dateFortune'));
}
→ ソートしない場合は、array_multisortの部分を削除してください。
取得したJSONが多次元配列になっているため、当日の中身だけを取得するために以下手順を踏んでいます。
$horoscope = $resp['horoscope'];
$dateFortune = $horoscope[$date];
- Viewで表示する。
今回はfortune.blade.phpを作成しました。
以下のコードを記載すると表示されます。(本来はheader等の記載も必要ですが、省略します。)
@foreach ( $dateFortune as $fortune )
<section>
<h2>{{ $fortune['sign'] }}</h2>
<ul>
<li>ランク: {{ $fortune['rank'] }}</li>
<li>内容: {{ $fortune['content'] }}</li>
<li>ラッキーアイテム: {{ $fortune['item'] }}</li>
<li>ラッキーカラー: {{$fortune['color']}}</li>
<li>---------</li>
</ul>
</section>
@endforeach
$dateFortuneから表示したい情報のみを表示しています。
上記で表示される画面は以下のようになります。
これで、外部APIから情報を取得することができました。
少しレイアウトを修正して、以下のようにしてみました。
終わりに
Guzzleを使えばとても簡単に外部APIを使うことができます。取得するだけなら
- Guzzleをcomposerでインストール
- 下記でAPIを叩く
use Illuminate\Support\Facades\Http;
$resp = Http::get('http://api.jugemkey.jp/api/horoscope/free/' . $date);
この2行のみなので、とても簡単だと思いました。
Guzzleでの取得がどれだけ楽なのかを確認するために、curlで同じ実装をしてみたいなと思いました。
参考文献
【初心者】PHPで星占いAPIを使ってみた: https://qiita.com/mayegg/items/8f53bdd76b8dacfa58a9
【Laravel】超簡単！Guzzel HTTPを使ってAPIのデータを取得する方法: https://prograshi.com/framework/laravel/laravel-guzzel-http/