Vue on ララジャパン

OpenAIのレスをHTML表示

Sat, 14 Oct 2023 02:31:28 +0900

前回で作成したOpenAIチャットのデモはいろいろと改善点が盛りだくさんです。その１つは、OpenAIからのレスはテキストなのですがMarkdownの形式で来ます。今回はこの表示をHTMLに変換します。

OpenAIからのレス

OpenAIからのレスは以下のようなテキストできます。

 2023年10月4日以降の日本の祝日は以下の通りです：

- 体育の日（スポーツの日）：10月9日
- 文化の日：11月3日
- 勤労感謝の日：11月23日

12月から年末までの祭日はありません。

MarkdownのWikiを参照すると、上で使用されているハイフン（‐）は、順序無しリストのアイテム、HTMLでは

の使用ということになります。しかし、これを無視すると以下のような表示（前回）となります。無視しないでHTMLに変換して、のように表示したいです。

ソースコード
今回の機能を追加したソースコードは、前回のOpenAIチャットをもとにして違うgitブランチ（chat-openai-markdown）としました。レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。
```
$ git fetch
$ git checkout chat-openai-markdown
```
を実行してブランチをゲットできます。前回のブランチのchat-openaiとの差分は以下です。
```
$ git diff chat-openai --name-status
M       package-lock.json
M       package.json
M       resources/js/components/ChatMessages.vue
```
MarkdownのテキストからHTMLの変換のために、今回はmarkdown-itのパッケージが必要です。それゆえに以下の実行が必要です。
```
$ npm install
```
最後に、前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。
```
$ npm run build
$ php artisan serve
```
markdown-itをChatMessages.vueに取り込む
差分で見たように、今回コードの変更はChatmessages.vueのみです。サーバー側ではなくフロントエンドでHTML変換です。以下のコードで変更の部分にコメントしました。非常に簡単です。
ChatMessages.vue
```js // 以下は変換後のスタイル設定
```
以下は、コードのMarkdownをHTML変換した例です。

<a href="markdown2.png"><img src="markdown2.png" alt="" width="932" height="458" class="alignnone size-full wp-image-8814" /></a>
```

OpenAIとチャット

Tue, 10 Oct 2023 00:22:02 +0900

OpenAIとのチャットを作成します。ChatGPTのように、ログインした会員がメッセージ（質問）を送信したら、Open AIが答えるというものです。メッセージはOpen AIのAPIを使用して送信しますが、AIのレスは時間がかかる（長いときは６０秒以上）ので、この部分を非同期の対応とします。非同期の対応にはいくつか方法がありますが、ここではシンプルにartisanのコマンドをバックグラウンドのプロセスとして実行します。そして、前回のNotificationを使って答えが来たらWebscoketを通して表示とします。

欲しい機能

デモとして簡単にするために、今までのログインした会員の間でのチャットとは違い、１対１のチャット、ここではログインした会員（太郎くんが私）が質問者で、花子さんがAIとなります。

Open AIでアカウントを登録

Open AIのAPIを使うのでAPIのキーがまず必要となりますが、Open AIのサイトでアカウントの登録が必要です。Pusherの登録と違い、ステップが多いので辛抱を。基本的にアカウント情報（メールアドレス、パスワード）を入力して、Eメールをもらう。Eメールの確認リンクから、今度は名前と生年月日を入れて、さらに電話番号を入れてスマホでテキストコードを受け取り、それを入力して登録完了です。

まず、以下のリンクに行きます。

https://openai.com

Loginをクリックすると、

Signupをクリックすると、

さらに、

パスワードの入力して完了すると、登録したメールアドレスに以下のようなメールが来ます。

メール確認のボタンをクリックすると、今度は、

名前と生年月日を入力すると（真ん中の組織名はオプションです）、

ここに電話番号を入力してボタンをクリックすると、あなたのスマホにショートメールでコードが送られます。それを正しく次の画面で入力するとやっと登録完了です。

APIのキーをゲット

次にAPIのキーの取得です。まず、以下へ行きます。 https://platform.openai.com/account/api-keys

そこで「Create new secret key」のボタンをクリックすると、以下のダイアログが表示されます。

そのダイアログで、キーのタイトルを入れて（オプションなので入れなくてもよい）、「Create secret key」のボタンを押すと、

キーが作成されます。この値が後のプログラムの設定で必要となります。「Done」のボタンを押したらもうキーの値が見ることができないので必ずどこかにコピペで記録を。

ソースコード

今回の機能を追加したソースコードは、前回の会員チャットをもとにして違うgitブランチ（chat-openai）としました。

レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。

$ git fetch
$ git checkout chat-openai

を実行してブランチをゲットできます。

masterとの差分は以下です。

$ git diff master --name-status
A       app/Console/Commands/OpenAICommand.php
D       app/Events/MessageSent.php
M       app/Http/Controllers/ChatsController.php
A       app/Notifications/OpenAINotification.php
M       composer.json
M       composer.lock
A       config/openai.php
M       resources/js/chat.js
M       resources/views/layouts/app.blade.php
M       routes/channels.php

会員間のメッセージのやりとりはないので、MessageSentのイベントは削除しています。また、以下のopenaiのphpのライブラリを使用するので、composer.jsonが更新されています。 https://github.com/openai-php/client

それゆえに、以下の実行が必要です。

$ composer install

そして、Open AIの設定のために、.envの編集も必要です。

.env

...
OPENAI_API_KEY=
OPENAI_REQUEST_TIMEOUT=60
OPENAI_USER_ID=2
OPENAI_MODEL=gpt-4

OPENAI_API_KEYには上で取得したキーを入れてください。OPENAI_USER_IDは花子さんのusers.idです。OPEN_MODELは使用するOpen AIのモデルです。最新が、gpt-4ですがコストを考えるなら、gpt-3.5-turboをお勧めします。

最後に、前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。

$ npm run build
$ php artisan serve

必ずここを読む

Open AIのアカウントの作成の際に、無料で５ドル分の３ヶ月有効なAPIの使用が可能となります（この記事を書いた時点ですがすでにアカウントを持っていた故に確認できず）。５ドルでも結構なテストはできます。しかし、コストは使用するモデル（gpt-3, gtp-4など）や送信と受信する文字数により変わります。実際は使用される言語のトークン数なので、事前にいくらとなるかの計算は簡単にできません。

使用したコストは以下でチェックできます。 https://platform.openai.com/account/usage

今回のデモは最新の質問だけをOpen AIに尋ねるという形式にしているので、ChatGPTのような複数のOpen AIとの対話とはなりません（以下のような）。APIではChatGPTのようにセッションを保つ機能がないのです。その代わりにこちらのプログラムで過去のすべての対話（メッセージ）とともに新たな質問（メッセージ）をAPIに送るということをする必要があります。そのコードもコメントしてOpenAICommand.phpのコードに入れてありますので、試すことも可能です。しかし、メッセージを作成するごとにトークン数が増えていくのでコストに注意をしてください。

特定の会員にリアルタイムでお知らせ

Wed, 04 Oct 2023 23:08:18 +0900

LaravelのNotificationはEメールやSMSなど多用なチャンネルへの情報発信に便利なものですが、その１つのチャンネルとしてbroadcastがあります。今回は、それを使用してチャットと同様にリアルタイムで情報をユーザーに発信します。

欲しい機能

簡単なデモとして、tinkerで以下のように、登録しているユーザー（ここでは太郎さん）にHello!というメッセージをNotificationを使用して送信します。

tinker

> use App\Notifications\Toast;
> $user = User::first();
> $user->notify(new Toast('Hello!'));

太郎さんがログインしてチャット画面にいるとして、

のように画面の右下隅にBootstrap５のToastがポップアップして情報を伝えます。

ソースコード

今回の機能を追加したソースコードは、前回の会員チャットをもとにして違うgitブランチ（chat-notification）としました。

レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。

$ git fetch
$ git checkout chat-notification

を実行してブランチをゲットできます。

masterとの差分は以下です。

$ git diff master --name-status
A       app/Notifications/Toast.php
M       resources/js/bootstrap.js
M       resources/js/chat.js
A       resources/js/components/ChatToast.vue
M       resources/views/chat.blade.php
M       resources/views/layouts/app.blade.php
M       routes/channels.php

前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。

$ npm run build
$ php artisan serve

送信側

特定のユーザーにNotificationを使用してEメールの送信の仕方は、過去にこちらで説明しました。

Websocketを使用して送信するには、以下のようにNotificationの定義においてbroadcastを指定します。

Toast.php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Notifications\Messages\BroadcastMessage;

class Toast extends Notification
{
...
    /**
     * Get the notification's delivery channels.
     *
     * @return array<int, string>
     */
    public function via(object $notifiable): array
    {
        return ['broadcast'];
    }

    /**
     * Get the broadcastable representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return BroadcastMessage
     */
    public function toBroadcast($notifiable)
    {
        return new BroadcastMessage([
            'name'    => $notifiable->name,
            'message' => $this->message,
        ]);
    }
...

そして送り先のユーザーのインスタンスのモデルでは、以下のようにNotifiableのトレイトがあることが必要です。

namespace App\Models;

// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
...

最終的に以下のようなコードで送信します。

use App\Notifications\Toast;
$user = User::first();
$user->notify(new Toast('Hello!'));

ToastのNotificationはイベントとしてPusher側で受け取りクライアントに流します。以下は、その直後のPusherのDebug Consoleでの画面です。Pusher側では、チャンネル名は private-App.Models.User.1となっていて、イベントは、Illuminate\Notifications\Events\BroadcastNotificationCreatedとLaravelのイベントとなっていますね。

クライアント

クライアント側では、チャット同様にPusherからの情報を受け取るためのコードが必要となりますが、チャットのlistenではなく、notificationとなります。

chat.js

...
createApp({
    setup () {
        const messages = ref([]);
        const toast = ref({});

        fetchMessages();

        window.Echo.private('chat')
            .listen('MessageSent', (e) => {
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            });

        window.Echo.private('App.Models.User.' + window.userId)
            .notification((notification) => {
                toast.value = notification;
            });
...

しかし、特定した以外のユーザーのサーバーからの情報が流れては困るので、チャット同様にこのためのプライベートチャンネル購読の認証が必要となります。プライベートチャンネル名は、App.Models.User.ユーザーID と特定のユーザーのためなユニークなチャンネル名となります。

クライアントにおいてそのユーザーのIDをサーバーから取得するために、以下のようなレイアウトのテンプレートに工夫が必要となります。

app.blade.php

...
   @auth
        <script>
            window.userId = {{ auth()->user()->id }};
        </script>
    @endauth
</body>
</html>

そして認証時には、以前にここで説明したように、サーバー側での認証となります。

channels.php

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Broadcast;

/*
|--------------------------------------------------------------------------
| Broadcast Channels
|--------------------------------------------------------------------------
|
| Here you may register all of the event broadcasting channels that your
| application supports. The given channel authorization callbacks are
| used to check if an authenticated user can listen to the channel.
|
*/
// Notificationのプライベートチャンネルの認証
Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

// チャットのプライベートチャンネルの認証
Broadcast::channel('chat', function ($user) {
    return Auth::check();
});

複数のユーザーにnotify

Notificationは、以下のように複数のユーザーに一括しての情報送信も可能です。

$users = User::all();
Notification::send($users, new Toast('Hi!'));

しかし、以下のPusherのDebug Consoleで見られるようにユーザーの人数分だけウェブサーバーからPusherサーバーにイベント情報が流れます。それぞれで情報が異なる（今回の例では名前の情報が異なる）なら別ですが、まったく同じ情報を送信するなら効率的ではありません。そのようなときはチャットと同様にログインした会員すべてに対してのイベントとして送信した方がよいです。

会員チャット　現在参加している会員リスト

Fri, 22 Sep 2023 06:58:32 +0900

会員チャットデモに機能を追加します。今度は違う機能で、現在参加している会員リストをリアルタイムで表示します。会員がログインしたらその会員名が追加され、会員がログアウトしたら削除されます。これもグループチャットではよくある機能です。

欲しい機能

私が太郎さんとしてログインすると、上の右の場所に、現在チャットに参加している会員名をダイナミックでリストします。すでに花子さんがチャット画面を閲覧しています。

ここで、花子さんがログアウトすると上のリストから自動的に削除されます。今回は、この機能をPusherのプレゼンスチャンネル（後に説明）を使用して作成します。

ソースコード

今回の機能を追加したソースコードは、前回の会員チャットをもとにして違うgitブランチ（chat-presence）としました。

レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。

$ git fetch
$ git checkout chat-presence

を実行してブランチをゲットできます。

masterとの差分は以下の４つのファイルのみです。

$ git diff master --name-status
M       app/Events/MessageSent.php
M       resources/js/chat.js
M       resources/views/chat.blade.php
M       routes/channels.php

前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。

$ npm run build
$ php artisan serve

サーバー側の変更

今回は、Pusherで使用するチャンネルの形態が変わるために、ブロードキャストするチャンネルがプライベートチャンネルからプレゼンスチャンネルに変わります。プレゼンスチャンネルは基本的にはプライベートチャンネルと同じですが、プライベートチャンネルと違って現時点誰が参加しているかを追跡することが可能です。

その変更のために以下の２つファイルが編集されています。

使用するチャンネルのクラスを、PrivateChannelからPresenceChannelに変えます。

MessageSent.php

...
     public function broadcastOn()
     {
         // return new PrivateChannel('chat');
         return new PresenceChannel('chat');
     }
...

プレゼンスチャンネルでは、認証の返し値は、プライベートチャンネルのOKならブーリアンはなく、認証された会員名を属性とした配列を返します。

channels.php

...
 Broadcast::channel('chat', function ($user) {
    // return Auth::check();
     if (Auth::check()) {
         return ['name' => $user->name];
     }
 
     return false;
 });

クライアント側の変更

クライアントのchat.jsでも、プライベートチャンネル（private）からプレゼンスチャンネル（join）への変更あります。また、会員の出入りの追跡のために、here(), joining(), leaving()が新たに使用されています。メッセージの受信（listen）は変わりません。

chat.js

...
createApp({
    setup () {
        const messages = ref([]),
            members = ref([]);　// 参加会員リスト

        fetchMessages();

        window.Echo.join('chat') // privateからjoinに
            .here(users => { // 現在のリスト
                members.value = users;
            })
            .joining(user => { // 参加した会員を追加
                members.value.push(user);
            })
            .leaving(user => { // 抜けた会員を削除
                members.value.splice(members.value.indexOf(user), 1);
            })
            .listen('MessageSent', (e) => { // こちらはそのまま使用可能
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            });
  ...

        return {
            members, // コンポーネントで利用できるように
            messages,
            fetchMessages,
            addMessage
        }
    }
})
.component('chat-messages', ChatMessages)
.component('chat-form', ChatForm)
.mount('#app');

ブレードでは以下の部分を追加しています。

...
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">参加会員</div>
                <div class="card-body">
                    <ul>
                        <li v-for="member in members" v-text="member.name"></li>
                    </ul>
                </div>
            </div>
        </div>
...

プレゼンスチャンネル

PusherのDebugコンソールで、イベントのリストを見てみましょう。表示は新から旧への順番です。

リストを下から見ていくと、まず花子さんがログインすると、pusher_internal:member_addedとしてPusherのイベントが作成され接続している他の会員にWebsocketで知らせます。ログアウトすると、今度はpusher_internal:member_removedのイベントが作成されてPusherのサーバーが他の会員へ知らせます。

会員チャット　〇〇さんがタイプしています…

Wed, 20 Sep 2023 01:27:24 +0900

会員チャットデモに機能を追加します。自分以外の誰かがタイプし始めたら、それをリアルタイムで知らせる機能です。チャットなら必ずある機能です。※9/23日にコード修正変更あります！！

欲しい機能

私は太郎さんとして会員ログインをしてチャット画面にいます。花子さんが、送信メッセージをタイプし始めると以下のように、「花子さんがタイプしています…」のメッセージが表示されます。

花子さんがタイプしているときには上の「タイプしています…」は表示されますが、暫くタイプを休憩したら上の「タイプしています…」は消えます。その後花子さんはメッセージを送信するかもしれませんし、しないかもしれません。

これが欲しい機能です。

Pusherでの設定

プログラムを始める前に、PusherのアカウントにおいてEnable client eventsをオンとする必要あります。

今回は、このクライアントイベント（後に説明）の機能を使います。

ソースコード

今回の機能を追加したソースコードは、前回の会員チャットをもとにして違うgitブランチ（chat-whisper）としました。

レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。

$ git fetch
$ git checkout chat-whisper

を実行してブランチをゲットできます。

masterとの差分は以下の３つのファイルのみです。

$ git diff master --name-status
M       resources/js/chat.js
M       resources/js/components/ChatForm.vue
M       resources/views/chat.blade.php

前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。

$ npm run build
$ php artisan serve

Whisper

まずクライアントのchat.jsでの変更を見てみましょう（最後に9/23の修正のコードがあるので比べてみてください）。

chat.js

createApp({
    setup () {
        const messages = ref([]),
            typer = ref(false),
            typing = ref(false);

        fetchMessages();

        window.Echo.private('chat')
            .listen('MessageSent', (e) => {
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            })
            .listenForWhisper('typing', (e) => {
                // タイプしている会員名を受信して、「〇〇さんがタイプしています」を表示
                typer.value = e.typer;
                typing.value = true;

                // ２秒経過したら、「〇〇さんがタイプしています」のメッセージを非表示
                setTimeout(() => {
                    typer.value = false;
                    typing.value = false;
                }, 2000);
            });
...

        function isTyping(e) {
            // タイプを開始して300ms経過したら、タイプした会員名を送信
            // 300msごとにイベントを送信することで、Pusherへの送信の回数を減らしています
            // Pusherの制限は１秒に最高１０まで
            setTimeout(() => {
                window.Echo.private('chat')
                    .whisper('typing', {
                        typer: e.user.name
                    });
            }, 300);
        }
...

前回チャットのソースコードと違うのは、プライベートチャンネルのchatのリスナーにおいて、自分宛てのメッセージのイベント（MessageEvent）だけでなく、listenForWhisper()の関数を用いて、typingのイベントも聞いていることです。そこでは、typingのイベントがあれば、画面に「〇〇さんがタイプしています」を表示します。

また、自身のキーボートのタイプのイベントをPusherのサーバーに送るために、isTyping()の関数の定義も追加されています。この関数はキーボードのタイプのイベントにバインドされていて（後に説明）、タイプを開始するとPusherのサーバーにタイプしている会員名を含んでtypingイベントとして送ります。

以下は、Pusher側でのDebug Consoleのログですが、client-typingのイベントをたくさん受信しているのがわかります。花子さんがタイプしていることがわかりますね。イベント名の、client-typingのclient-はLaravel Echoがプリフィックスしています。

掘り下げてvuejsの世界へ

chat.jsのisTypingでタイプしているイベントをPusherのサーバーに送っているのはわかりました。さて、その関数はどのように使われているか、掘り下げて見てみます。今度は、vuejsの世界です。

まず、以下のブレードで先のisTypingの関数がchat-formのコンポーネントのistypingというvueのカスタム定義のイベントにバインドされています。

chat.blade.php

...
   <chat-form v-on:messagesent="addMessage" v-on:istyping="isTyping" :user="{{ auth()->user() }}"></chat-form>
...

そして、chat-formのコンポーネントのソースChatForm.vueを見ると、input文内で@keydown = “isTyping”でキーボードをタイプするイベント（keydown）とバインドしています。ややこしいですが、そこでのisTypingは先のとは違いコンポーネント内で定義の関数で、タイプしている会員オブジェクトをデータとしてistypingのイベントとして送信しています。ちなみに、@keydown.enter=“sendMessage”の方は、メッセージをタイプした後に送信するためにEnterキーを押したときのイベントです。

ChatForm.vue

...
function isTyping(e) {
  emit("istyping", {
    user: props.user
  });
}
</script>

<template>
  <div class="input-group">
    <input
      type="text"
      class="form-control"
      placeholder="メッセージをタイプしてください..."
      v-model="newMessage"
      @keydown = "isTyping"
      @keydown.enter="sendMessage"
    />
...
</template>

クライアントイベント

今回は、Pusherのクライアントイベントを使用した機能です。クライアントイベントでは、クライアント（太郎や花子のブラウザ）とPusherサーバーのみの間でのWebsocketの通信で、ウェブサーバーを通してLaravelのプログラムにアクセスする通信（Http）がまったくありません。　

修正

読者からの指摘により、9/23日以前にアップしたコードにおいて、chat.js（上に掲載したコード）に問題あることがわかりました。以下のように修正されています。以前のコードでも動作には問題ないですが、以下２点の問題ありました。

送り側がタイプし続けると、受け取り側の「〇〇さんがタイプしています」の表示において、表示と非表示がちらつく受け取り側の問題。解決には、設定したタイマーをクリアーして非表示にするタイマーを再度設定します。そうすることでいったん表示したメッセージをキープします。上の旧コードではその処理がありませんでした。
送り側がタイプし続けると、Pusherへの送信のイベント数の制限（１秒に１０まで）を超える、送り側の問題。解決には、最初のタイプのイベントで１回Pusherに送信したら、その後300ms待ちます。そして、その間にはタイマーは作成しません。上の旧のコードではタイプする度にタイマーを作成していて送信回数の抑制とはなっておらず、Pusherでは上限を超えるイベントエラーとなっていました。

すでにコードをgithubからダウンロードしていたなら、ローカルのブランチを削除して再度ダウンロードをお願いします。

chat.js

createApp({
    setup () {
        const messages = ref([]),
            typer = ref(false),
            typing = ref(false);

        fetchMessages();

        let listenTimer = false;

        window.Echo.private('chat')
            .listen('MessageSent', (e) => {
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            })
            .listenForWhisper('typing', (e) => {
              // タイプしている会員名を受信して、「〇〇さんがタイプしています」を表示
                typer.value = e.typer;
                typing.value = true;

                // ２秒待つ前にタイプされたら、前回のタイマーをクリアーして
                // 表示・非表示の入れ替えを抑制します
                if (listenTimer) {
                    clearTimeout(listenTimer);
                }

                // ２秒経過したら、表示を非表示に
                listenTimer = setTimeout(() => {
                    typer.value = false;
                    typing.value = false;
                }, 2000);
            });
...
        let whisperTimer = false;

        function isTyping(e) {
          if (whisperTimer === false) {
                // タイプ開始したらすぐにタイプした会員名送信して、300ms待ちます
                // その間のタイプのイベントは、上の条件文のためここのコードが実行されずに無視します
                // こうすることで、Pusherへの送信の回数を減らしています
                // Pusherの制限は１秒に最高１０まで
                window.Echo.private('chat').whisper('typing', {
                    typer: e.user.name
                });
                whisperTimer = setTimeout(() => {
                    whisperTimer = false;
                }, 300);
            }
        }
...

会員チャットの解説（２）プライベートチャンネル

Wed, 06 Sep 2023 04:29:56 +0900

前回に引き続いての会員チャットの解説です。少々ややこしい、クライアントとPusherのサーバー間のWebsocketのプライベートチャンネルの購読認証の仕組みを説明します。

デモの会員のチャットプログラムのインストール手順はこちらから。会員チャットの解説（１）Websocket　はこちらから。

プライベートチャンネルが必要なのは？

プライベートチャンネルがあるということは、誰でもアクセスできるパブリックチャンネルもあります。しかし、チャットは個人あるいはグループ間でのプライベートな通信ゆえに、セキュリティが重要となってきます。

例えば、chatチャンネルにいきなり会員登録やログインをしていないユーザーがチャンネルでの通信内容を聞けたり、メッセージを送信できたら問題です。また、会員ログインをしていても、chatチャンネルでなく自分が属さない違うチャンネルの通信内容を聞けても困ります。

それゆえに、プライベートチャンネルでは、チャンネルを使用する前に、ある条件に適うユーザーのみが使用できる購読認証が必要となります。

チャンネルの購読認証

理解のためにプライベートチャンネルの全体の流れをシーケンス図としてみました。

ウェブサーバーはLaravelのプログラムを実行するアプリサーバーです。クライアントは太郎さんや花子さんのブラウザで、PusherがWebsocketのサーバーです。

上の図では、接続のイベントがまず起こり、次にウェブサーバーを伴く購読のイベントが起こります。購読のイベントでは、認証にはウェブサーバーのHttpが使用されることに注意してください。

接続（Websocket）

最初の図において、まずWebscoketの接続が、クライアントとPusherのサーバーの間で確立します。前回も書いたように、これはbootstrap.jsの以下でのLaravel Echoの初期化で行われます。

bootstrap.js

...
import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    cluster:import.meta.env.VITE_PUSHER_APP_CLUSTER,
});

設定したPusherのキーなどの情報に間違いがない限り、接続は問題なく確立します。

購読の認証（Http）

特定のプライベートチャンネル購読（ここではchat）は、権限のないアクセスが起こらないように、アプリ（Laravelのプログラム）において認証が必要とされます。

上のシーケンス図のように、まず、クライアントのchat.jsの以下の初期化から始まります。

chat.js

...
createApp({
    setup () {
        const messages = ref([]);

        fetchMessages();

        window.Echo.private('chat')
            .listen('MessageSent', (e) => {
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            });
...

window.Echo.private(‘chat’)では、Pusherのサーバーとプライベートチャンネルの購読が確立されていないなら、http://127.0.0.1:8000/broadcasting/authにPOSTします。POSTに送信する値は、接続で得たsocket_idの値と、channel_nameとしてここではprivate-chatです。

さて、この/broadcasting/authのルートですが、通常のroutes/web.phpでは定義されていません。しかし、以下を実行すると、

$ php artisan route:list

とあります。Laravelが自動で挿入したルートのようです。

会員チャットのデモでは、config/app.phpにおいて、デフォルトではコメントされているApp\Providers\BroadcastServiceProvider::classの行のコメントが解除されています。

config/app.php

...
   'providers' => ServiceProvider::defaultProviders()->merge([
        /*
         * Package Service Providers...
         */

        /*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        App\Providers\BroadcastServiceProvider::class, //デフォルトではここがコメントされている
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,
    ])->toArray(),
...

コメントを解除した段階で先ほどのルートが作成されます。

さて、このPOSTで何が起こるかというと、以下のroutes/channels.phpにアクセスして、現在のユーザー（ここではログインした会員）がプライベートチャンネルのchatにアクセスできるかどうか認証するのです。

routes/channes.php

...
Broadcast::channel('chat', function ($user) {
    return Auth::check();
});

Auth::check()は会員がログインされているかどうかの関数で、会員がログインされているなら、trueをそうでないならfalseを返します。trueなら、認証されたトークンとしてのkeyを作成して、チャンネル名とともにWebsocketでPusherサーバーに購読リクエストとして送ります。

今回は会員ログインがあればだれでも参加できるチャットですが、例えば、会員でも特定のグループに属さなければ、チャットができないとかのケースではこの認証の条件が違ってきます。

購読（Websocket)

ウェブサーバー（つまりLaravel）で購読の認証が完了したら、そこで発生したデータをPusherサーバーに送り、チャンネルの購読作業が完了します。完了したら、ウェブサーバーを介せずにクライアントとPusherサーバー間でのWebsocketの通信が開始ます。

太郎さんがメッセージを送信したら、Pusherサーバーを通じて、chatチャンネルを認証購読されたユーザーのみに、メッセージが流れます。

ブラウザのインスペクター

プライベートチャンネルの認証のための一連のイベントは、ブラウザ（ここではFirefoxを使用）のインスペクターで見ることができます。

インスペクターのNetworkのタブで、HTML、XHR(ajax)、WS(websocket)をオンにして、http://127.0.0.1:8000/chatページにアクセスします。

まず、認証のためのauthへのPOSTですが、レスとしてauthの値が返されていることがわかります。値はコロンで分割されていて最初はPusherで取得したkeyの値で後ろが生成されたsignatureの値です。

Websocketのイベントは、以下のハイライトされている行でリアルタイムで見ることができます。先のPOSTのレスの値をPusherのサーバーに送信しているのがわかりますね。この行が、認証のPOSTより前にあるのはすでにPusherサーバーとの接続が先に起こっているからです。WebsocketのイベントはHttpのイベントと違い、将来に通信（例えばメッセージの受信）が起こってもこの行だけのレスにイベントが追加されます。

以下では、Pusherのサーバーから購読確立成功（subscription_succeeded）が返ってきています。

会員チャットの解説（１）Websocket

Mon, 04 Sep 2023 04:50:28 +0900

前回作成したWebsocketを使用した会員チャット。Laravelのお陰でプログラムはシンプルなのですが、裏で何か起こっているかいまひとつ。ということで、仕組みに関して私なりの理解で説明します。

デモの会員のチャットプログラムのインストール手順はこちらから。

HttpとWebsocketの違い

まず、チャットで使用されている通信のプロトコルに関して。

Websocketは、Httpと同様にインターネットのアプリレイヤーのプロトコルの１つですが、以下のような違いがあります。

Httpがリクエストとレスポンスで通信が完了するのと違い、Websocketは一度接続が確立するとクローズ（サーバーあるいはクライアントが）するまで双方向の通信が可能となり、とても高速の通信が可能となります。

メッセージを送信すると

前回開発した会員チャットのデモにおいては、これらの２つの通信プロトコルがどう使用されているか見てみましょう。

クライアントのブラウザからメッセージを送信したときの流れの図を作成してみました。クライアント（ブラウザー）とサーバー（ウェブサーバーとPusherのサーバー）を結ぶ線において、通信のプロトコルが異なることに注意してください。黒線はHttpで、赤線はWebSocketです。

Http

まず、クライアントとウェブサーバーとPushサーバー間のHttp/Httpsの通信を見てみます。

上の図では、チャットの画面（太郎のブラウザなど）で、メッセージを入力して「送信」ボタンをクリックすると、同じページ上に含まれるchat.jsの以下のaddMessage()が実行されます。

chat.js

...
createApp({
    setup () {
...
        function addMessage(message) {
            messages.value.push(message);

            axios.post('/messages', message).then(response => {
                // success
            });
        }
...

そこでは、入力した自分のメッセージを画面に反映させるとともに、ajaxで/messageにデータをPOSTします。つまり、以下のChatController.phpのsendMessage()が実行されます。

Chatcontroller.php

...
class ChatsController extends Controller
{
...
    public function sendMessage(Request $request)
    {
        $user = Auth::user();

        // DBにレコードを作成
        $message = $user->messages()->create([
            'message' => $request->message,
        ]);

        // Pusherにブロードキャストに必要な情報を送信
        broadcast(new MessageSent($user, $message))->toOthers();

        return ['status' => 'Message Sent!'];
    }
...

上のメソッドでは、受信したデータをDBに記録して、ヘルパーのbroadcast()をコールして、Pusherのサーバーにブロードキャストするデータを送ります。データは、MessageSentのイベントインスタンスとして渡し、toOthers()で、にブロードキャストの対象には自分が含まれないことを指定します。ここまででは、まだHttpのプロトコルを通信の枠内です。

MessageSentイベントの定義を見てみましょう。

MessageSent.php

...
class MessageSent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user;
    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(User $user, Message $message)
    {
        $this->user = $user;
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('chat');
    }
}

このイベントはLaravelで通常に使われるイベントと同じですが、ShouldBroadcastをインターフェースとしているところが違います。それゆえに、broadcastOn()のメソッドが定義されています。そのメソッドにおいて、chatという名前のプライベートチャンネルが指定されていることに注意してください。

Websocket

今度は、クライアントとPusherサーバー間のWebsocketの通信について見てみます。

まず、クライアントとPusherサーバーのWebsocketの接続は、以下のbootstrap.jsのコードのnew Echo()の初期化の実行で確立します。

bootstrap.js

...
import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    cluster:import.meta.env.VITE_PUSHER_APP_CLUSTER,
});

次に、chat.jsの以下でvueのアプリが初期化され、setup()がコールされます。そこでは、window.Echo.private(‘chat’).listenにおいて、

クライアントとPusherサーバーでchatチャンネルの購読を確立する（最初の１回のみ）
そのチャンネルにおいて、PushサーバーからMessageSentイベントを受信したらクライアントの画面に表示する

作業を行います。ここで使用するチャンネル名（chat）とイベント名（MessageSent）は、Http側の通信で使用されているものと同じであることが必要です。

chat.js

...
createApp({
    setup () {
        const messages = ref([]);

        fetchMessages();

        window.Echo.private('chat')
            .listen('MessageSent', (e) => {
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            });
...

例えば、花子さんのクライアントでPusherのサーバーとチャンネルの購読が確立すると、太郎さんが送信したメッセージ（つまり、MessageSentイベント）は、PusherサーバーからWebsocketを通じて送られてきます。そして、それがMessageSentイベントなら、花子さんのブラウザにリアルタイムで太郎さんのメッセージが表示されます。

Pusherのデバッグ画面

Pusherのサイトの管理画面では、上で説明したWebsocketの一連のイベントを、以下のDebug Consoleのメニューにおいてすべて閲覧することができます。

そこでは、太郎さんの接続と購読、花子さんの接続と購読、そして太郎さんが送信したメッセージの受信などのWebsocketイベントが最新なものからリスト表示されます。ちなみに、太郎さんが送信してPusherが受信したイベントでは、チャンネル名が、private-chatと表示されていますが、これはLaravel Echoが、MessageSentで指定したchatがプライベートチャンネルゆえに、private-をプレフィックスしているからです。

次回は

HttpとWebsocketを使用したチャットの仕組みを説明をしましたが、次回はクライアントとPusherサーバー間でのWebsocketでのセキュリティ、つまりプライベートチャンネルの仕組みを説明する予定です。

Pusherを使ってリアルタイムの会員チャットを作成

Fri, 01 Sep 2023 07:23:00 +0900

WebSocketを使用したリアルタイムのアプリケーションを作りたいのだけれど、WebSocketのサーバーの設定や管理は面倒、という方にお勧めが、Pusherのサービスです。無料プランで、１日200Kまでのメッセージ、100人までの同時接続が可能という寛大さ。ちょっとした小さいサイトなら無料プランで十分かもしれません。今回はそのサービスの紹介とともに、会員チャットをLaravel 10xとVue 3で作成します。

会員チャットのデモ

まず、完成品を見てみましょう。

上は、「太郎さん」がログインして、同じサイトにログインしている「花子さん」とチャットしているところです。「私」というのがログインしている「太郎さん」。

逆に「花子さん」でログインすると、「私」は花子さんです。

もちろん、「太郎さん」と「花子さん」だけでなく、他にも会員が登録していれば、すべての会員とチャットが可能です。デモということで画面はシンプルですが、デザインを工夫すればよりチャットらしいもの変えることができます。

Pusherで登録してキーをゲット

チャットのデモをインストールを説明する前に、PusherのWebsocketのサーバーを使用するために以下の作業が必要です。英語の画面のみなので、画像で説明します。

まず、以下のリンクに行きます。 https://pusher.com/

そこから、登録（Sign Up）の画面へ。

ここでメールアドレスとパスワードを入力して登録するか、すでにGoogleやGithubのアカウントがあるなら、それらからも接続で登録可能です。

登録すると、以下のように画面が変わり、

先に使用したメールアドレスへ、以下の確認のメールが送信されます。

確認メールのリンクをクリックすると以下の画面へ飛びます。

そこにおいて、「Get Started]をクリックすると、以下のポップアップが表示され、App（アプリ）の作成となります。そこでは、Appの名前とクラスターのデータセンターの指定が必要です。他は選択しなくても構いません。「Create App」のボタンを押すと、

以下の画面に変わり、この画面での情報が後に、.envでの編集において必要となります。

会員チャットデモのレポジトリ

PusherのサイトにはLaravelとVueを使用した親切なチュートリアルが掲載されています。しかし、Laravelは8x、VueはVue 2とやや古めということで、Laravel 10xと Vue 3で私が書き直したものをGithubのリポジトリとしました。

まず、これをローカル環境にクローンします。

$ git clone git@github.com:lotsofbytes/laravel-chat.git laravel-chat

このレポジトリでは、Laravelの10xの新規のプロジェクトに、Laravel UIのVueバージョンをインストールして、その上にチャットに必要なプログラムの変更を行いました。gitのコミットには以下のように３つのコミットとしましたので、差分を見てもらえればどのファイルをチャットのために変更したのが分かります。

840583a (HEAD -> master, origin/master) setup pusher
978ef3b install laravel/ui vue
62cad23 init

$ git diff 978ef3b --name-status
M       README.md
A       app/Events/MessageSent.php
A       app/Http/Controllers/ChatsController.php
A       app/Models/Message.php
M       app/Models/User.php
M       composer.json
M       composer.lock
M       config/app.php
A       database/migrations/2021_09_08_142412_create_messages_table.php
M       database/seeders/DatabaseSeeder.php
M       package-lock.json
M       package.json
M       resources/js/app.js
M       resources/js/bootstrap.js
A       resources/js/chat.js
A       resources/js/components/ChatForm.vue
A       resources/js/components/ChatMessages.vue
A       resources/views/chat.blade.php
M       resources/views/home.blade.php
M       resources/views/layouts/app.blade.php
M       routes/channels.php
M       routes/web.php
M       vite.config.js

インストールの手順

ローカル環境にレポジトリをクローンしたところで、まず必要なライブラリのインストールです。

$ composer install

さらに、フロントエンドのライブラリのために、

$ npm install

次に、

$ cp .env.example .env

を実行して、.envを作成。

$ php artisan key:generate

で.envにおけるキーを作成します。この時点でデータベースも作成してください。

.envをエディタで以下の変数を編集します。

# ローカル環境のDBの設定
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_chat
DB_USERNAME=root
DB_PASSWORD=

# 以下はpusherに設定
BROADCAST_DRIVER=pusher

# Pusherのサイトから取得してきた値に設定（＊以下の値はデモ用で使用はできません）
PUSHER_APP_ID=1657179
PUSHER_APP_KEY=dea19d8ae29b0823c91c
PUSHER_APP_SECRET=1b4c2c87d40f99389e2f
PUSHER_APP_CLUSTER=ap3
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https

次にデータベースにDBテーブルを作成して、太郎さんと花子さんのユーザーを作成しておきます。

$ php artisan migrate
$ php artisan db:seed

今回はviteを使用したので、使用されているjsのコンパイルが必要です（レポジトリにはコンパイルされたファイルは含まれていません）。以下の実行で、DeprecationのWarningが出るかもしれませんが、気にせずに。

$ npm run build

public/build/assetsにコンパイルされたjsとcssのファイルが作成されます。

最後にLaravelの簡易ウェブサーバーを立ち上げます。

$ php artisan serve

  INFO  Server running on [http://127.0.0.1:8000].

  Press Ctrl+C to stop the server

これで以下にアクセスして、ログインすると最初に紹介した画面となります。 http://127.0.0.1:8000/chat

太郎さんのログインは、tarou@example.com、花子さんは、hanako@example.comです。どちらもパスワードは、passwordです。

異なる２つのブラウザ（例えば、ChromeとFirefoxとか）を立ち上げて、違うユーザーでログインして確認してみてください。

最後に

会員チャットデモの解説は以下にあります。会員チャットの解説（１）Websocket　はこちらから。会員チャットの解説（２）プライベートチャンネル　はこちらから。

それから、以下が現時点での無料プラン（SandBox）プランの制限です。開発またはライブでばんばん使える上限であります。

光速のVite

Sun, 30 Oct 2022 07:08:54 +0900

ここ1年位で良く聞くようになったVite。Vue.jsの生みの親であるEvan Youさん開発、との事なので、 Vue.jsとの親和性が高いのだろうな、と。Laravel + Vue.js のスタックで開発する機会があれば使ってみたいな、と。私の中ではその程度の位置付けでした。

しかし、今年の６月、Laravel 9.2.0のリリース時のTaylerさんの以下のツイートを見て、認識を改めました。

Today we're pumped to announce that new Laravel projects use Vite to bundle frontend assets. Breeze and Jetstream have been updated as well. 🔥

Experience lightning fast Hot Module Replacement when using the new Breeze / Vite stack with Inertia Vue or React. ⚡
— taylor otwell 🪐 (@taylorotwell) June 28, 2022

光速のHMR。。。是非使ってみたい！

Viteが採用された理由

従来のLaravelはアセットバンドラにwebpackをラップしたLaravel-Mixを使うのが一般的でした。この決定を知った時、私はViteについて冒頭に述べた程度の認識だったので、

「なぜViteに変えるの？Laravel-Mixの何がダメなの?」と、思いました。因みに、同様の質問がTwitterで投げられており、Taylerさんがシンプルに

“much faster(断然速いから)"と答えていました。

この業界においてスピードは正義ですから、より速いツールが開発されたら導入しない理由はないですよね。でも何がどう速いのでしょうか？もっと知りたくなり調べてみました。

調べていく内に、Laravel-MixとViteは全く別物、ということが分かってきました。

Laravel-Mixの問題点

Viteが速いということは、Laravel-Mixが遅いという事ですが、具体的にどの部分が遅かったのでしょうか？

従来のLaravelの開発ではnpm run devを実行すると、resources配下から必要なアセットファイル（cssやjsなど）をかき集め、依存関係を解決しつつ１ファイルにまとめるという処理が行われていました。アセットバンドルについてはlaravel-mixでフロントエンドを開発にてkhino氏が詳しく解説しているので是非ご一読下さい。

開発者のアクションとしては、

jsファイルを変更する
npm run dev を実行しアセットをバンドル（ビルドともいう）する
ビルドした成果物をブラウザで確認する

といった感じです。

プロジェクト規模が大きくなりファイル数が多くなるとバンドル処理に時間が掛かり、開発効率が落ちてしまいます。私のようにjsをふりかけ程度にしか使っていない場合は大したこと無いですが、VueでSPAを開発している場合などは、上記のフローを高頻度で繰り返し開発するため、変更〜確認までにラグがある事は大きなストレスになります。

Viteはノーバンドル

ではViteはどうなのか？

公式ページに詳しく書いてありますが、Viteは開発サーバにおいて基本バンドルしません。パッケージやライブラリなど開発者が基本変更しないようなファイルは事前バンドルされるのですが、開発者が頻繁に変更するソースコードについてはバンドルせずブラウザに提供するのです。

最近のブラウザはES6で導入されたモジュール機能(import, export)に対応しており、ブラウザが表示するページに必要なモジュールを把握しそれらをimportしてくれます。そして、開発者がファイルを編集した際はViteがその変更を把握し、変更されたモジュールのみ再読み込みしてくれるのです。

アセットのバンドルも無ければ、リロード範囲も最小限な為、前項で問題とした変更〜確認までのラグというのが最小限に抑えられるという訳です。

Viteを体感してみる

冒頭のTaylerさんのTweetにある通り、Laravel 9.2.0 以降ではViteがフロントエンドのデフォルトビルダとして採用されており、npm run devを実行するとViteがHMRモードで起動します。

HMRとはHot Module Replacementの略でコードを変更し保存するとページのリロード無しでブラウザに変更が反映されます。

驚いたのは、保存してからブラウザに反映されるまでの速さです。文字通り一瞬で全くラグを感じませんでした。Vite恐るべし。

本番用にはバンドルする

開発時においてはバンドルせずにアセットを提供する事で開発者をハッピーにしてくれるViteですが、本番においてはバンドルした方がハッピーな様です。

なぜなら、ノーバンドルでアセットを提供した場合、ブラウザが逐次必要なモジュールをネットワーク経由で取得する必要があり非効率だからです。通常ネットワーク経由でデータを取得する際、細切れになったデータをロードするよりも、それらを１つにまとめてロードした方が効率的なのです。

開発時においてそれが問題にならないのは取得するデータが全てローカルに存在し、ネットワーク経由で取得する必要が無い為です。

まとめ

長く（と言っても数年）Laravel-Mixを使って開発していると、ついアセットはバンドルするもの、という固定観念に縛られがちですが。開発時は敢えてバンドルせず、ブラウザ側で出来ることはブラウザに任せよう、という思い切った試みがパズルのピースのように完璧にバチッとはまっており、改めて素晴らしい発明だなぁ、と思いました。Evan Youさん、あっぱれです。

SPAの開発を楽しくさせるInertia：Laravel Breeze + Inertia + Vue3 + Bootstrap5 + 日本語訳

Mon, 25 Apr 2022 05:55:31 +0900

再びSPA（シングルページアプリケーション）への挑戦です！　右のTAGSで「SPA」をクリックしてもらえばわかりますが過去にいくつか私のキャパ内でSPAに挑戦しております。しかし適用した技術がLaravelとの関連がまったくなかったり、完全にjQueryを脱却できなかったりと、どうも私の中ではしっくりこない。でも今度は違います。Inertia（イナーシャ）を使うからです。

Inertia

SPAと言えば、フロントエンドのReacdtJSやVueJSのようなjavascriptのフレームとバックエンドのapiで開発するものと思っていたのですが、Inertiaを使うとなんとLaravelのRouteやコントローラをそのまま使いSPAが可能となります。しかも、コントローラに使用するテンプレートはBladeの代わりにVueJSのコンポーネントとなります。HTMLの要素を含めてです。それゆえに、今まではBladeにおいてjQueryを使いボタンのクリックイベントとかでフロントエンドのプログラムをしていたところ、jQueryをまったく使わずにVueJSだけでプログラムできるのです。

ちなみに、Inertia、日本語直訳では「怠惰」。レイジーな私にぴったりで、これほどわくわくするものはありません。

スターターキット

このInertiaを簡単に体験してもらうために、hikaru氏の協力を得て以下の組み合わせのスターターキットを作成してみました。

Laravel Breeze

以前はLaravel UIというユーザー認証に必要な機能を含むスターターパッケージがありましたが、現在はその変わりにLaravel Breezeとなっています。ユーザーの登録、ログイン、ログアウト、パスワードリセットの対応の機能が含まれています。

Inertia

SPA対応のパッケージで、composerを通してのバックエンドのためのphpコード、npmを通してのフロントエンドのためのjavascriptが提供されています。

Vue ３

Inertiaのフロントエンドは先にも述べたようにReactJSやVueJSなどを採用しています。VueJSにおいてはバージョン２と去年にリリースされたバージョン３に対応しています。ここでは、Composition APIを使用してより理解しやすくなったバージョン３をコンポーネントに採用しています。

Bootstrap ５

超有名なCSSのフレームワークですが、バージョン５では従来のバージョンと異なり、jQueryに頼らず全て純のJavascriptで書かれています。ちなみに、Laravel Breezeでのインストールの選択においてInertiaを選択することが可能ですが、そこでインストールされるCSSフレームワークはTailwind CSSです。しかし、それはまた違うパラダイムゆえにここではお馴染みのBootstrapに書き換えています。

日本語版

最後に、日本語の開発者のために、Vueのコンポーネント、バリデーションなどにおいて日本語訳を提供しています。

インストール

以下、スターターキットのインストールの手順です。

まず以下のレポからクローンします。

$ git clone git@github.com:lotsofbytes/breeze-bootstrap.git

breeze-bootstrapというサブディレクトリーが作成されるます。この時点のmainブランチは英語版なので、dev-japanese-verにブランチに以下で変更します。

$ cd breeze-bootstrap
$ git checkout dev-japanesse-ver

以下はお馴染みのLaravelの設定です。

$ cp .env.example .env # .envを必要に応じて編集してください。
$ composer install
$ php artisan key:gen
$ npm install
$ php artisan migrate --seed

そしてウェブサーバーを立ち上げます。

$ php artisan serve

最初の画面です。

ユーザーを登録してみましょう。

エラーも表示されますね。登録が成功すると、ログイン後のダッシュボード画面になります。

Routeはどう変わった？

ブレードを使用するrouteの設定とInertiaを比較してみましょう。

これがお馴染みのブレード版です。

routes/web.php

...
Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

Inertia版は、

routes/web.php

...
Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
...

基本的にview()がInertia::render()に代わっただけです。関数の引数は、ブレードからVueのコンポーネントとなっていて、ブレード同様に変数を渡すことが可能です。ちなみに、inertia()というヘルパーがあるので以下のようにも書けるようです。

Route::get('/dashboard', function () {
    return inertia('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

コントローラでの変更は？

今度はコントローラの部分、こちらはどう変わったのか、見てみましょう。

app/Http/Controllers/Auth/RegisteredUserController.php

...
class RegisteredUserController extends 
{
    /**
     * Display the registration view.
     *
     * @return \Inertia\Response
     */
    public function create()
    {
        return Inertia::render('Auth/Register');
    }

    /**
     * Handle an incoming registration request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\RedirectResponse
     *
     * @throws \Illuminate\Validation\ValidationException
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => ['required', 'confirmed', Rules\Password::defaults()],
        ]);

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);

        event(new Registered($user));

        Auth::login($user);

        return redirect(RouteServiceProvider::HOME);
    }
}

上はユーザー登録画面のコードですが、見ての通り、変わったのは入力画面表示においてInertia::render()となった部分だけです。情報保存のためのstore()メソッドは変更なしです。

フロントエンドのファイルはどこへ？

フロントエンドに関わるファイルは、ブレード版ではみなresources/viewsのディレクトリ下に収められていましたが、InertiaのVueコンポーネントのファイルはみなresouces/js下となります。こんな感じです。

resurces/js

.
├── app.js
├── bootstrap.js
├── Components
│   ├── ApplicationLogo.vue
│   └── ValidationErrors.vue
├── Layouts
│   ├── Authenticated.vue
│   └── Guest.vue
└── Pages
    ├── Auth
    │   ├── ConfirmPassword.vue
    │   ├── ForgotPassword.vue
    │   ├── Login.vue
    │   ├── Register.vue
    │   ├── ResetPassword.vue
    │   └── VerifyEmail.vue
    ├── Dashboard.vue
    └── Welcome.vue

ブレードがすべてなくなったわけではありません。大元として１つだけブレードファイルがあります。

resources/views/app.blade.php

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

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ url(mix('css/bootstrap.css')) }}">
        <link rel="stylesheet" href="{{ url(mix('css/app.css')) }}">

        <!-- Scripts -->
        @routes
        <script src="{{ url(mix('js/app.js')) }}" defer></script>
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

@inertiaの部分に先のVueのコンポーネントから作成されたHTMLが入り込み、アクセスしたページにより内容が変わります。

Vueのファイルを変更したら

このスターターキットをインストールしたら、まずはVueのコンポーネントをいじってみたいはず。ブレードでは変更して保存したら、画面を更新すれば変更がすぐに反映されます。同様なことをしたいなら、以下のように、

$ npm run watch

を実行しておきます。この実行は通常のコマンドのようにすぐに終了するのではなく常に走り続けます。それゆえに、関わるファイルが変更されると自動的に、Laravel-mixを通してcssやjsファイルをコンパイルしてくれます。

そこで表示されたファイルは、publicのディレクトリ下のファイルとして保存されます。コンパイルが完了したら、ブレードと同様に画面を更新してcssやjsファイルを読み直すと変更が反映されます。

最終的には、以下の実行で最適化、最小化されたProduction Readyのファイルの作成が可能です。

$ npm run prod

最後に

Inertiaを使っての開発がより楽しくなるように、いろいろ将来の投稿を考えています。お楽しみに。

Vue.js：バックエンドのバリデーションを使う

Sun, 24 Nov 2019 05:34:09 +0900

最近、フロントエンドのフレームワークのVue.jsを勉強し始めました。またしても世間の流行から一歩遅れての開始ですが、比較的大きなプロジェクトを管理する私としては、ピッカピッカの流行りをすぐに採用とは行きません。長期的な管理を考えてLaravelのように本当にメージャーになるかを見極めてからです。幸い、Laravelのコミュニティでは、Vue.jsが盛んに利用され情報が多いので、よりメージャーなReactやAngularなどのフレームワークの存在を気にしつつもLaravelとの親近さでVue.jsの習得です。Vue.jsの1からの説明は他の人のブログに任せて、私の方はいきなり実用的なVue.jsを紹介していく予定です。まず今回は、Vue.jsをフォームの入力のバリデーションに使用するところを紹介します。

フロントエンドのバリデーション

フォームのバリデーションと言えば、Laravelでは、コントローラにおけるvalidate()です。ルールを指定するだけでとても便利です。しかし、それはバックエンドの話で、その実行には毎回毎回画面を更新するPOSTの実行が必要です。それが嫌なら、inputのHTMLのタグのrequiredで入力必須の指定やtypeでデータタイプを指定するか、あるいはjqueryのvalidation inputのプラグインの使用で、フロントエンドである程度のバリデーションを肩代わりしてもらいます。

例えば、Laravelのデフォルトのインストールでの会員登録のフォームでは、以下のようにinputでtypeやrequiredを使いフロントエンドでベーシックなチェックしています。画面の更新を必要とせず高速なので、ユーザーにとっても快適です。

/resources/views/auth/register.blade.php

@extends('layouts.app')                                                                                                                                                                                            
                                                                                                                                                                                                                   
@section('content')                                                                                                                                                                                                
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">{{ __('Register') }}</div>

        <div class="card-body">
          <form method="POST" action="{{ route('register') }}">
            @csrf

            <div class="form-group row">
              <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

              <div class="col-md-6">
                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                @error('name')
                  <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                  </span>
                @enderror
              </div>
            </div>

            <div class="form-group row">
              <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

              <div class="col-md-6">
                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">

                @error('email')
                  <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                  </span>
                @enderror
              </div>
            </div>     
...

画面ではこんな感じ。

しかし、フロンドエンドのチェックは完璧ではなく、例えば、パスワードの確認、つまりPasswordとConfirm Passwordの値が同じかどうかはバックエンドのバリデーションに任せます。

さらに、ブラウザを使用せずにPOSTで特定のURL（ここでは /register）に直接データを送信すれば、フロントエンドのバリデーションをすっ飛ばすことは簡単に可能なので、フロントエンドのバリデーションがあるからバックエンドのバリデーションが要らないということにはなりません。

もちろん、バリデーションがフロントにあるのは、バックエンドの使用が経済的（サーバーのリソースを消費しない）になるので良いのですが、同じバリデーションを２箇所で、しかも違う言語（片方はhtmlタグあるいはjquery、もう片方はlaravelやphp）で管理するのはやっかいです。そこで、Vue.jsを使用して画面を更新せずにバックエンドのコントローラのバリデーションを実行してエラーを出力すれば、というのが今回のポストです。

Vue.jsのバックエンドバリデーションパッケージ

今回使用するのは以下のパッケージです。Laracastで有名なJeffreyくんがオリジナルに作成したのをベルギーのspatieの会社がパッケージ化してオープンソースしています。ちなみに、spatieは前回紹介したWeb tinkerも開発しています。しかも、それはVue.jsで開発されています。

https://github.com/spatie/form-backend-validation

まず、インストールとしては、デフォルトのLaravelのプロジェクトを作成したことを仮定して、

$ php artisan make:auth

をコマンドラインで実行後、

$ npm install

を実行して、node_modulesをダウンロードして、

$ npm install vue
$ npm install form-backend-validation

とパッケージをインストールします。

ブレードとスクリプトの編集

それから、先の会員登録のフォームのブレードを以下のように編集します。完全にバックエンドのバリデーションのみを使うために、inputのタグ内において、requiredなどのフロントエンドのバリデーションは削除しました。また、emailではinput typeは、emailからtextに変更しています。上のHTMLを比べてみてください。

/resources/views/auth/register.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">{{ __('Register') }}</div>

        <div class="card-body">

          <div class="alert" :class="messageClass">
            @{{ message }}
          </div>

          <form @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name);">

            <div class="form-group row">
              <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

              <div class="col-md-6">
                <input id="name" type="text" class="form-control" :class="{ 'is-invalid': form.errors.has('name') }" v-model="form.name">
                <div class="invalid-feedback"
                  v-if="form.errors.has('name')"
                  v-text="form.errors.first('name')"></div>
              </div>
            </div>

            <div class="form-group row">
              <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

              <div class="col-md-6">
                <input id="email" type="text" class="form-control" :class="{ 'is-invalid': form.errors.has('email') }" v-model="form.email">
                <div class="invalid-feedback"
                  v-if="form.errors.has('email')"
                  v-text="form.errors.first('email')"></div>
              </div>
            </div>

            <div class="form-group row">
              <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

              <div class="col-md-6">
                <input id="password" type="password" class="form-control" :class="{ 'is-invalid': form.errors.has('password') }" v-model="form.password">
                <div class="invalid-feedback"
                  v-if="form.errors.has('password')"
                  v-text="form.errors.first('password')"></div>
              </div>
            </div>

            <div class="form-group row">
              <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

              <div class="col-md-6">
                <input id="password_confirmation" type="password" class="form-control" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" v-model="form.password_confirmation">
                <div class="invalid-feedback"
                  v-if="form.errors.has('password_confirmation')"
                  v-text="form.errors.first('password_confirmation')"></div>
              </div>
            </div>

            <div class="form-group row mb-0">
              <div class="col-md-6 offset-md-4">
                <button type="submit" class="btn btn-primary" :disabled="form.errors.any()">
                  {{ __('Register') }}
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

VueやFormのパッケージを使用するために、app.jsの編集も必要です。

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

import Form from 'form-backend-validation';

window.Form = Form;

const app = new Vue({
    el: '#app',

    data: {
            form: new Form({
                name: '',
                email: '',
                password: '',
                password_confirmation: ''
            }),
            message: '',
            messageClass: ''
    },

    methods: {
        onSubmit() {
            this.form['post']('/register') // 適切なパスに変更してください！
                .then(response => this.displaySuccessMessage('Your account was created'))
                .catch(response => this.displayErrorMessage('Your account was not created'));
        },

        displaySuccessMessage(message) {
            this.messageClass = 'alert-success';
            this.message = message;
        },

        displayErrorMessage(message) {
            this.messageClass = 'alert-danger';
            this.message = message;
        },

        clearMessage() {
            this.message = '';
        },
    }

});

最後に、以下の実行が必要です。

$ npm run dev

ブラウザで見てみましょう。RegisterController.phpのコントローラのvalidationが実行されてエラーが画面を更新せずにエラーが出力されています。

インラインのスクリプト

上の例では、app.jsでは、登録画面だけにしか対応していません。他にも入力画面があるなら問題です。必要な部分だけをそれぞれに画面のインラインスクリプトとしてみます。

まず、app.jsからVueのオブジェクト生成のコードを削除します。

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

import Form from 'form-backend-validation';

window.Form = Form;

そして、それをコンパイルします。

$ npm run dev

次に、app.jsで削除したオブジェクト生成を、register.blade.phpのインラインとします。

/resources/views/auth/register.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
...
@endsection

@section('script')
    const app = new Vue({
        el: '#app',

        data: {
                form: new Form({
                    name: '',
                    email: '',
                    password: '',
                    password_confirmation: ''
                }),
                message: '',
                messageClass: ''
        },

        methods: {
            onSubmit() {
                this.form['post']('/register')
                    .then(response => this.displaySuccessMessage('Your account was created'))
                    .catch(response => this.displayErrorMessage('Your account was not created'));
            },

            displaySuccessMessage(message) {
                this.messageClass = 'alert-success';
                this.message = message;
            },

            displayErrorMessage(message) {
                this.messageClass = 'alert-danger';
                this.message = message;
            },

            clearMessage() {
                this.message = '';
            },
        }
    });
@endsection

最後に、レイアウトを編集して、インラインのスクリプトを出力するようにします。以下の@yield(‘script’)の部分です。必ず、

Vue on ララジャパン

OpenAIのレスをHTML表示

OpenAIからのレス

ソースコード

markdown-itをChatMessages.vueに取り込む

OpenAIとチャット

欲しい機能

Open AIでアカウントを登録

APIのキーをゲット

ソースコード

必ずここを読む

特定の会員にリアルタイムでお知らせ

欲しい機能

ソースコード

送信側

クライアント

複数のユーザーにnotify

会員チャット 現在参加している会員リスト

欲しい機能

ソースコード

サーバー側の変更

クライアント側の変更

プレゼンスチャンネル

会員チャット 〇〇さんがタイプしています…

欲しい機能

Pusherでの設定

ソースコード

Whisper

掘り下げてvuejsの世界へ

クライアントイベント

修正

会員チャットの解説（２）プライベートチャンネル

プライベートチャンネルが必要なのは？

チャンネルの購読認証

接続（Websocket）

購読の認証（Http）

購読（Websocket)

ブラウザのインスペクター

会員チャットの解説（１）Websocket

HttpとWebsocketの違い

メッセージを送信すると

Http

Websocket

Pusherのデバッグ画面

次回は

Pusherを使ってリアルタイムの会員チャットを作成

会員チャットのデモ

Pusherで登録してキーをゲット

会員チャットデモのレポジトリ

インストールの手順

最後に

光速のVite

Viteが採用された理由

Laravel-Mixの問題点

Viteはノーバンドル

Viteを体感してみる

本番用にはバンドルする

まとめ

SPAの開発を楽しくさせるInertia：Laravel Breeze + Inertia + Vue3 + Bootstrap5 + 日本語訳

Inertia

スターターキット

Laravel Breeze

Inertia

Vue ３

Bootstrap ５

日本語版

インストール

Routeはどう変わった？

コントローラでの変更は？

フロントエンドのファイルはどこへ？

Vueのファイルを変更したら

最後に

Vue.js：バックエンドのバリデーションを使う

フロントエンドのバリデーション

Vue.jsのバックエンドバリデーションパッケージ

ブレードとスクリプトの編集

インラインのスクリプト

会員チャット　現在参加している会員リスト

会員チャット　〇〇さんがタイプしています…