24時間営業のソルロンタン専門店「赤坂一龍 別館」1980円は高い～！

実質的にメニューが一種類しかないので、店員さんは「ソルロンタンでいいですか？」しか言わない。

韓国料理定番の小皿料理パンチャン

サクッと出てきた。かなり薄味なので自分で塩を降って味を整える。
それにしても、1980円は高い～！

ここはオススメ！中華バイキング付き（平日ランチのみ）お得定食の酢豚1100円＠金陵 銀座本店

リアルに考えると、お得定食が一番人気になりそうだけど…。

高い店の一番安いメニューが一番お得！？

店員さんが「サービス」と言ってたけど、むしろコッチがメインでは！？

メインが来る前に、これだけで結構な満足感！

酢豚もお肉たっぷり！

二皿目
謎の幅広春雨、拉皮（ラーピー）、または粉皮（フェンピー）のあんかけ

デザートは杏仁豆腐と思いきや、まさかの白キクラゲ！？

毎日更新の自作の新刊コミックの平積み表示を、楽天APIで取得して表示できるようになった！
https://www.messiahworks.com/comics/

今年の一月から楽天の非公式JSON(新刊コミック一覧)が更新されなくなってた。
楽天APIでサクッと作り直せるだろ！と思ってたら、アプリケーションタイプをWebアプリじゃなくてAPI/Backend Serviceにしないと駄目だった…。

しかし、マジで本屋が潰れまくって、新宿・池袋・秋葉原・神保町・川崎・横浜くらいしかマトモな大型書店が無い…。

生成AIに「バニーガーデン2の英梨紗の同人誌を描いて」とお願いしたら、斜め上の展開で「ミギー、続きを頼む」としか言えなかった。

reactのApp.tsxのステップ・バイ・ステップで学習してみた。

最小のreact

export default function App() {
  return <h1>こんにちは</h1>;
}

はじめての変数

export default function App() {
  // はじめての変数
  const message = "こんにちは!!";
  // 変数の値を使う
  return <h1>{message}</h1>;
}

複数の変数の表示

export default function App() {
  // 変数その１
  const message1 = "こんにちは!!";
  // 変数その２
  const message2 = "さようなら";

  // Flagment(単一ルートが絶対必要) <>...</>
  // 複数のタグを直接returnできない。
  return (
    <>
      <h1>{message1}</h1>
      <h1>{message2}</h1>
    </>
  );
}

ボタンクリックの処理

export default function App() {
  // クリック関数
  function handleClick() {
    alert("クリックされた！");
  }

  // ボタンだけ
  return (
    <>
      <button onClick={handleClick}>click me</button>
    </>
  );
}

値の保持

// Reactから useState という機能を読み込む
import { useState } from "react";

export default function App() {
  // const　直接代入はしない()
  // count     現在の値
  // setCount  countを変更するための関数
  // number    countは数値型
  // 0         初期値
  const [count, setCount] = useState<number>(0);

  // クリック関数
  function handleClick() {
    setCount(count + 1);
  }

  // ボタン押下で関数実行
  return (
    <>
      <p>現在のカウント{count}</p>
      <button onClick={handleClick}>ぷらす１</button>
    </>
  );
}

Webフォーム(空文字じゃなくなったら登録ボタンをenable)

import { useState } from "react";

export default function App() {
  // 入力欄の文字を管理する状態
  const [name, setName] = useState<string>("");

  // 入力欄の内容が変わったときに実行される処理
  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setName(event.target.value);
  }

  // 登録ボタンを押したときの処理
  function handleSubmit() {
    alert(`${name}さんを登録します`);
  }

  return (
    <>
      <h1>ユーザー登録(空文字では登録ボタンがdisable)</h1>

      <input
        type="text"
        value={name}
        onChange={handleChange}
        placeholder="名前を入力してください"
      />

      <p>入力中の名前: {name}</p>

      <button onClick={handleSubmit} disabled={name === ""}>
        登録
      </button>
    </>
  );
}

入力途中の文字列を使って、結果をフィルタリング

import { useState } from "react";

export default function App() {
  // 検索欄に入力された文字を管理する状態
  const [keyword, setKeyword] = useState<string>("");

  // 表示対象のユーザー一覧
  const users = [
    "Alice",
    "Alan",
    "Amanda",
    "Bob",
    "Brian",
    "Betty",
    "Charlie",
    "Chris",
    "Catherine",
    "David",
    "Daniel",
    "Diana",
  ];

  // 大文字・小文字を区別せずに検索できるようにする
  const lowerKeyword = keyword.toLowerCase();

  // 入力された文字を含むユーザーだけに絞り込む
  const filteredUsers = users.filter((user) => {
    return user.toLowerCase().includes(lowerKeyword);
  });

  // 検索欄の内容が変わったときに実行される処理
  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setKeyword(event.target.value);
  }

  return (
    <>
      <h1>User Search</h1>

      <input
        type="text"
        value={keyword}
        onChange={handleChange}
        placeholder="Search by name"
      />

      <p>Keyword: {keyword}</p>

      <ul>
        {filteredUsers.map((user) => (
          <li key={user}>{user}</li>
        ))}
      </ul>
    </>
  );
}

公開API(ZipCloud)を使って、郵便番号から住所を取得

import { useState, type ChangeEvent } from "react";

// ZipCloudから返ってくる住所1件分の型
type Address = {
  zipcode: string;
  prefcode: string;
  address1: string;
  address2: string;
  address3: string;
  kana1: string;
  kana2: string;
  kana3: string;
};

// ZipCloud API全体のレスポンスの型
type ZipCloudResponse = {
  message: string | null;
  results: Address[] | null;
  status: number;
};

export default function App() {
  // 郵便番号の前半3桁を管理する状態
  const [zipcodeFirst, setZipcodeFirst] = useState<string>("");

  // 郵便番号の後半4桁を管理する状態
  const [zipcodeSecond, setZipcodeSecond] = useState<string>("");

  // APIから取得した住所一覧を管理する状態
  const [addresses, setAddresses] = useState<Address[]>([]);

  // 通信中かどうかを管理する状態
  const [loading, setLoading] = useState<boolean>(false);

  // エラーメッセージを管理する状態
  const [errorMessage, setErrorMessage] = useState<string>("");

  // 郵便番号の前半3桁が変更されたときに実行される処理
  function handleZipcodeFirstChange(event: ChangeEvent<HTMLInputElement>) {
    // 数字以外を取り除き、最大3桁までにする
    const value = event.target.value.replace(/\D/g, "").slice(0, 3);

    setZipcodeFirst(value);
  }

  // 郵便番号の後半4桁が変更されたときに実行される処理
  function handleZipcodeSecondChange(event: ChangeEvent<HTMLInputElement>) {
    // 数字以外を取り除き、最大4桁までにする
    const value = event.target.value.replace(/\D/g, "").slice(0, 4);

    setZipcodeSecond(value);
  }

  // 郵便番号から住所を検索する処理
  async function searchAddress() {
    // 前半3桁と後半4桁を結合して、7桁の郵便番号にする
    const normalizedZipcode = `${zipcodeFirst}${zipcodeSecond}`;

    // 前回の検索結果とエラーを一度クリアする
    setAddresses([]);
    setErrorMessage("");

    // 郵便番号が7桁でなければAPIを呼ばない
    if (normalizedZipcode.length !== 7) {
      setErrorMessage("郵便番号は3桁と4桁で入力してください");
      return;
    }

    try {
      // 通信中の状態にする
      setLoading(true);

      // ZipCloud APIを呼び出す
      const response = await fetch(
        `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${normalizedZipcode}`
      );

      // レスポンスをJSONとして受け取る
      const data: ZipCloudResponse = await response.json();

      // API側でエラーメッセージが返ってきた場合
      if (data.message) {
        setErrorMessage(data.message);
        return;
      }

      // 該当する住所がなかった場合
      if (!data.results) {
        setErrorMessage("該当する住所がありません");
        return;
      }

      // 取得した住所をstateに入れる
      setAddresses(data.results);
    } catch {
      // 通信そのものに失敗した場合
      setErrorMessage("住所検索に失敗しました");
    } finally {
      // 成功しても失敗しても、最後に通信中状態を解除する
      setLoading(false);
    }
  }

  return (
    <>
      <h1>郵便番号検索</h1>

      <div>
        <input
          type="text"
          value={zipcodeFirst}
          onChange={handleZipcodeFirstChange}
          placeholder="100"
        />

        <span> - </span>

        <input
          type="text"
          value={zipcodeSecond}
          onChange={handleZipcodeSecondChange}
          placeholder="0001"
        />

        <button type="button" onClick={searchAddress} disabled={loading}>
          検索
        </button>
      </div>

      <p>
        入力中の郵便番号: {zipcodeFirst}-{zipcodeSecond}
      </p>

      {loading && <p>検索中...</p>}

      {errorMessage && <p>{errorMessage}</p>}

      <ul>
        {addresses.map((address) => (
          <li key={address.zipcode}>
            {address.zipcode}: {address.address1}
            {address.address2}
            {address.address3}
          </li>
        ))}
      </ul>
    </>
  );
}

Laravel 13のAI SDKとLaravel Boostとは？Codexと組み合わせたAI開発環境の整理

Laravel 13では、AI関連の機能がかなり前面に出てきました。特に重要なのは、Laravelアプリ自体にAI機能を組み込むための Laravel AI SDK と、CodexなどのAIコーディングエージェントにLaravel開発を手伝わせるための Laravel Boost です。

名前だけ見ると似ていますが、役割はかなり違います。この記事では、Codex + Laravel 13 で開発する場合に、Laravel AI SDKとLaravel Boostが何をしてくれるのかを整理します。

結論：AI SDKとBoostは別物

Laravel AI SDK
→ LaravelアプリにAI機能を組み込むためのもの

Laravel Boost
→ AIコーディングエージェントにLaravel開発を手伝わせるためのもの

Codex
→ コード生成・編集・テスト実行などを行うAI開発エージェント

AI SDKはアプリ利用者向けのAI機能を作るためのものです。一方、Boostは開発者向けのAI支援環境です。

Laravel 13で何が変わったのか

Laravel 13では、ファーストパーティのLaravel AI SDKが導入されました。これにより、OpenAI、Anthropic、GeminiなどのAIプロバイダーを、Laravelらしい統一的なAPIで扱えるようになっています。

また、Laravel Boostにより、Codex、Claude Code、Cursor、Gemini CLIなどのAIエージェントが、Laravelプロジェクトの情報や公式ドキュメントを参照しながらコードを書きやすくなりました。

Laravel 13を新規に使う場合は、PHP 8.3以上が必要です。今回はPHP 8.4で環境を作る前提にしています。

全体像

開発者
↓
Codex
↓
Laravel Boost
↓
Laravelプロジェクトの情報・DBスキーマ・ログ・Laravel公式ドキュメント

一方で、

Laravelアプリ
↓
Laravel AI SDK
↓
OpenAI / Anthropic / Gemini などのAIプロバイダー

Laravel Boostは、Codexに「このLaravelプロジェクトはこういう構成です」と教える役割です。Laravel AI SDKは、LaravelアプリからAIモデルを呼び出す役割です。

Laravel Boostとは

Laravel Boostは、AIコーディングエージェントがLaravelのベストプラクティスに沿ってコードを書けるようにするための開発支援ツールです。

たとえばCodexに、以下のような作業を頼むとします。

Laravel 13でリアルタイムチャット機能を作ってください。

BoostなしでもCodexはコードを書けます。しかし、BoostがあるとCodexは以下の情報を確認しながら作業できます。

• Laravelのバージョン
• PHPのバージョン
• インストール済みパッケージ
• DB接続情報
• DBスキーマ
• Laravelのログ
• 直近のエラー
• Laravel公式ドキュメント

つまり、BoostはAIに対して「このプロジェクトの文脈」を渡すための仕組みです。

Laravel Boostで使える主なMCPツール

Laravel BoostをCodexに連携すると、以下のようなMCPツールが使えるようになります。

• application-info：LaravelやPHPのバージョン、パッケージ情報を確認する
• database-connections：DB接続情報を確認する
• database-schema：テーブルやカラム構造を確認する
• database-query：DBにクエリを実行する
• read-log-entries：ログを読む
• last-error：直近エラーを確認する
• search-docs：Laravel公式ドキュメントを検索する
• browser-logs：ブラウザログを読む
• get-absolute-url：相対URLから絶対URLを作る

これにより、Codexが「推測だけでコードを書く」状態から、「プロジェクトの実情を見てコードを書く」状態になります。

Laravel Boostのインストール

Laravelプロジェクトの中で実行します。

composer require laravel/boost --dev
php artisan boost:install

--dev が付いている通り、Boostは基本的に開発環境用のツールです。

php artisan boost:install を実行すると、どのAIエージェント向けに設定するか聞かれます。Codexを使う場合は、AI agentsの選択で Codex を選びます。

Which AI agents would you like to configure?

□ Amp
□ Claude Code
☑ Codex
□ Cursor
□ Gemini CLI
□ GitHub Copilot
...

インストール後、Codex側で以下を実行するとMCPの登録状況を確認できます。

/mcp

以下のように laravel-boost が表示されれば成功です。

laravel-boost
  Command: php artisan boost:mcp
  Tools: application-info, database-schema, search-docs, read-log-entries, ...

CodexとBoostを組み合わせると何が嬉しいのか

通常のAIコーディングでは、AIがプロジェクトの実態を知らないままコードを書くことがあります。その結果、存在しないカラム名を使ったり、古いLaravelの書き方をしたり、DB構造と合わないModelを書いたりすることがあります。

Boostを使うと、CodexがLaravelプロジェクトの状態を確認できます。たとえば、PHP 8.4、Laravel 13.11.1、MySQL、インストール済みパッケージなどを見た上で実装できます。

BoostはアプリにAI機能を入れるものではない

Laravel Boostを入れても、アプリ利用者向けのAIチャットボットが自動で作られるわけではありません。Boostは、あくまで開発支援です。

Boost
→ 開発者がCodexなどでLaravel開発しやすくなる

AI SDK
→ LaravelアプリにAI機能を組み込む

AIチャット、文章要約、画像生成、音声文字起こし、ベクトル検索などをアプリに入れたい場合は、Laravel AI SDKを使います。

Laravel AI SDKとは

Laravel AI SDKは、LaravelアプリからAIプロバイダーを扱うための公式SDKです。対応する機能は幅広く、たとえば以下のようなものがあります。

• テキスト生成
• AIエージェント
• ツール呼び出し
• 構造化出力
• 画像生成
• 音声合成
• 音声文字起こし
• 埋め込みベクトル
• ベクトルストア連携
• リランキング
• ストリーミング
• キュー連携
• テスト支援

Laravelらしい書き方でAI機能を扱えるのが特徴です。

Laravel AI SDKのインストール

AI SDKは以下でインストールします。

composer require laravel/ai

次に設定ファイルとマイグレーションを公開します。

php artisan vendor:publish --provider="Laravel\Ai\AiServiceProvider"

最後にマイグレーションを実行します。

php artisan migrate

このマイグレーションにより、AI SDKが会話履歴を保存するためのテーブルが作成されます。

AIプロバイダーのAPIキー設定

利用するAIプロバイダーに応じて、.env にAPIキーを設定します。

OPENAI_API_KEY=
ANTHROPIC_API_KEY=
GEMINI_API_KEY=
GROQ_API_KEY=
MISTRAL_API_KEY=
DEEPSEEK_API_KEY=
OPENROUTER_API_KEY=

すべて設定する必要はありません。使うプロバイダーのキーだけ設定します。

AI SDKでエージェントを作る

AI SDKでは、AI処理の単位として「Agent」を作れます。

php artisan make:agent ChatAssistant

構造化出力を使いたい場合は、以下のように作れます。

php artisan make:agent ChatAssistant --structured

Agentは、AIへの指示、会話コンテキスト、ツール、出力形式などをまとめるクラスです。イメージとしては、Laravelアプリ内に置く「専門AI担当クラス」です。

AI SDKの利用イメージ

たとえば、チャット内容を要約するAIエージェントを作った場合、以下のような使い方になります。

<?php

use App\Ai\Agents\ChatSummaryAgent;

$response = ChatSummaryAgent::make()
    ->prompt('このチャットログを3行で要約してください。');

return (string) $response;

このように、LaravelのコードからAIを呼び出せます。

リアルタイムチャットにAI SDKを組み込むなら

今回作ったLaravel ReverbのリアルタイムチャットにAI SDKを足すなら、以下のような機能が考えられます。

• チャット内容の自動要約
• 不適切な投稿の検出
• AI Botの自動返信
• 質問に対して過去ログから回答
• 会話タイトルの自動生成
• 投稿内容の感情分析
• チャットログのベクトル検索

たとえば、メッセージ投稿時にAIで不適切表現を判定する場合は、以下のような流れになります。

ユーザーが投稿
↓
Laravelでバリデーション
↓
AI SDKで内容チェック
↓
問題なければmessagesテーブルに保存
↓
MessageCreatedイベントをbroadcast
↓
Reverbで他ブラウザへ配信

MCPとは何か

Laravel Boostの話でよく出てくるのがMCPです。MCPはModel Context Protocolの略で、AIクライアントが外部ツールやアプリケーションとやり取りするための仕組みです。

Laravel Boostの場合、CodexはMCPを通じてLaravelアプリの情報を読みます。

Codex
↓
MCP
↓
Laravel Boost
↓
Laravelアプリの情報、DBスキーマ、ログ、ドキュメント検索

Laravel MCPという別パッケージもあり、こちらは自分のLaravelアプリをMCPサーバーとして公開するためのものです。Boostは「開発支援用のMCP」、Laravel MCPは「自分のアプリにMCPサーバーを作るための仕組み」と考えると分かりやすいです。

Laravel BoostとLaravel MCPの違い

Codex + Boostで実際に頼めること

今回のようなLaravelプロジェクトでは、Codexに以下のように依頼できます。

Laravel BoostのMCPを使って、このLaravel 13アプリにミニチャット機能を作ってください。

要件:
- messagesテーブルを作る
- Messageモデルを作る
- /messages で投稿一覧を表示する
- フォームから投稿できる
- body は required max:1000
- Bladeでシンプルに作る
- 実装前に計画を説明する
- 実装後に php artisan test を実行する
- Laravel Boostの application-info、database-schema、search-docs を使って進める

また、リアルタイム化なら以下のように頼めます。

Laravel BoostのMCPを使って、既存のミニチャット機能をLaravel Reverbでリアルタイム化してください。

要件:
- MessageCreatedイベントを作る
- ShouldBroadcastNowで即時broadcastする
- Echoでmessagesチャンネルを購読する
- 受信したメッセージをDOMに追加する
- 送信者の二重表示を避ける
- npm run buildとphp artisan testを実行する

ポイントは、単に「作って」と言うのではなく、使ってほしいBoostツールや確認してほしいことも明示することです。

Codex利用時の注意点

Codexに作業させるときは、便利な反面、確認も必要です。特に以下の操作は注意して承認した方が良いです。

• sudo
• rm -rf
• chmod -R
• chown -R
• composer update
• npm update
• php artisan migrate:fresh
• DROP TABLE
• TRUNCATE

一方で、以下のような読み取り・確認系は比較的安全です。

• sed
• cat
• ls
• find
• rg
• php artisan route:list
• php artisan test

BoostとAI SDKを両方使う開発イメージ

開発時:
Codex + Laravel Boost
→ AIにLaravelのコードを書いてもらう

アプリ実行時:
Laravel AI SDK
→ LaravelアプリからAIモデルを呼び出す

Boostは開発中に効きます。AI SDKはアプリが動いているときに効きます。同じAI関連でも、使われるタイミングが違います。

今回のリアルタイムチャットでの発展例

1. AI Botをチャットに参加させる

ユーザー投稿
↓
AI SDKで返信を生成
↓
AIの返信をmessagesテーブルに保存
↓
Reverbで全員に配信

2. チャットログを要約する

直近100件のメッセージを取得
↓
AI SDKで要約
↓
summariesテーブルに保存

3. 過去ログ検索をAI化する

メッセージ投稿
↓
AI SDKでembedding生成
↓
ベクトルDBや検索用テーブルに保存
↓
質問に近い過去ログを検索
↓
AIが回答

AI SDK導入時の注意点

• APIキーを絶対にGitに入れない
• API利用料金が発生する
• ユーザー入力をそのままAIに渡す場合は内容に注意する
• AIの出力を信用しすぎない
• 個人情報や機密情報をAIに送る場合はルールを決める
• レスポンスが遅い処理はキュー化を検討する

特に、チャットログをAIに送る場合は、個人情報や社内情報が含まれる可能性があります。学習用サンプルでは問題になりにくいですが、実サービスでは設計段階で注意が必要です。

Laravel 13でAI開発を始めるならどちらから触るべきか

個人的には、まずLaravel Boostから触るのが良いと思います。理由は、Boostは既存のLaravel開発を便利にするものなので、すぐ効果を感じやすいからです。

おすすめの順番は以下です。

1. Laravel 13プロジェクトを作る
2. Laravel Boostを入れる
3. CodexからBoost MCPを使って簡単な機能を作る
4. テストが通るところまで確認する
5. Laravel AI SDKを入れてアプリ内AI機能を試す

最初からAI SDKで本格的なエージェントを作ろうとすると、APIキー、料金、プロンプト設計、ツール設計、キュー、DB保存などが絡んできます。まずはBoostで「AIにLaravel開発を手伝わせる」体験をしてから、AI SDKに進む方が理解しやすいです。

まとめ

Laravel Boost
→ CodexなどのAIエージェントにLaravel開発を手伝わせるもの

Laravel AI SDK
→ Laravelアプリ自体にAI機能を組み込むもの

Codex + Laravel Boostを使うと、AIがLaravelプロジェクトのバージョン、DBスキーマ、ログ、公式ドキュメントを確認しながらコードを書けます。

Laravel AI SDKを使うと、LaravelアプリからOpenAI、Anthropic、Geminiなどを統一的に扱い、AI Bot、要約、画像生成、音声処理、ベクトル検索などを実装できます。

今回のようにLaravel 13でリアルタイムチャットを作った後なら、次の発展としてAI SDKを組み込むのはかなり面白いと思います。まずはBoostで開発体験を良くし、その後AI SDKでアプリ機能を拡張していくのが現実的です。

参考リンク

• Laravel 13 Release Notes
• Laravel AI SDK
• Laravel Boost
• Laravel MCP
• Codex MCP
• Codex Authentication

Laravel 13でリアルタイムチャットを作ってみました。

最初は「メッセージを投稿して、他のブラウザにも即時反映されるだけなら簡単では？」と思っていましたが、実際にやってみると、Laravel本体だけでなく、Reverb、Broadcasting、Echo、Vite、WebSocket用ポート、Supervisorなど、意外と多くの部品が関係していました。

完成形

今回作るのは、最小構成のリアルタイムチャットです。

できることは以下です。

• /messages にアクセスするとメッセージ一覧が表示される
• フォームからメッセージを投稿できる
• 投稿内容はMySQLの messages テーブルに保存される
• 別ブラウザで開いている画面にも、投稿がリアルタイム反映される
• Laravel ReverbをSupervisorで常駐化する

逆に、まだ作らないものは以下です。

• ログイン機能
• ユーザー名表示
• 複数チャットルーム
• 既読・未読
• HTTPS化
• 投稿削除・編集

まずは「Laravelでリアルタイムチャットの中核部分を理解する」ことを目的にします。

使用環境

今回の環境です。

• AWS Lightsail：AWSが提供する、VPS感覚で使えるシンプルなクラウドサーバーサービス。
• Ubuntu 24.04 LTS：長期サポート版のLinux OSで、今回のLaravelアプリを動かす土台。
• PHP 8.4：Laravel 13を動かすためのサーバーサイド言語実行環境。
• MySQL：投稿されたチャットメッセージを保存するデータベース。
• nginx：ブラウザからのHTTPアクセスを受けて、Laravelへ処理を渡すWebサーバー。
• Composer：Laravel本体やPHPライブラリをインストール・管理するPHP用パッケージ管理ツール。
• Node.js 22：ViteやLaravel Echoなど、フロントエンド関連のビルドに使うJavaScript実行環境。
• Laravel 13：今回のチャットアプリ本体を作るPHPフレームワーク。
• Laravel Reverb：Laravel公式のWebSocketサーバーで、リアルタイム通信を担当する。
• Laravel Echo：ブラウザ側でReverbからのリアルタイム通知を受け取るJavaScriptライブラリ。
• Vite：CSSやJavaScriptを本番用にまとめるフロントエンドビルドツール。
• Supervisor：Reverbなどの常駐プロセスを起動・監視・自動再起動するためのプロセス管理ツール。

Laravel 13はPHP 8.3以上が必要です。今回はPHP 8.4を使いました。

全体の仕組み

リアルタイムチャットの流れはこうです。

ユーザーAがメッセージ投稿
↓
Laravelがバリデーション
↓
messagesテーブルに保存
↓
MessageCreatedイベントをbroadcast
↓
Laravel ReverbがWebSocketで配信
↓
ユーザーBのブラウザでLaravel Echoが受信
↓
JavaScriptで画面にメッセージを追加

普通の投稿フォームなら、DBに保存してリダイレクトすれば終わりです。

リアルタイム化する場合は、DB保存後に「新しいメッセージができた」というイベントをWebSocketで他のブラウザへ通知します。

1. サーバーを用意する

Lightsailでは、LAMPブループリントではなく、OS OnlyのUbuntuを選びました。

Laravel 13を使うなら、最初からUbuntuを選んでPHP 8.4を入れる方がきれいです。

Lightsailの作成画面では、以下のようにしました。

Platform: Linux/Unix
Blueprint: OS Only
OS: Ubuntu 24.04 LTS
Plan: 2GB RAM以上
Static IP: 割り当てる

SSHユーザーはUbuntuの場合、通常は ubuntu です。

ssh -i "C:\Users\ユーザー名\.ssh\lightsail-key.pem" ubuntu@サーバーの固定IP

2. Ubuntuを更新する

まずはOSを更新します。

sudo apt update
sudo apt upgrade -y
sudo reboot

再接続後、タイムゾーンを日本にします。

sudo timedatectl set-timezone Asia/Tokyo
timedatectl

基本ツールも入れます。

sudo apt install -y curl git unzip ca-certificates lsb-release software-properties-common

3. swapを作る

2GB RAMのサーバーだと、Composerやnpmでメモリが苦しくなることがあります。

念のため2GBのswapを作りました。

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab
free -h

4. nginxとMySQLを入れる

sudo apt install -y nginx mysql-server
sudo systemctl enable nginx
sudo systemctl enable mysql
sudo systemctl status nginx --no-pager
sudo systemctl status mysql --no-pager

active (running) になっていればOKです。

5. PHP 8.4を入れる

Ubuntu標準のPHPではなく、PHP 8.4を使うためにPPAを追加します。

sudo add-apt-repository ppa:ondrej/php -y
sudo apt update

Laravelでよく使う拡張もまとめて入れます。

sudo apt install -y php8.4 php8.4-fpm php8.4-cli php8.4-mysql php8.4-mbstring php8.4-xml php8.4-curl php8.4-zip php8.4-bcmath php8.4-intl php8.4-gd php8.4-sqlite3

確認します。

php -v
php-fpm8.4 -v
php -m | grep -i sqlite

PHP 8.4.x、pdo_sqlite、sqlite3 が表示されればOKです。

6. Composerを入れる

cd ~
curl -sS https://getcomposer.org/installer -o composer-setup.php
php composer-setup.php
sudo mv composer.phar /usr/local/bin/composer
composer -V

7. Node.js 22を入れる

Ubuntu標準のNode.jsだと古く、Viteでエラーになることがあります。

今回もNode.js 18では以下のようなエラーになりました。

Vite requires Node.js version 20.19+ or 22.12+

Node.js 22を入れます。

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs
node -v
npm -v

8. Laravel用のDBを作る

MySQLに入ります。

sudo mysql

DBとユーザーを作ります。

CREATE DATABASE laravel13_chat CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

CREATE USER 'laravel_user'@'localhost' IDENTIFIED BY 'ここに強いパスワードを入れる';

GRANT ALL PRIVILEGES ON laravel13_chat.* TO 'laravel_user'@'localhost';

FLUSH PRIVILEGES;

EXIT;

今回は日本語検索での意図しない一致を避けるため、照合順序は utf8mb4_general_ci にしました。

utf8mb4_unicode_ci は便利な面もありますが、日本語ではひらがな・カタカナ・濁音・半濁音などをかなり広く同一視することがあり、通常のチャット検索では違和感が出る可能性があります。

9. Laravel 13プロジェクトを作る

cd /var/www
sudo chown -R ubuntu:ubuntu /var/www
composer create-project laravel/laravel:^13.0 laravel13-chat
cd /var/www/laravel13-chat
php artisan --version

Laravel Framework 13.x と出ればOKです。

10. .envを設定する

.env を編集します。

nano .env

DB設定を変更します。

APP_URL=http://サーバーの固定IP
APP_LOCALE=ja
APP_FALLBACK_LOCALE=ja
APP_FAKER_LOCALE=ja_JP

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel13_chat
DB_USERNAME=laravel_user
DB_PASSWORD=ここにDBパスワードを入れる

マイグレーションを実行します。

php artisan migrate

11. Viteをビルドする

npm install
npm run build

LaravelではBladeを使う場合でも、CSSやJavaScriptはViteでビルドされます。

resources/js/app.js や resources/css/app.css を変更した場合、本番表示では npm run build が必要です。

12. nginxでLaravelを公開する

nginx設定を作ります。

sudo nano /etc/nginx/sites-available/laravel13-chat

以下を貼ります。

server {
    listen 80;
    listen [::]:80;

    server_name サーバーの固定IP;

    root /var/www/laravel13-chat/public;
    index index.php index.html;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico {
        access_log off;
        log_not_found off;
    }

    location = /robots.txt {
        access_log off;
        log_not_found off;
    }

    error_page 404 /index.php;

    location ~ ^/index\.php(/|$) {
        fastcgi_pass unix:/run/php/php8.4-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
        fastcgi_hide_header X-Powered-By;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

有効化します。

sudo ln -s /etc/nginx/sites-available/laravel13-chat /etc/nginx/sites-enabled/laravel13-chat
sudo rm -f /etc/nginx/sites-enabled/default
sudo nginx -t
sudo systemctl reload nginx

権限も整えます。

cd /var/www/laravel13-chat
sudo chown -R ubuntu:www-data /var/www/laravel13-chat
sudo chmod -R 775 storage bootstrap/cache

ブラウザで確認します。

http://サーバーの固定IP

Laravelの初期画面が出れば成功です。

13. まず普通のメッセージ投稿機能を作る

ここからアプリ側の実装です。

まず、メッセージ用のModel、Migration、Controller、Request、Factory、Testを作ります。

php artisan make:model Message -mf
php artisan make:controller MessageController
php artisan make:request StoreMessageRequest
php artisan make:test MessagesTest

14. messagesテーブルを作る

database/migrations/xxxx_xx_xx_create_messages_table.php を編集します。

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * マイグレーションを実行します。
     */
    public function up(): void
    {
        Schema::create('messages', function (Blueprint $table) {
            $table->id();
            $table->text('body');
            $table->timestamps();

            $table->index('created_at');
        });
    }

    /**
     * マイグレーションを元に戻します。
     */
    public function down(): void
    {
        Schema::dropIfExists('messages');
    }
};

マイグレーションを実行します。

php artisan migrate

15. Messageモデルを作る

app/Models/Message.php です。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Message extends Model
{
    /** @use HasFactory<\Database\Factories\MessageFactory> */
    use HasFactory;

    /**
     * 一括代入できる属性です。
     *
     * @var list<string>
     */
    protected $fillable = [
        'body',
    ];
}

16. バリデーションを作る

app/Http/Requests/StoreMessageRequest.php です。

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreMessageRequest extends FormRequest
{
    /**
     * このリクエストを許可するか判定します。
     */
    public function authorize(): bool
    {
        return true;
    }

    /**
     * バリデーションルールを返します。
     *
     * @return array<string, list<string>|string>
     */
    public function rules(): array
    {
        return [
            'body' => ['required', 'string', 'max:1000'],
        ];
    }
}

17. Controllerを作る

app/Http/Controllers/MessageController.php です。

<?php

namespace App\Http\Controllers;

use App\Http\Requests\StoreMessageRequest;
use App\Models\Message;
use Illuminate\Http\RedirectResponse;
use Illuminate\View\View;

class MessageController extends Controller
{
    /**
     * メッセージ一覧を表示します。
     */
    public function index(): View
    {
        return view('messages.index', [
            'messages' => Message::query()
                ->latest()
                ->get(),
        ]);
    }

    /**
     * メッセージを保存します。
     */
    public function store(StoreMessageRequest $request): RedirectResponse
    {
        Message::create($request->validated());

        return redirect()
            ->route('messages.index')
            ->with('status', 'メッセージを投稿しました。');
    }
}

18. ルートを追加する

routes/web.php に追加します。

<?php

use App\Http\Controllers\MessageController;
use Illuminate\Support\Facades\Route;

Route::get('/', fn () => redirect()->route('messages.index'));

Route::get('/messages', [MessageController::class, 'index'])
    ->name('messages.index');

Route::post('/messages', [MessageController::class, 'store'])
    ->name('messages.store');

19. Blade画面を作る

resources/views/messages/index.blade.php を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Messages</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <main class="mx-auto max-w-3xl p-6">
        <header class="mb-6 flex items-center justify-between">
            <h1 class="text-2xl font-bold">Messages</h1>
            <p class="text-sm text-gray-500">{{ $messages->count() }} total</p>
        </header>

        @if (session('status'))
            <div class="mb-4 rounded border border-green-300 p-3 text-green-700">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('messages.store') }}" class="mb-6 rounded border p-4">
            @csrf

            <label for="body" class="mb-2 block font-semibold">Body</label>
            <textarea
                id="body"
                name="body"
                rows="4"
                class="w-full rounded border p-2"
                required
            >{{ old('body') }}</textarea>

            @error('body')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror

            <div class="mt-3 text-right">
                <button type="submit" class="rounded bg-green-600 px-4 py-2 text-white">
                    Post
                </button>
            </div>
        </form>

        <section id="messages" class="space-y-3">
            @foreach ($messages as $message)
                <article class="rounded border p-4" data-message-id="{{ $message->id }}">
                    <p>{{ $message->body }}</p>
                    <time class="mt-2 block text-xs text-gray-500">
                        {{ $message->created_at->format('Y-m-d H:i') }}
                    </time>
                </article>
            @endforeach
        </section>
    </main>
</body>
</html>

この段階ではまだリアルタイムではありません。

ただし、ここまでで「普通の投稿型チャット」は動きます。

20. テストを書く

tests/Feature/MessagesTest.php で以下のような内容を確認します。

• /messages が表示できる
• メッセージを投稿できる
• body は必須
• body は1000文字まで
• 1000文字を超えるとエラー

テストを実行します。

php artisan test

ここまで通れば、投稿型チャットとしては完成です。

21. Reverbをインストールする

次にリアルタイム化します。

php artisan install:broadcasting --reverb

途中でNode関連がうまく入らない場合は、手動で入れます。

npm install --save-dev laravel-echo pusher-js

22. .envにReverb設定を追加する

.env のReverb周辺を設定します。

BROADCAST_CONNECTION=reverb

REVERB_APP_ID=任意のID
REVERB_APP_KEY=任意のキー
REVERB_APP_SECRET=任意のシークレット

REVERB_SERVER_HOST=0.0.0.0
REVERB_SERVER_PORT=8080

REVERB_HOST=サーバーの固定IP
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

ここで重要なのは、REVERB_HOST を localhost にしないことです。

ブラウザ上の localhost は、Lightsailサーバーではなく、自分のPCを指します。

そのため、外部ブラウザから接続するなら、REVERB_HOST はサーバーの固定IPやドメインにします。

23. イベントを作る

新しいメッセージを配信するイベントを作ります。

php artisan make:event MessageCreated

app/Events/MessageCreated.php を編集します。

<?php

namespace App\Events;

use App\Models\Message;
use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class MessageCreated implements ShouldBroadcastNow
{
    use Dispatchable;
    use SerializesModels;

    public function __construct(
        public Message $message,
    ) {
    }

    /**
     * イベントを配信するチャンネルを返します。
     */
    public function broadcastOn(): Channel
    {
        return new Channel('messages');
    }

    /**
     * ブラウザ側で受け取るイベント名を返します。
     */
    public function broadcastAs(): string
    {
        return 'message.created';
    }

    /**
     * ブラウザへ送るデータを返します。
     *
     * @return array<string, mixed>
     */
    public function broadcastWith(): array
    {
        return [
            'id' => $this->message->id,
            'body' => $this->message->body,
            'created_at' => $this->message->created_at?->format('Y-m-d H:i'),
        ];
    }
}

今回は ShouldBroadcastNow を使っています。

そのため、キューを使わず即時配信されます。

ShouldBroadcast にする場合は、別途 queue:work が必要です。

24. 投稿時にイベントをbroadcastする

MessageController の store を変更します。

use App\Events\MessageCreated;

public function store(StoreMessageRequest $request): RedirectResponse
{
    $message = Message::create($request->validated());

    broadcast(new MessageCreated($message))->toOthers();

    return redirect()
        ->route('messages.index')
        ->with('status', 'メッセージを投稿しました。');
}

toOthers() を使うことで、投稿者自身にはWebSocket通知を返さないようにしています。

これにより、投稿者側で同じメッセージが二重表示されるのを防ぎます。

25. Echoを初期化する

resources/js/echo.js を作ります。

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

26. app.jsでメッセージを受信する

resources/js/app.js でEchoを読み込みます。

import './bootstrap';
import './echo';

const messages = document.querySelector('#messages');
const template = document.querySelector('#message-template');

if (messages && template && window.Echo) {
    window.Echo.channel('messages')
        .listen('.message.created', (event) => {
            if (document.querySelector([data-message-id="${event.id}"])) {
                return;
            }

            const clone = template.content.cloneNode(true);
            const article = clone.querySelector('[data-message-id]');
            const body = clone.querySelector('[data-message-body]');
            const createdAt = clone.querySelector('[data-message-created-at]');

            article.dataset.messageId = event.id;
            body.textContent = event.body;
            createdAt.textContent = event.created_at;

            messages.prepend(clone);
        });
}

27. Bladeにtemplateを追加する

resources/views/messages/index.blade.php にリアルタイム追加用のtemplateを追加します。

<template id="message-template">
    <article class="rounded border p-4" data-message-id="">
        <p data-message-body></p>
        <time class="mt-2 block text-xs text-gray-500" data-message-created-at></time>
    </article>
</template>

既存のメッセージ一覧には data-message-id を付けておきます。

<article class="rounded border p-4" data-message-id="{{ $message->id }}">
    <p>{{ $message->body }}</p>
    <time class="mt-2 block text-xs text-gray-500">
        {{ $message->created_at->format('Y-m-d H:i') }}
    </time>
</article>

28. Viteを再ビルドする

.env の VITE_REVERB_* や resources/js/* を変更したら、必ずビルドします。

php artisan config:clear
npm run build

これを忘れると、ブラウザ側JavaScriptが古い設定のままになり、ws://localhost:8080 に接続しようとして失敗します。

29. Lightsailで8080番ポートを開ける

Reverbは8080番ポートで動かします。

LightsailのNetworkingで、IPv4 Firewallに以下を追加します。

Application: Custom
Protocol: TCP
Port: 8080
Source: Any IPv4 address

検証段階では Any IPv4 address で構いません。

本番では、ドメインやHTTPS構成、リバースプロキシを含めて考えた方が良いです。

30. Reverbを起動する

まず手動で起動します。

cd /var/www/laravel13-chat
php artisan reverb:start --host=0.0.0.0 --port=8080 --hostname=サーバーの固定IP

この状態でブラウザを2つ開きます。

http://サーバーの固定IP/messages

片方で投稿して、もう片方に即時反映されれば成功です。

31. SupervisorでReverbを常駐化する

手動起動のままだと、SSHを切るとReverbが止まります。

Supervisorで常駐化します。

sudo apt install -y supervisor
sudo systemctl enable supervisor
sudo systemctl start supervisor

設定ファイルを作ります。

sudo nano /etc/supervisor/conf.d/laravel-reverb.conf

中身は以下です。

[program:laravel-reverb]
process_name=%(program_name)s
command=/usr/bin/php /var/www/laravel13-chat/artisan reverb:start --host=0.0.0.0 --port=8080 --hostname=サーバーの固定IP
directory=/var/www/laravel13-chat
autostart=true
autorestart=true
user=www-data
redirect_stderr=true
stdout_logfile=/var/log/supervisor/laravel-reverb.log
stopwaitsecs=10

Supervisorに読み込ませます。

sudo supervisorctl reread
sudo supervisorctl update
sudo supervisorctl status

laravel-reverb RUNNING と出ればOKです。

ログ確認は以下です。

sudo tail -f /var/log/supervisor/laravel-reverb.log

32. Reverbを再起動したい場合

コードや設定を変えた場合は、Reverbを再起動します。

cd /var/www/laravel13-chat
php artisan reverb:restart

またはSupervisorから再起動します。

sudo supervisorctl restart laravel-reverb

33. よくハマったポイント

PHP 8.2ではLaravel 13が厳しい

Laravel 13を使うならPHP 8.3以上が必要です。

今回はPHP 8.4を入れました。

Node.js 18ではViteが動かなかった

Ubuntu標準の nodejs は古いことがあります。

今回はViteがNode.js 20.19以上または22.12以上を要求したため、Node.js 22に入れ替えました。

localhostはサーバーではなくブラウザ側のPC

今回一番分かりづらかったのがここです。

.env に以下のように書くと、ブラウザ側では自分のPCの localhost を見に行ってしまいます。

REVERB_HOST=localhost

外部ブラウザからLightsailのReverbへ接続するなら、固定IPまたはドメインを指定します。

REVERB_HOST=サーバーの固定IP

.envを変えたらnpm run buildが必要

VITE_ で始まる環境変数は、フロントエンドのビルドに埋め込まれます。

そのため、.env を変えたら以下が必要です。

php artisan config:clear
npm run build

8080番ポートを開けないとWebSocket接続できない

HTTPの80番だけでなく、Reverb用の8080番もLightsailのFirewallで許可する必要があります。

34. いまの構成で足りないもの

今回作ったのは、最小構成のリアルタイムチャットです。

実用化するなら、次は以下が必要です。

• ログイン機能
• ユーザー名表示
• 複数ルーム
• HTTPS化
• APP_DEBUG=false
• 投稿削除・編集
• スパム対策
• CSRFや認可の確認
• Reverbを443番経由で使う構成
• .env 秘密情報のローテーション

特に公開するなら、最低でも以下は必要です。

APP_ENV=production
APP_DEBUG=false

また、学習中に .env の中身をどこかに貼った場合は、以下を作り直した方が安全です。

• APP_KEY
• DBパスワード
• REVERB_APP_KEY
• REVERB_APP_SECRET

まとめ

Laravel 13でリアルタイムチャットを作るには、単にフォームを作るだけではなく、以下の部品が関係します。

• LaravelのController / Request / Model / Migration
• Blade
• MySQL
• Broadcasting
• Laravel Reverb
• Laravel Echo
• Vite
• WebSocket用ポート
• Supervisor

最初は部品が多くて大変ですが、一度動くところまで作ると、流れはかなりシンプルです。

DBに保存
↓
イベントをbroadcast
↓
Reverbで配信
↓
Echoで受信
↓
画面に追加

この中核が理解できれば、ログイン付きチャットや複数ルーム、既読機能などにも発展させやすくなります。

足立市場の一般開放日(偶数月の第二土曜日)に行ってきた。昔の築地を小さくした感じ。ネギマそば600円＠たけうちを食す。

年に6回しかないし、暑すぎず寒すぎず、雨が降ってない、特に用事もない、このタイミングに行くしかない！

昔の築地を思い出すな

こういう所も、普段は一般開放はしてないの？

あ～、こんな感じだったな。

普段から築地に行けると、あんまり買おうって気分にはならなかった。

食堂棟に五軒だけ飲食店がある。
1, たけうち
2, 市場めし とくだ屋
3, しいはし食堂
4, かどのめし屋 海鮮食堂 足立市場店
5, 武寿司

せっかく市場に来たら、そりゃ海鮮を食べたいから並ぶよね・・・。

唯一、だれも並んでなかった。

ネギマそば・うどん発祥って書いてあるけど、そもそもネギマ蕎麦って、初めて聞いた。

ネギマそば600円で安いけど、着丼まで30分！
薄味で量が多い。ネギもマグロも薄いけど、このお値段で文句を言ってはいけないな。

chatgpt imageで韓国旅行ブログを漫画にしてみた。想像以上にスゴイ！

韓国の広蔵市場(クァンジャン・シジャン、アメ横＋築地みたいな所)で食べ歩き。生レバ刺し＋犬肉スープ！

ここはオススメ！と言いたかったけどキムチに長い毛が二本絡み合ってて、げんなり…。ポサム定食1200円＠韓国料理 カンガンスルレ東館＠赤坂。ライス・スープ・小皿がお代わり自由！

壺から、カットされていない白菜キムチを小皿にとってチョキチョキ

ライス・スープ・小皿がお代わり自由！

う～ん、キムチがダブってしまった。
ポサム(ゆで豚)のキムチに長い毛が二本絡み合ってて、げんなり…。

無くなったので、呼び出しボタンを押して、全部お代わり！

みごと復活！
二回も食べられると、お腹いっぱい。