Vue on ララジャパン

特定の会員のデスクトップにお知らせ

Tue, 24 Oct 2023 11:26:01 +0900

前回の「特定の会員にリアルタイムでお知らせ」の記事は、ブラウザー内で表示するお知らせの話でした。つまり、ブラウザーを開いていないとお知らせは伝わりません。今回はブラウザーを開いてなくてもデスクトップ上でユーザーにお知らせします。

欲しい機能

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

tinker

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

WindowsあるいはMacのデスクトップ上で右下にお知らせがスライドして登場します。

お知らせをクリックすると、指定したサイトに飛ばすことも可能です。

ソースコード

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

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

$ git fetch
$ git checkout chat-notification-desktop

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

chat-notificationとの差分は以下です。前回のブラウザーでのお知らせのToastのコンポーネントが廃止となり、後に説明するお知らせ許可のダイアログのコンポーネントが追加されています。

$ git diff chat-notification --name-status
M       resources/js/chat.js
D       resources/js/components/ChatToast.vue
A       resources/js/components/ConfirmModal.vue
M       resources/views/chat.blade.php

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

$ npm run build
$ php artisan serve

お知らせ受信の許可

先のデモのように、ユーザーにお知らせするにはユーザーのデスクトップにおいて、ユーザーがブラウザーとサイトに許可（通知権限）を与える必要があります。サイトにアクセスするたびに毎回許可を問う必要はないです。１回許可（あるいは拒否）すればその後はその選択を尊重します。

しかし、この通知許可はユーザーの操作での起動が必要（ブラウザにより異なる）となるので、こちらが作成したボタンやダイアログの表示で許可を問い、その後さらにブラウザの方でポップアックしたダイアログでさらに許可を問うというやや面倒な手順となっています。

その部分のコードを見てみましょう。全体はこちらで見れます。

まず、通知許可がすでに選択されているかどうかチェックします。

chat.js

...
createApp({
    setup () {
        const messages = ref([]);
        const modalVisible = ref(false);
...
        // 通知権限が既に決定されているかどうかを調べる
        if (Notification.permission === 'default') {
            modalVisible.value = true;
        }

Notificationはウェブの通知APIでたいていどのブラウザでも対応しています。このpermissionの値は、granted, denied, defaultの３つ文字列のどれかで、それぞれ、許可済み、拒否、未選択と意味です。未選択なら、以下のようなダイアログが表示されます。

このダイアログは、ConfirmDialogのコンポーネントでブレードでは以下のように使用されています。先ほどのmodalVisibleの値が更新されたゆえに、このダイアログが表示されます。

chat.blade.php

...
<confirm-modal
  :visible="modalVisible"
  v-on:confirmed="askPermission"
  question="お知らせを受け取りますか？">
</confirm-dialog>
...

このダイアログが表示されて、ユーザーが「はい」をクリックしたら、askPermissionの以下のコードが実行され、ダイアログを閉じて今度はブラウザの許可選択のポップアップを表示します。

chat.js

...
        // 通知権限許可のモーダルのダイアログで「はい」をクリックしたら、今度はブラウザの通知許可を表示
        function askPermission() {
            modalVisible.value = false;

            Notification.requestPermission().then((permission) => {
                console.log(permission);
            });
        }
...

こちらがそのポップアップです。

ここでユーザーが許可して初めて、こちらのプログラムからユーザーにデスクトップのお知らせを送信することが可能となります。

お知らせの受信

お知らせを受け取り通知を作成する部分は前回と同様にLaravel Echoのnotificationを使用します。しかし、今度はウェブの通知APIで受け取ったメッセージを含めて通知を作成します。

chat.js

....
       window.Echo.private('App.Models.User.' + window.userId)
            .notification((n) => {
                 // 通知権限が既に付与されているなら、通知を作成
                if (Notification.permission === 'granted') {
                    const notification = new Notification(
                        'ご連絡',
                        {
                            icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Laravel.svg/180px-Laravel.svg.png',
                            body: n.message
                        }
                    );
                    notification.onclick = () => {
                        window.open('https://larajapan.com');
                    }
                }
            });
...

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);
            }
        }
...

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）プランの制限です。開発またはライブでばんばん使える上限であります。

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の世界へ

クライアントイベント

修正

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

会員チャットのデモ

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

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

インストールの手順

最後に

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

Inertia

スターターキット

Laravel Breeze

Inertia

Vue ３

Bootstrap ５

日本語版

インストール

Routeはどう変わった？

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

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

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

最後に

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

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

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

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

インラインのスクリプト

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

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