【初心者向け】LaravelでDialogflowと連携して天気情報を取得するフォームを作る

2025年3月4日 2025年3月4日

Takamizawa

1. はじめに

Webアプリ開発において、ユーザーが入力した内容をもとに外部のAPIと連携して情報を取得する機能は非常に便利です。本記事では、LaravelとGoogleの自然言語理解プラットフォーム「Dialogflow」を連携し、ユーザーが都市名を入力すると天気予報を取得できるフォームを作成する方法 を解説します。

🔹 この記事で学べること

Dialogflowの基本的な使い方（エージェント作成・インテント設定・Webhookの活用）
LaravelとDialogflowの連携方法（Webhookを利用してDialogflowの応答をカスタマイズ）
天気予報APIとの統合（OpenWeatherMap APIなどを利用してリアルタイムの天気情報を取得）

🔹 必要な環境

この記事を進めるにあたって、以下の環境を準備してください。

項目	バージョン / 備考
PHP	8.0以上（Laravelの推奨環境）
Laravel	10.x（または9.x）
Composer	最新版を推奨
Google Cloudアカウント	Dialogflowを利用するために必要
OpenWeatherMap APIキー	天気予報を取得するために必要

🔹 実装する機能の流れ

Dialogflowのセットアップ（エージェント作成・インテント設定・Webhook有効化）
LaravelでDialogflowのリクエストを処理するWebhookを作成
天気予報API（OpenWeatherMapなど）と連携して天気データを取得
ユーザーが都市名を入力できるフォームを作成

本記事では、初心者の方でも理解しやすいように ステップごとにコードを紹介しながら解説 していきます。ぜひ、LaravelとDialogflowの連携を体験しながら、Webアプリ開発スキルを向上させてください！

2. Dialogflowのセットアップ

まずは、Googleの自然言語理解プラットフォーム Dialogflow をセットアップし、天気予報に関するユーザーの入力を処理できるようにします。

🔹 2-1. Google CloudでDialogflowのプロジェクトを作成

Google Cloud Console（https://console.cloud.google.com/）にアクセスし、Googleアカウントでログインします。
新しいプロジェクトを作成 し、わかりやすい名前（例: weather-dialogflow）を設定します。
Dialogflow APIを有効化 するため、左上の「≡ メニュー」→「APIとサービス」→「ライブラリ」を開き、Dialogflow API を検索して有効化します。

🔹 2-2. Dialogflowエージェントの作成

Dialogflowのコンソールにアクセスし、「エージェントを作成」をクリックします。
エージェント名（例: WeatherBot）を入力し、「Google Cloudプロジェクト」で先ほど作成したプロジェクトを選択します。
言語を「日本語」、タイムゾーンを適切なものに設定し、「作成」をクリックします。

🔹 2-3. インテントの作成（ユーザー入力の処理）

インテント（Intent）とは、ユーザーが入力した内容の意図を理解し、適切な応答を返すための設定 です。

「インテント」メニューを開き、「新しいインテント」を作成 します。
インテント名を GetWeather に設定します。
「トレーニングフレーズ」に以下のようなフレーズを入力します。
- 「東京の天気を教えて」
- 「大阪の天気は？」
- 「福岡の天気を知りたい」
「エンティティ」を設定し、 {location} という変数を作成して都市名を取得できるようにします。
「保存」をクリックします。

🔹 2-4. Fulfillment（Webhook）の有効化

Dialogflowでは、Webhookを使って外部のサーバー（Laravel）と連携し、動的なレスポンスを返すことができます。

「Fulfillment」メニューを開き、「Webhookを有効化」をオンにします。
WebhookのURLには、後ほど作成する Laravelのエンドポイント（例: https://yourdomain.com/api/dialogflow） を設定します。（今は仮のURLを入力しておき、Laravel側を構築した後に更新します）
「保存」をクリックします。

3. Laravelのセットアップ

次に、Laravelプロジェクトをセットアップし、Dialogflowと連携できる環境を整えます。Laravel側では、Dialogflowのリクエストを受け取るためのWebhookを作成し、天気予報APIと連携してデータを取得します。

🔹 3-1. Laravelプロジェクトの作成

まず、新規のLaravelプロジェクトを作成するか、既存のプロジェクトに実装していきます。

🛠 新しいプロジェクトを作成する場合

ターミナルで以下のコマンドを実行して、新しいLaravelプロジェクトを作成します。

composer create-project --prefer-dist laravel/laravel dialogflow-weather

プロジェクトのディレクトリに移動します。

cd dialogflow-weather

🛠 既存のプロジェクトを使用する場合

既存のLaravelプロジェクトがある場合は、そのディレクトリに移動して次の手順に進んでください。

🔹 3-2. 必要なパッケージのインストール

Dialogflow APIと外部の天気予報APIを扱うために、GuzzleHTTP をインストールします。これは、LaravelのHTTPクライアントでAPIリクエストを送信するために使用します。

composer require guzzlehttp/guzzle

🔹 3-3. 環境変数（.env）の設定

APIキーや外部サービスの情報を管理するために、.env ファイルを編集します。

nano .env

次のように、DialogflowのWebhook URLや天気予報APIのキーを追加します。（YOUR_OPENWEATHER_API_KEY の部分は、後ほど取得するAPIキーに置き換えてください）

DIALOGFLOW_WEBHOOK_URL=https://yourdomain.com/api/dialogflow
OPENWEATHER_API_KEY=YOUR_OPENWEATHER_API_KEY

変更を保存したら、キャッシュをクリアして設定を反映させます。

php artisan config:clear

🔹 3-4. Laravelのルート設定

Dialogflowのリクエストを受け取るための Webhookエンドポイント を作成します。

routes/api.php を開き、次のコードを追加します。

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DialogflowController;

Route::post('/dialogflow', [DialogflowController::class, 'handleRequest']);

このエンドポイントが、DialogflowのWebhookからのリクエストを処理する役割を果たします。

🔹 3-5. コントローラーの作成

次に、Dialogflowからのリクエストを処理する DialogflowController を作成します。

php artisan make:controller DialogflowController

作成された app/Http/Controllers/DialogflowController.php を開き、次のように編集します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class DialogflowController extends Controller
{
    public function handleRequest(Request $request)
    {
        // Dialogflowからのリクエストを取得
        $queryText = $request->input('queryResult.queryText');
        $city = $request->input('queryResult.parameters.location');

        if (!$city) {
            return response()->json(['fulfillmentText' => '都市名を指定してください。']);
        }

        // 天気情報を取得
        $weather = $this->getWeather($city);

        return response()->json(['fulfillmentText' => $weather]);
    }

    private function getWeather($city)
    {
        $apiKey = env('OPENWEATHER_API_KEY');
        $url = "https://api.openweathermap.org/data/2.5/weather?q={$city}&appid={$apiKey}&units=metric&lang=ja";

        $response = Http::get($url);

        if ($response->failed()) {
            return "天気情報を取得できませんでした。";
        }

        $data = $response->json();
        $description = $data['weather'][0]['description'];
        $temp = $data['main']['temp'];

        return "{$city}の天気は「{$description}」、気温は{$temp}°Cです。";
    }
}

🎯 ここまでのまとめ

✅ Laravelプロジェクトの作成
✅ 必要なパッケージ（GuzzleHTTP）のインストール
✅ .env にDialogflowと天気APIの設定を追加
✅ DialogflowのWebhook用エンドポイントを作成
✅ Dialogflowからのリクエストを処理し、天気予報APIと連携するコントローラーを作成

4. 天気予報API（OpenWeatherMapなど）との連携

前のセクションで、Dialogflowのリクエストを受け取り、天気情報を取得する準備をしました。ここでは、天気予報API（OpenWeatherMap）を使って、実際に都市の天気を取得する方法を解説します。

🔹 4-1. OpenWeatherMap APIの登録

天気情報を取得するために、OpenWeatherMapのAPIキーを取得します。

OpenWeatherMap にアクセスし、新規アカウントを作成する。
ログイン後、「API Keys」のページで新しいAPIキーを取得する。（無料プランでも基本的な天気情報は取得可能）
.env ファイルにAPIキーを追加する。

OPENWEATHER_API_KEY=YOUR_API_KEY_HERE

追加したら、設定を反映するためにキャッシュをクリアします。

php artisan config:clear

🔹 4-2. 天気情報を取得する関数を作成

天気予報APIを呼び出して、都市ごとの天気データを取得する処理を WeatherService クラスとして作成します。

① `app/Services/WeatherService.php` を作成

ターミナルで以下のコマンドを実行し、Services ディレクトリを作成します。（既にある場合は不要）

mkdir app/Services

次に、WeatherService.php ファイルを作成して、以下のコードを追加します。

<?php

namespace App\Services;

use Illuminate\Support\Facades\Http;

class WeatherService
{
    public function getWeather($city)
    {
        $apiKey = env('OPENWEATHER_API_KEY');
        $url = "https://api.openweathermap.org/data/2.5/weather?q={$city}&appid={$apiKey}&units=metric&lang=ja";

        $response = Http::get($url);

        if ($response->failed()) {
            return "天気情報を取得できませんでした。";
        }

        $data = $response->json();
        $description = $data['weather'][0]['description'];
        $temp = $data['main']['temp'];

        return "{$city}の天気は「{$description}」、気温は{$temp}°Cです。";
    }
}

🔹 4-3. コントローラーで `WeatherService` を利用する

次に、DialogflowController で WeatherService を利用するように変更します。

② `app/Http/Controllers/DialogflowController.php` を編集

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Services\WeatherService;

class DialogflowController extends Controller
{
    protected $weatherService;

    public function __construct(WeatherService $weatherService)
    {
        $this->weatherService = $weatherService;
    }

    public function handleRequest(Request $request)
    {
        // Dialogflowからのリクエストを取得
        $queryText = $request->input('queryResult.queryText');
        $city = $request->input('queryResult.parameters.location');

        if (!$city) {
            return response()->json(['fulfillmentText' => '都市名を指定してください。']);
        }

        // 天気情報を取得
        $weather = $this->weatherService->getWeather($city);

        return response()->json(['fulfillmentText' => $weather]);
    }
}

🔹 4-4. 動作確認（APIテスト）

ここまでの設定が完了したら、ローカルサーバーを起動して、APIの動作をテストします。

php artisan serve

別のターミナルを開き、以下のコマンドで 都市名を指定して天気情報を取得できるか を確認します。

curl -X POST -H "Content-Type: application/json" \
-d '{
  "queryResult": {
    "queryText": "東京の天気を教えて",
    "parameters": {
      "location": "東京"
    }
  }
}' http://127.0.0.1:8000/api/dialogflow

✅ 正しく動作すれば、次のようなJSONレスポンスが返ってきます。

{
  "fulfillmentText": "東京の天気は「晴れ」、気温は18°Cです。"
}

もしエラーが出た場合は、以下をチェックしてください。

.env ファイルの OPENWEATHER_API_KEY は正しく設定されているか
php artisan config:clear を実行したか
OpenWeatherMapのAPIキーが有効化されているか（発行後、数時間かかる場合あり）

🎯 ここまでのまとめ

✅ OpenWeatherMap APIの登録 & APIキーの取得
✅ .env にAPIキーを設定
✅ WeatherService クラスを作成し、天気情報を取得する関数を実装
✅ DialogflowController で WeatherService を利用し、天気情報を返す処理を追加
✅ APIテストを実施し、正しく天気データが取得できることを確認

5. LaravelとDialogflowの連携

前のセクションで、Laravelの DialogflowController を通じて天気予報APIと連携する処理を作成しました。
ここでは、DialogflowのWebhookとしてLaravelを連携させ、実際にユーザーの入力に対して適切な応答を返す仕組みを構築します。

🔹 5-1. WebhookのエンドポイントをDialogflowに設定

LaravelのAPIエンドポイントを公開
- ローカル環境（http://127.0.0.1:8000/api/dialogflow）では、Dialogflowがアクセスできません。Ngrokを使用して、一時的なパブリックURLを作成します。
Ngrokのインストール（未インストールの場合）

npm install -g ngrok

Ngrokでローカルサーバーを公開

ngrok http 8000

すると、https://xxxxx.ngrok.io のようなURLが発行されます。
これを DialogflowのWebhookエンドポイントとして設定 します。
DialogflowのWebhook設定を更新
- Dialogflowコンソールにアクセス
- 左メニューの 「Fulfillment」 を開く
- Webhookを有効化 し、URLに https://xxxxx.ngrok.io/api/dialogflow を入力
- 「保存」をクリック

🔹 5-2. Dialogflowのレスポンスをカスタマイズ

現在の DialogflowController では、天気情報をそのままテキストで返していますが、よりリッチなレスポンスを返せるように改良します。

💡 リッチレスポンスを追加

以下のように、カード（Card）やクイックリプライ（Quick Replies） を含めたレスポンスを返せるようにします。

app/Http/Controllers/DialogflowController.php を修正：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Services\WeatherService;

class DialogflowController extends Controller
{
    protected $weatherService;

    public function __construct(WeatherService $weatherService)
    {
        $this->weatherService = $weatherService;
    }

    public function handleRequest(Request $request)
    {
        // ユーザーの入力内容を取得
        $city = $request->input('queryResult.parameters.location');

        if (!$city) {
            return response()->json([
                'fulfillmentText' => '都市名を指定してください。',
                'fulfillmentMessages' => [
                    ['text' => ['text' => ['都市名を指定してください。']]]
                ]
            ]);
        }

        // 天気情報を取得
        $weather = $this->weatherService->getWeather($city);

        return response()->json([
            'fulfillmentText' => $weather,
            'fulfillmentMessages' => [
                [
                    'card' => [
                        'title' => "{$city}の天気",
                        'subtitle' => $weather,
                        'imageUri' => "https://source.unsplash.com/featured/?weather,{$city}",
                        'buttons' => [
                            [
                                'text' => '詳しく見る',
                                'postback' => "https://www.google.com/search?q={$city}+天気"
                            ]
                        ]
                    ]
                ],
                [
                    'quickReplies' => [
                        'title' => '他の都市の天気も知りたいですか？',
                        'quickReplies' => ['東京', '大阪', '名古屋']
                    ]
                ]
            ]
        ]);
    }
}

💡 追加したポイント

✅ 画像付きカード（Card）を追加 → imageUri に、都市名を含む天気関連の画像を表示
✅ 「詳しく見る」ボタンを追加 → Googleでその都市の天気を検索するリンク
✅ クイックリプライ（Quick Replies）を追加 → ユーザーがすぐに別の都市の天気を聞ける

🔹 5-3. Webhookの動作確認

Ngrokで公開したエンドポイントをDialogflowに設定したら、以下の方法でWebhookの動作を確認できます。

Dialogflowの「テストコンソール」で試す
- Dialogflowコンソールを開く
- 右側のチャットボットに「東京の天気を教えて」と入力
- 「東京の天気は〇〇です」 のようなレスポンスが返ることを確認
- カード（画像＋ボタン）やクイックリプライも表示されるか確認
Postman でAPIをテスト

curl -X POST -H "Content-Type: application/json" \ -d '{ "queryResult": { "queryText": "東京の天気を教えて", "parameters": { "location": "東京" } } }' https://xxxxx.ngrok.io/api/dialogflow

→ JSONレスポンスが返ればOK！ 🚀

🎯 ここまでのまとめ

✅ Ngrokを使ってLaravelのエンドポイントを公開
✅ DialogflowのWebhookを設定
✅ レスポンスに画像付きカード・ボタン・クイックリプライを追加
✅ DialogflowのテストコンソールやPostmanで動作確認

6. フロントエンド（フォーム）の作成

ここまでで、DialogflowとLaravelを連携し、ユーザーの入力に基づいて天気予報を取得するAPI を作成しました。
次に、ユーザーが都市名を入力できるフォームを作成 し、天気情報を取得する仕組みを構築します。

🔹 6-1. ルートの設定

まず、フォームのページを表示するためのルートを設定します。

routes/web.php に以下のコードを追加してください。

use App\Http\Controllers\WeatherFormController;

Route::get('/weather', [WeatherFormController::class, 'index']);
Route::post('/weather', [WeatherFormController::class, 'getWeather']);

GET /weather → フォームを表示
POST /weather → 入力された都市名をDialogflowに送信し、天気情報を取得

🔹 6-2. コントローラーの作成

次に、フォームの処理を行う WeatherFormController を作成します。

php artisan make:controller WeatherFormController

作成された app/Http/Controllers/WeatherFormController.php を編集し、以下のコードを追加してください。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class WeatherFormController extends Controller
{
    public function index()
    {
        return view('weather-form');
    }

    public function getWeather(Request $request)
    {
        $city = $request->input('city');

        if (!$city) {
            return back()->with('error', '都市名を入力してください。');
        }

        // Dialogflowにリクエストを送信
        $response = Http::post(env('DIALOGFLOW_WEBHOOK_URL'), [
            'queryResult' => [
                'parameters' => [
                    'location' => $city
                ]
            ]
        ]);

        $weatherInfo = $response->json()['fulfillmentText'] ?? '天気情報を取得できませんでした。';

        return back()->with('weather', $weatherInfo);
    }
}

ユーザーがフォームに入力した都市名を取得
Laravel経由で DialogflowのWebhook（LaravelのAPI） にリクエストを送信
取得した天気情報を画面に表示

🔹 6-3. ビュー（フォーム）の作成

次に、天気情報を入力・表示するためのビューを作成します。

resources/views/weather-form.blade.php を作成し、以下のコードを追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天気予報フォーム</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin: 50px; }
        form { margin-bottom: 20px; }
        input, button { padding: 10px; font-size: 16px; }
        .result { margin-top: 20px; font-size: 18px; }
        .error { color: red; }
    </style>
</head>
<body>

    <h1>天気予報を確認</h1>
    <form action="/weather" method="POST">
        @csrf
        <input type="text" name="city" placeholder="都市名を入力" required>
        <button type="submit">天気を取得</button>
    </form>

    @if(session('weather'))
        <p class="result">{{ session('weather') }}</p>
    @endif

    @if(session('error'))
        <p class="error">{{ session('error') }}</p>
    @endif

</body>
</html>

✅ フォームの機能

ユーザーが都市名を入力できる
POST /weather に送信し、天気情報を取得
結果を画面に表示

🔹 6-4. 動作確認

Laravelの開発サーバーを起動shコピーする編集するphp artisan serve
ブラウザで http://127.0.0.1:8000/weather にアクセス
フォームに「東京」などの都市名を入力し、天気予報を取得

✅ 正しく動作すれば、「東京の天気は〇〇です」などの結果が表示されます！ 🎉

🎯 ここまでのまとめ

✅ 天気を取得するフォームを作成
✅ DialogflowのAPIと連携して天気情報を取得
✅ 取得した天気情報を画面に表示
✅ 動作確認（フォーム入力 → 天気情報の取得）

7. 動作確認とデバッグ

ここまでで、LaravelとDialogflowを連携し、ユーザーが都市名を入力すると天気情報を取得できるフォーム が完成しました。
このセクションでは、動作確認の方法と、よくあるエラーとその対処法について解説します。

🔹 7-1. 動作確認（フォーム & API）

まず、フォームとAPIが正しく動作するか確認しましょう。

✅ フォームからテスト

Laravelの開発サーバーを起動

php artisan serve

ブラウザで http://127.0.0.1:8000/weather にアクセス
フォームに「東京」などの都市名を入力し、「天気を取得」ボタンを押す
天気情報が画面に表示されることを確認

🟢 正常な出力の例

東京の天気は「晴れ」、気温は18°Cです。

🔴 エラー例

天気情報を取得できませんでした。

→ APIキーの設定や、リクエストの処理を確認（後述のデバッグ方法を参照）

✅ Postman でAPIテスト

もしフォームがうまく動作しない場合、APIのリクエストが正しく処理されているか確認しましょう。
Postmanを使って DialogflowのWebhook に直接リクエストを送信します。

🛠 Postmanの設定

メソッド: POST
URL: http://127.0.0.1:8000/api/dialogflow
ヘッダー:

Content-Type: application/json

Body (JSON):

{ "queryResult": { "queryText": "東京の天気を教えて", "parameters": { "location": "東京" } } }

🟢 期待されるレスポンス

{
  "fulfillmentText": "東京の天気は「晴れ」、気温は18°Cです。"
}

🔹 7-2. よくあるエラーと対処法

テスト時によく発生するエラーとその解決策を紹介します。

❌ 1. 「天気情報を取得できませんでした。」

✅ 原因

.env に OPENWEATHER_API_KEY が設定されていない
OpenWeatherMapのAPIキーが無効 / アクティベーションが完了していない

✅ 解決策

.env に 正しいAPIキー があるか確認

OPENWEATHER_API_KEY=your_api_key_here

設定を反映するためにキャッシュをクリア

php artisan config:clear

OpenWeatherMapのAPIキーがアクティブか確認
→ APIキーを取得後、反映に 数時間かかる場合あり

❌ 2. 「DialogflowのWebhookが動作しない」

✅ 原因

Ngrokが停止している / URLが変わった
Webhook URLを更新していない

✅ 解決策

Ngrokを再起動 し、新しいURLを取得

ngrok http 8000

DialogflowのWebhook設定を更新
- Dialogflowコンソールの「Fulfillment」
- Webhook URL を新しい Ngrok の URL に変更
- 「保存」をクリック

❌ 3. 「フォームでエラーが出る」

✅ 原因

CSRFトークンエラー
Laravelのサーバーが動いていない

✅ 解決策

フォームが @csrf を含んでいるか確認

<form action="/weather" method="POST">
    @csrf
    <input type="text" name="city" placeholder="都市名を入力" required>
    <button type="submit">天気を取得</button>
</form>

サーバーが起動しているか確認

php artisan serve

エラーメッセージを表示させて原因を特定
storage/logs/laravel.log を確認

tail -f storage/logs/laravel.log

🔹 7-3. デバッグのコツ

開発中に問題が発生したときのデバッグ方法を紹介します。

✅ 1. Laravelのログを確認する エラーメッセージやリクエストの内容を記録することで、原因を特定しやすくなります。
app/Http/Controllers/DialogflowController.php に以下を追加すると、リクエスト内容をログに記録できます。

use Illuminate\Support\Facades\Log;

public function handleRequest(Request $request)
{
    Log::info('Dialogflowからのリクエスト: ', $request->all());

    $city = $request->input('queryResult.parameters.location');

    if (!$city) {
        return response()->json(['fulfillmentText' => '都市名を指定してください。']);
    }

    $weather = $this->weatherService->getWeather($city);

    return response()->json(['fulfillmentText' => $weather]);
}

✅ 2. Debugbarを使う Laravel Debugbar を導入すると、デバッグが簡単になります。

composer require barryvdh/laravel-debugbar --dev
php artisan config:clear

→ 画面上にAPIリクエストやSQLの実行ログが表示されるようになります。 🚀

🎯 ここまでのまとめ

✅ フォームとAPIの動作確認
✅ Postmanを使ったAPIテスト
✅ よくあるエラーとその対処法
✅ デバッグ方法（ログ確認・Debugbarの活用）

8. まとめ

本記事では、LaravelとDialogflowを連携して、ユーザーが都市名を入力すると天気予報を取得できるフォーム を作成しました。
最初から順を追って実装し、Googleの自然言語理解（NLP）機能とAPI連携を活用 する方法を学びました。

🔹 この記事で学んだこと

✅ Dialogflowの基本設定（エージェント作成・インテント設定・Webhook有効化）
✅ LaravelでDialogflowのWebhookを処理（リクエストを受け取り、適切な応答を返す）
✅ 天気予報API（OpenWeatherMap）と連携（APIキーを使って天気情報を取得）
✅ フォームの作成とフロントエンドとの統合（ユーザーが入力した都市名を処理）
✅ 動作確認・デバッグの方法（Postmanテスト、NgrokでのWebhook公開）

これらのスキルを習得することで、より高度なAI連携アプリ を開発できるようになります！🚀

🔹 応用のアイデア

本記事の内容を発展させることで、より実用的なアプリを作ることも可能です。

💡 音声入力を追加
→ Dialogflowの音声認識機能を活用し、「東京の天気は？」と話しかけるだけで取得 できるようにする。

💡 LINEボットやSlackボットと連携
→ LaravelをWebhookサーバーとして使用し、LINEやSlackのチャットボットから天気を問い合わせられるようにする。

💡 天気データをデータベースに保存
→ 取得した天気情報をDBに記録し、過去の天気や履歴を参照できる機能を実装 する。

💡 天気予報を自動通知
→ ユーザーが登録した都市の天気を 毎朝自動で通知する 機能を追加する（Laravelのスケジュール機能 Task Scheduling を活用）。

🔹 さいごに

本記事を通して、LaravelとDialogflowを組み合わせた実践的なアプリ開発 を体験できたと思います。
AIを活用したWebアプリの可能性は無限大です！✨

ぜひ今回学んだ内容を活かして、より便利なサービスやアプリを開発 してみてください！💪🔥

カテゴリー: AI、Laravel、アプリ開発

1. はじめに

🔹 この記事で学べること

🔹 必要な環境

🔹 実装する機能の流れ

2. Dialogflowのセットアップ

🔹 2-1. Google CloudでDialogflowのプロジェクトを作成

🔹 2-2. Dialogflowエージェントの作成

🔹 2-3. インテントの作成（ユーザー入力の処理）

🔹 2-4. Fulfillment（Webhook）の有効化

3. Laravelのセットアップ

🔹 3-1. Laravelプロジェクトの作成

🛠 新しいプロジェクトを作成する場合

🛠 既存のプロジェクトを使用する場合

🔹 3-2. 必要なパッケージのインストール

🔹 3-3. 環境変数（.env）の設定

🔹 3-4. Laravelのルート設定

🔹 3-5. コントローラーの作成

🎯 ここまでのまとめ

4. 天気予報API（OpenWeatherMapなど）との連携

🔹 4-1. OpenWeatherMap APIの登録

🔹 4-2. 天気情報を取得する関数を作成

① app/Services/WeatherService.php を作成

🔹 4-3. コントローラーで WeatherService を利用する

② app/Http/Controllers/DialogflowController.php を編集

🔹 4-4. 動作確認（APIテスト）

🎯 ここまでのまとめ

5. LaravelとDialogflowの連携

🔹 5-1. WebhookのエンドポイントをDialogflowに設定

🔹 5-2. Dialogflowのレスポンスをカスタマイズ

💡 リッチレスポンスを追加

💡 追加したポイント

🔹 5-3. Webhookの動作確認

🎯 ここまでのまとめ

6. フロントエンド（フォーム）の作成

🔹 6-1. ルートの設定

🔹 6-2. コントローラーの作成

🔹 6-3. ビュー（フォーム）の作成

🔹 6-4. 動作確認

🎯 ここまでのまとめ

7. 動作確認とデバッグ

🔹 7-1. 動作確認（フォーム & API）

✅ フォームからテスト

✅ Postman でAPIテスト

🔹 7-2. よくあるエラーと対処法

❌ 1. 「天気情報を取得できませんでした。」

❌ 2. 「DialogflowのWebhookが動作しない」

❌ 3. 「フォームでエラーが出る」

🔹 7-3. デバッグのコツ

🎯 ここまでのまとめ

8. まとめ

🔹 この記事で学んだこと

🔹 応用のアイデア

🔹 さいごに

コメントを残す コメントをキャンセル

VTuber必見！RVCでリアルタイム音声変換を実現する方法

ローカル環境でAI動画生成！Wan2.1 × ComfyUIを初心者向けに解説

① `app/Services/WeatherService.php` を作成

🔹 4-3. コントローラーで `WeatherService` を利用する

② `app/Http/Controllers/DialogflowController.php` を編集

コメントを残すコメントをキャンセル