Notification 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サーバーにイベント情報が流れます。それぞれで情報が異なる（今回の例では名前の情報が異なる）なら別ですが、まったく同じ情報を送信するなら効率的ではありません。そのようなときはチャットと同様にログインした会員すべてに対してのイベントとして送信した方がよいです。

メールの送信（６）Notificationを使ってメールを送信

Sun, 07 Feb 2021 02:45:46 +0900

前回はMailableを使ってのメール送信の話でした。今回は、もう１つLaravelからメールを送信する方法としてNotificationの話です。

Notificationを使用してメールを送信

Mailableを使ってメールを送信するには、

use App\Mail\SomeMailableClass;

Mail::to("test@example.com")->send(new SomeMailableClass);

が典型的な送信の仕方です。

一方、今回紹介するNotificationは、Notifiableのトレイトを使ったモデルクラスにメールを送信する機能を与えます。

例えば、このようにUserのクラスにNotifiableを追加すると、

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable implements MustVerifyEmail
{
    use Notifiable;
..
}

以下のように、Userのモデルのインスタンスのメソッドとして、notify()でメールを送信できます。

use App\User;
use App\Notifications\Hello;

$user = User::find(1);
$user->notify(new Hello);

上では、$userのオブジェクトの項目である、$user->emailが自動的にメール送信の宛先となります。

さて、送信するメールの内容の方は、Notificationのクラス（上ではHelloのクラス）の作成が必要です。

$ php artisan make:notification Hello

を実行して、作成されたファイルを以下のように編集します。

app/Notifications/Hello.php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Notifications\Notification;

class Hello extends Notification
{
    use Queueable;

    /**
     * Create a new notification instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    {
        return ['mail'];
    }

    /**
     * Get the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return \Illuminate\Notifications\Messages\MailMessage
     */
    public function toMail($notifiable)
    {
        return (new MailMessage)
                    ->subject('こんにちは')
                    ->greeting('こんにちは！')
                    ->line('メールの内容')
                    ->action('ホームページへ', url('/'))
                    ->line('ありがとうございます');
    }

    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function toArray($notifiable)
    {
        return [
            //
        ];
    }
}

さてtinkerで送信してみます。

>>> $user = User::find(1);
[!] Aliasing 'User' to 'App\User' for this Tinker session.
=> App\User {#4072
     id: 1,
     name: "test",
     email: "test@example.com",
     email_verified_at: null,
     created_at: "2020-12-30 23:14:29",
     updated_at: "2020-12-30 23:14:29",
   }

>>> $user->notify(new App\Notifications\Hello);
=> null

MailTrapで送信したメールを見ると、

もうすでにHTMLのメールとなっています。

以下のように、文言はすべてMailMessageのクラスのメソッドで簡単に与えるだけOKです。上の例で、まだ英語として残っているRegards, Laravelの部分を変えたいなら、以下のように、salutationのメソッドに引数を渡します。

...
   public function toMail($notifiable)
    {
        return (new MailMessage)
                    ->subject('こんにちは')
                    ->greeting('こんにちは！')
                    ->line('メールの内容')
                    ->action('ホームページへ', url('/'))
                    ->line('ありがとうございます')
                    ->salutation('Larajapan');
    }
..

送信メールをカスタマイズ

もっとHTMLメールをカスタマイズしたいなら、以下を実行してデフォルトのブレードを自分のプロジェクトのディレクトリに出力します。

$ php artisan vendor:publish --tag=laravel-notifications
Copied Directory [/vendor/laravel/framework/src/Illuminate/Notifications/resources/views] To [/resources/views/vendor/notifications]
Publishing complete.

作成された、email.blade.phpは以下のようなマークダウンのブレードです。Laravelのコンポーネントとマークダウンのシンボルが混ざっていて少しわかりづらいですが、上で使用されたメソッド名がブレードでは変数名となっているのがわかります。line()に関してはボタンの表示を境に上と下で、$introLinesと$outroLinesに分かれます。

resources/views/vendor/notifications/email.blade.php

@component('mail::message')
{{-- Greeting --}}
@if (! empty($greeting))
# {{ $greeting }}
@else
@if ($level === 'error')
# @lang('Whoops!')
@else
# @lang('Hello!')
@endif
@endif

{{-- Intro Lines --}}
@foreach ($introLines as $line)
{{ $line }}

@endforeach

{{-- Action Button --}}
@isset($actionText)
<?php
    switch ($level) {
        case 'success':
        case 'error':
            $color = $level;
            break;
        default:
            $color = 'primary';
    }
?>
@component('mail::button', ['url' => $actionUrl, 'color' => $color])
{{ $actionText }}
@endcomponent
@endisset

{{-- Outro Lines --}}
@foreach ($outroLines as $line)
{{ $line }}

@endforeach

{{-- Salutation --}}
@if (! empty($salutation))
{{ $salutation }}
@else
@lang('Regards'),<br>
{{ config('app.name') }}
@endif

{{-- Subcopy --}}
@isset($actionText)
@slot('subcopy')
@lang(
    "If you’re having trouble clicking the \":actionText\" button, copy and paste the URL below\n".
    'into your web browser:',
    [
        'actionText' => $actionText,
    ]
) <span class="break-all">[{{ $displayableActionUrl }}]({{ $actionUrl }})</span>
@endslot
@endisset
@endcomponent

もちろん、前回のように独自のマークダウンのブレードを作成して利用することも可能です。その場合は以下のように、markdown()メソッドにブレード名を入れます。

app/Notifications/Hello.php

...
   /**
     * Get the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return \Illuminate\Notifications\Messages\MailMessage
     */
    public function toMail($notifiable)
    {
        return (new MailMessage)
                    ->subject('こんにちは！マークダウン')
                    ->markdown('emails.hello-markdown');
    }
...

Notification on ララジャパン

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

欲しい機能

ソースコード

お知らせ受信の許可

お知らせの受信

OpenAIのレスをHTML表示

OpenAIからのレス

ソースコード

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

OpenAIとチャット

欲しい機能

Open AIでアカウントを登録

APIのキーをゲット

ソースコード

必ずここを読む

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

欲しい機能

ソースコード

送信側

クライアント

複数のユーザーにnotify

メールの送信（６）Notificationを使ってメールを送信

Notificationを使用してメールを送信

送信メールをカスタマイズ