APIデータ取得して表示のメモ #Laravel

はじめに

laravelで、trelloのAPIを使用してデータを表示する。
今回はボードリストを単純に表示することを行ってみる。
trelloのAPIを使用し、画面を表示させるまで。
前提として、larvelが動く環境はセットされているとする。

処理概要

Trello APIを使用してLaravelでデータを表示する基本的な手順は以下となる。

(1) Trello APIキーの取得
Trello APIを使用するには、まずAPIキーを取得する必要がある。以下のURLにアクセスしてAPIキーを取得する。
https://trello.com/app-key

tokenに関してはAPI取得の画面で以下を行う。
手動でトークンを生成できます、がありクリックし、許可ボタンを推したら長いフレーズが表示される。

(2) Laravelに必要なパッケージのインストール
Guzzleを使ってHTTPリクエストを行う。Laravelプロジェクトのルートディレクトリで以下のコマンドを実行。

composer require guzzlehttp/guzzle

(3) Trelloからデータを取得するサービスを作成
直接コントローラから処理していいが、今回は一旦サービスを通す。
この箇所が今回の主なポイント
trelloのAPIに接続し、データを取得する箇所となる。

LaravelでTrelloのデータを取得するサービスを作成する。例としてTrelloServiceを作成。
app/Servicesフォルダを作成し、
app/Services/TrelloService.phpを以下のように編集。
ここで先ほど取得したAPIとtokenをセットする。

<?php

namespace App\Services;

use GuzzleHttp\Client;

class TrelloService
{
    private $client;
    private $apiKey;
    private $token;

    public function __construct()
    {
        $this->client = new Client(['base_uri' => 'https://api.trello.com/1/']);
        $this->apiKey = 'YOUR_API_KEY'; // 1.で取得したAPIキーをここに入力
        $this->token = 'YOUR_OAUTH_TOKEN'; // 任意: OAuthトークンがある場合はここに入力
    }

    public function getBoards()
    {
        $response = $this->client->get('members/me/boards', [
            'query' => [
                'key' => $this->apiKey,
                'token' => $this->token,
            ]
        ]);

        return json_decode($response->getBody(), true);
    }
}

(4) Controllerでサービスを利用してデータを取得

例としてTrelloControllerを作成。
先ほど作成したServiceを使用してデータを取得している。

php artisan make:controller TrelloController

app/Http/Controllers/TrelloController.phpを以下のように編集する。

<?php

namespace App\Http\Controllers;

use App\Services\TrelloService;

class TrelloController extends Controller
{
    private $trelloService;

    public function __construct(TrelloService $trelloService)
    {
        $this->trelloService = $trelloService;
    }

    public function index()
    {
        $boards = $this->trelloService->getBoards();

        return view('trello.index', compact('boards'));
    }
}

(5) Viewの作成
画面は今回bladeで作る。
resources/views/trello/index.blade.phpという新しいViewファイルを作成する。

blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trello Boards</title>
</head>
<body>

<h1>Your Trello Boards</h1>

<ul>
    @foreach($boards as $board)
        <li>{{ $board['name'] }}</li>
    @endforeach
</ul>

</body>
</html>

(6) ルーティングの設定
routes/web.phpを編集して、以下のルーティングを追加する。

web.php

use App\Http\Controllers\TrelloController;←追加


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

以上の設定を行った後、http://your-laravel-app/trelloにアクセスすると、Trelloのボードのリストが表示される。

おわりに

API接続で処理するイメージを簡潔に記載した。
APIを使用し複雑な処理を行うときに使用イメージを再確認できるはず。