L10.x on ララジャパン

CypressでE2Eテストを自動化（５）laracasts/cypressでLaravelプロジェクトをテスト

Wed, 09 Oct 2024 12:42:04 +0900

ここまで４回の投稿でCypressテストの設定・テストコードなどをご紹介してきました。５回目の今回は、laracasts/cypressというLaravelでCypressを使用するために作成されたパッケージをご紹介します。Laravel10.xのプロジェクトにインストールして使ってみました。

Cypressのセットアップや基本的なテストなど、以前の記事は以下からご覧いただけます。

Cypressセットアップ・実行方法 Cypress画面表示のテスト Cypressログイン・ログアウトのテスト Cypressパスワードリセットのテスト

laracasts/cypressインストール

今までご紹介したCypressのテストでは、テスト対象プロジェクトとCypressが全く別のディレクトリでも問題なかったのですが、今回ご紹介するlaracasts/cypressはLaravelのartisanコマンドやfactoryなどを使用するため、テスト対象のLaravelプロジェクト内にインストールする必要があります。

ではまずはCypressをインストールします。Laravelのプロジェクトルートで、以下のコマンドを実行します。

% npm install cypress --save-dev

執筆時点で、cypress13.14.2がインストールされました。次にlaracasts/cypressのインストールです。以下のコマンドを実行します。

% composer require laracasts/cypress --dev

このコマンドで、laracasts/cypress3.0.2と関連パッケージがインストールされました。

最後に、以下のコマンドで初期ファイルを作成します。コマンドを実行するとcypressのディレクトリをどこに作成するか？を質問されるので、任意のディレクトリを指定してください。ここではコマンドラインで提案された通りのtests/配下を指定しました。

% php artisan cypress:boilerplate

Where should we put the cypress directory? [tests/cypress]:
> 


Updated tests/cypress/support/index.js
Updated tests/cypress/plugins/index.js
Created tests/cypress/plugins/swap-env.js
Created tests/cypress/integration/example.cy.js
Created tests/cypress/support/laravel-commands.js
Created tests/cypress/support/laravel-routes.js
Created tests/cypress/support/assertions.js
Created tests/cypress/support/index.d.ts
Created cypress.config.js
Created .env.cypress

ファイルが作成されました、さっそくCypressを立ち上げてみます。以下のコマンドを実行してください。

% npx cypress open

ここで、require is not defined in ES module scopeというエラーが発生しました。

require is not defined の修正

Laravel10ではデフォルトでpackage.jsonに“type”: “module”が設定されているのですが、これとlaracasts/cypressで使用されているCommonJS形式の記述がマッチしないことが原因でエラーとなっているようです。

このエラーの修正方法には何パターンかありますが、ここではLaravelのデフォルトを変更せず、またできるだけ簡単にエラーを解消できるよう以下の修正を行います。

１：ファイルの拡張子を.cjsに変更

まず、Cypress実行の際にrequireされる以下の２ファイルの拡張子を.jsから.cjsへ変更します。

/cypress.config.cjs                  // .jsから.cjsへ
/tests/cypress/plugins/swap-env.cjs  // .jsから.cjsへ

２：configファイルを修正

次に、cypress.config.cjsファイルのe2e内、setupNodeEvents()に以下のtaskを追加します。

cypress.config.cjs

const { defineConfig } = require('cypress')

module.exports = defineConfig({
.....

    e2e: {
        setupNodeEvents(on, config) {
          // ここにtaskを追加（plugins/index.jsの内容を移動）
          on('task', require('./tests/cypress/plugins/swap-env.cjs'));  //ここを追加
          return config　　　　　　　　　　　　　　　　　　　　　　　　　　　　  //ここを追加
        },
.....
    },
})

３：index.jsを削除

２の変更により/tests/cypress/plugins/index.jsは不要になるので削除します。

ここまででエラー修正は完了です。

４：baseUrlの指定

configファイルを開いているので、テストの実行に必要なbaseUrlも設定しておきましょう。同じくconfigファイルのe2e内にLaravelプロジェクトのURLをセットします。

cypress.config.cjs

const { defineConfig } = require('cypress')

module.exports = defineConfig({
.....

    e2e: {
        setupNodeEvents(on, config) {
          // return require('./tests/cypress/plugins/index.js')(on, config)
          // ここに元のplugins/index.jsの内容を移動
          on('task', require('./tests/cypress/plugins/swap-env.cjs'));
          return config
        },
        baseUrl: 'http://127.0.0.1:8000', //プロジェクトURLの指定
.....
    },
})

ここまで進めたら、再度以下のコマンドでCypressを立ち上げます。

% npx cypress open

問題なく起動したらダッシュボードを開いて、laracasts/cypressインストール時に自動生成されたexample.cy.jsを選択し、実行してみます。

こちらもエラーなく成功したら準備は完了です。

laracasts/cypressのコマンド

laracasts/cypressでは、Laravelプロジェクトのテストに便利なコマンドが用意されています。その中からいくつかテストでよく使うものをご紹介します。

まずはcreate()から。factoyと連動して、テスト用データを作成できます。以下の例ではUserデータを作成しています。

    cy.create('App\\Models\\User', { 
        name: 'ユーザー名',
        email: 'login-test@example.com',
    });

次に、login()・logout()です。コマンド名の通りログイン・ログアウトの処理を実行するコマンドで、PHPUnitでauth()->login($user)、auth()->logout()と記述した時と同じ動作をしてくれます。以下のように、引数にユーザーの情報を渡して使用します。

    cy.login({ name: 'ユーザー名' });
    cy.logout({ email: 'test@example.com'' });

そして次はcurrentUser()です。これはLaravelのauth()->user()と同じく、現在認証されているユーザーを取得してくれます。取得したユーザー情報は、Cypressコマンドのits()と組み合わせることで任意のプロパティが取り出せます。以下の例では取得したユーザーのemailデータを取り出し、期待通りか確認しています。

    cy.currentUser().its('email').should('eq', 'test@example.com');

最後に、refreshDatabase()です。Laravelのmigrate:refreshをコールします。このコマンドは任意の場所で使用できますが、CypressのbeforeEach()コマンドと組み合わせて使用すると、各テストケースの前にDBをリフレッシュしてくれるので便利です。

    beforeEach(() => {
        cy.refreshDatabase();
    });

テストコード

今回は新規会員登録・ログイン・ログアウトのテストを、ここまでご紹介したlaracasts/cypressのコマンドを使用して作成しました。

LaracastsCypressTest.cy.js

describe('laracasts/cypress Test', () => {

    beforeEach(() => {
        cy.refreshDatabase();
    });

    it('新規会員登録テスト', () => {
        cy.visit('/register');

        // フォームに情報を入力・送信
        cy.get('input[name=name]').type('新規登録ユーザー');
        cy.get('input[name=email]').type('test@example.com');
        cy.get('input[name=password]').type('password');
        cy.get('input[name=password_confirmation]').type('password');
        cy.get('button[type="submit"]').click()

        // ダッシュボードにリダイレクトされたことを確認
        cy.url().should('eq', Cypress.config().baseUrl + '/dashboard');
        // 認証中のユーザーを確認
        cy.currentUser().its('name').should('eq', '新規登録ユーザー');
    });

    it('ログインテスト', () => {
        // ユーザーを作成
        cy.create('App\\Models\\User', {
            name: 'ログインテスト',
            email: 'login-test@example.com',
        });

        cy.visit('/login');
        cy.get('input[name=email]').type('login-test@example.com');
        cy.get('input[name=password]').type('password');
        cy.get('button[type="submit"]').click()

        // ダッシュボードに遷移したことを確認
        cy.url().should('eq', Cypress.config().baseUrl + '/dashboard');
        // 認証中のユーザーを確認
        cy.currentUser().its('email').should('eq', 'login-test@example.com');
    });

    it('ログアウトテスト', () => {
        // ユーザーを作成
        cy.create('App\\Models\\User', {
            name: 'ログアウトテスト',
            email: 'logout-test@example.com',
        });

        //ログインを実行
        cy.login({ name: 'ログアウトテスト' });
        cy.visit('/dashboard')

        //ドロップダウンメニューを開くためのボタンクリック・ログアウトボタンをクリック
        cy.get('.relative').click()
        cy.contains('a', 'ログアウト').click()

        cy.visit('/dashboard').assertRedirect('/login');
        // 認証中のユーザーがいないことを確認
        cy.currentUser().should('not.exist');
    });
});

では、テストを実行してみましょう。Cypressのブラウザでテストファイルをクリックします。まだCypressを立ち上げていない場合はnpx cypress openを実行してCypressを立ち上げてくださいね。

全て成功しました！今回Cypressコマンドの説明は省きましたが、以下の記事で実行方法や代表的なコマンドをご紹介していますのでぜひご覧ください。

Cypressセットアップ・実行方法 Cypress画面表示のテスト Cypressログイン・ログアウトのテスト Cypressパスワードリセットのテスト

ユーザー認証のテスト（５）Laravel 10　スロットル

Mon, 15 Apr 2024 23:01:09 +0900

Laravelユーザー認証のテスト、５回目となる今回はスロットル機能についてです。ログイン画面でEメール・パスワードを入力し一定回数以上ログインに失敗するとロックがかかる便利機能ですが、ユニットテストはどのように書くのでしょうか。

この記事では、Laravel10xにBreezeをインストールした環境でテストを作成しています。テスト環境構築を含む以前の記事は、以下のリンクからご覧いただけます。

テスト対象

デフォルトではパスワードを５回連続で間違えると６０秒ロックがかかり、ロック中はこの画像のような状態となり正しいパスワードを入力してもログインができません。

実際には、このロック機能はEメール+IPをキーとして働いており、同じIPからでもメールアドレスを変えればログイン試行が可能です。こういったことを踏まえると様々なテストケースが考えられますが、今回はシンプルに以下の項目をテストします。

・正しいEメールとパスワードでログインできる・Eメールと誤ったパスワードを入力、５回失敗までは通常のエラーメッセージが返る・６０秒経過するまでは正しいパスワードを入力してもログイン不可・６０秒経過後はログインできる

ログインスロットルのテスト

まずは正しいEメールとパスワードで問題なくログインできることのテストです。このテストはBreezeが提供してくれているテストコードに含まれており、以前にログイン機能のテストでもご紹介しています。

tests/Feature/Auth/AuthenticationTest.php

    public function test_users_can_authenticate_using_the_login_screen(): void
    {
        $user = User::factory()->create();

        $response = $this->post('/login', [
            'email' => $user->email,
            'password' => 'password',
        ]);

        $this->assertAuthenticated();
        $response->assertRedirect(RouteServiceProvider::HOME);
    }

ここは特に問題ないと思いますのでスロットル機能のテストに進みます。スロットルに関してはBreezeのテストコードが無かったので新規に作成しました。少し長いですが、以下が一連のテストコードになります。

tests/Feature/Auth/AuthenticationTest.php

    public function test_login_throttle(): void
    {
        $user = User::factory()->create(
            ['password' => 'password']
        );

        //5回の失敗までは通常のエラーメッセージが返る
        for ($i = 0; $i < 5; ++$i) {

            $response = $this->post('/login', [
                'email' => $user->email,
                'password' => 'wrong-password', //異なるパスワード
            ]);

            $response->assertSessionHasErrors(['email' => 'ログイン情報が存在しません。']);
        };

        //5回失敗後、正しいパスワードでログイン試行
        $response = $this->post('/login', [
            'email' => $user->email,
            'password' => 'password',
        ]);

        $response->assertSessionHasErrors([
            'email' => 'ログイン試行の規定数に達しました。59秒後に再度お試しください。'
        ]);

        //5０秒経過
        sleep(50);

        //まだ60秒経過していないので正しいパスワードでもログイン不可
        $response = $this->post('/login', [
            'email' => $user->email,
            'password' => 'password',
        ]);

        //メッセージの部分比較
        $response->assertInvalid([
            'email' => 'ログイン試行の規定数に達しました。'
        ]);

        sleep(10);

        //60秒経過後はログインできる
        $response = $this->post('/login', [
            'email' => $user->email,
            'password' => 'password',
        ]);

        $this->assertAuthenticated();
        $response->assertRedirect(RouteServiceProvider::HOME);
    }

まずは、正しいEメールと間違ったパスワードで５回ログインを試行しています。当然ログインは失敗しますが、その際のメッセージは通常のログイン失敗のエラーメッセージであることを確認しています。

次に、６回目に正しいEメールとパスワードでログインします。ですがロックがかかっているためログインはできません。その際のエラーメッセージは「ログイン試行の規定数に達しました。・・・」であることを確認しています。

つづいて５０秒後にも、正しいEメールとパスワードで再度ログインを試行して、ログイン不可の確認をします。

上のコードでは「５０秒後」の時間設定にはsleep(50)を使用していますが、sleep()を使うと実際にその秒数待ち時間が入るため、待ち時間が長い場合は以下のようにCarbonを使うことで実際に待つことなくテストが実行できます。

...
use Carbon\Carbon;
...
        // 50秒経過
        Carbon::setTestNow(Carbon::now()->addSeconds(50));
        // sleep(50);
...

また、「ログイン試行の規定数に達しました。**秒後に再度・・・」のエラーメッセージのアサートですが、秒数部分はどうしてもテストごとに差異が出てしまいます。エラーメッセージのアサートとして馴染みのあるassertSessionHasErrors()は全文比較するコマンドのため、メッセージの一部のみを確認したい場合はLaravel8から追加されたassertInvalid()が便利です。

使い方はassertSessionHasErrors()と同じですが、以下のようにメッセージの部分比較が可能です。

       $response->assertSessionHasErrors([
            'email' => 'ログイン試行の規定数に達しました。59秒後に再度お試しください。'
        ]);

        $response->assertInvalid([
            'email' => 'ログイン試行の規定数に達しました。'
        ]);

最後に、さらに１０秒待って、今度は６０秒経過したのでログイン可能なことを確認です。ここでも、sleep()の代わりに先ほどのCarbonのメソッドを使用して効率的にテストを進めることが可能です。

では、テストを実行してみます。

  $ php artisan test --filter=AuthenticationTest

   PASS  Tests\Feature\Auth\AuthenticationTest
  ✓ users can authenticate using the login screen                                                                                                        0.28s  
  ✓ login throttle                                                                                                                                      61.16s  

  Tests:    2 passed (20 assertions)

問題なくテストが成功しました。画面でのテストでは少し手間がかかる機能もこうやってユニットテストで確認できるのは便利ですね。

artisan modelコマンド

Fri, 22 Mar 2024 09:30:22 +0900

artisan dbコマンドはLaravelのプロジェクトのデータベースの情報を表示してくれるコマンドでしたが、artisan modelはLaravelのModelのためのコマンドです。見てみましょう。

model:show

※初めての方は、まずartisan dbコマンド読んでください。準備が要ります。

すでに準備がされた方は、早速artisan modelを実行しましょう。

$ php artisan model:show User

と実行すると、

有用な情報がいっぱいありますが、説明が必要ですね。

Attributes

artisan db:table usersの実行においてもDBテーブルの項目やデータタイプが表示されますが、上ではそれらに加えて、fillable、hidden、castの属性もいくつかの項目で表示されています。

以下のModelの定義を見るとそれらの属性が上で表示されているがわかります。

app/Models/User.php

...

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

    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array<int, string>
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast.
     *
     * @var array<string, string>
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
        'password' => 'hashed',
    ];
}

さらに、accessorの定義を加えてみましょう。

app/Models/Post.php

...
class User extends Authenticatable
{
...
    public function getNameAttribute()
    {
        return Str::upper($this->attributes['name']); // 大文字に変換
    }
}

再度実行すると、

表示されていますね。

Relations

上のRelationsのセクションでは、HasApiTokensとNotifiableのトレイトで定義されているRelationが表示されていますが、それでは少しわかりづらいので、PostsのModelを作成して、以下のようにUsersにRelationを定義します。

app/Models/Post.php

...
class User extends Authenticatable
{
...
   public function posts(): HasMany
    {
        return $this->hasMany(Post::class);
    }
}

再度実行すると、

しっかり表示されていますね。

Observers

これは、モデルに関連するDB処理イベントのメソッドを表示します。例えば、以下のようにDBレコード作成後の処理を定義して、

app/Models/Post.php

...
class User extends Authenticatable
{
...
   public static function booted()
    {
        static::created(function ($user) {
           // レコードが作成された後に実行する処理
        });

    }
}

再度実行すると、

最も便利なartisan dbコマンドの使い方

前回の説明において、このコマンドで一番大事なことを忘れていました。というか、最近になってたまたまオプションなしで実行して気づいたことです。

php artisan dbとオプションなしで実行すると、

$ php artisan db
mysql: [Warning] Using a password on the command line interface can be insecure.
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 369
Server version: 8.0.33 MySQL Community Server - GPL

Copyright (c) 2000, 2023, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

そうなんです。mysqlのコマンドを.envで指定したログインとパスワードを使って実行してくれるのです。便利ですね。

最後に

artisanコマンドはLaravelを使う開発者にとってなくてはならない重要なツールですが、機能が多すぎてとてもオプションを覚えることができません。まして毎回バージョンごとに数が増えるし。

しかし、とても便利なサイト見つけました。

https://artisan.page/

ドロップダウンで、バージョンも変えることもできます。

ユーザー認証のテスト（４）Laravel 10　パスワードリセット

Tue, 19 Mar 2024 12:01:40 +0900

Laravelユーザー認証のテスト4回目、今回はパスワードリセットについてです。ユーザーがパスワードを忘れた時、「パスワードを忘れた？」などのリンクからパスワードリセットリクエストを送信する、よく実装されている機能です。

テスト対象画面とテスト項目

パスワードリセットの機能をテストするにあたり、テスト対象はパスワードリセットのリクエスト画面・パスワードリセット画面の２つがあります。それぞれの画面のテスト項目にはさまざまなケースが考えられますが、今回は以下としました。

パスワードリセットのリクエスト画面

パスワードリセットリクエスト画面にアクセスできる
メールアドレスを入力し、登録済みのメールアドレスならユーザー宛てにリセットメールが送信される
未登録のメールアドレスであればメールは送信されない

パスワードリセット画面

メールに記載されたリセット用のリンクからパスワードリセット画面へアクセスできる
パスワードを新しいものに変更、その後新しいパスワードでログインができる

パスワードリセットリクエスト画面のテスト

ではまずは、「パスワードリセットリクエスト画面にアクセスできる」のテストからです。

tests/Feature/Auth/PasswordResetTest.php

    public function test_reset_password_link_screen_can_be_rendered(): void
    {
        $response = $this->get('/forgot-password');

        $response->assertStatus(200);
    }

ここは特に変わった記述はありません。未ログイン状態でアクセスすることが前提なので、テストコードは２行で完成です。

次は「メールアドレスを入力し、登録済みのメールアドレスならユーザー宛てにリセットメールが送信される」のテストですが、その前にポスト送信時に実行されるコードを確認してみると、以下のようになっていました。

app/Http/Controllers/Auth/PasswordResetLinkController.php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Password;
use Illuminate\View\View;

class PasswordResetLinkController extends Controller
{
...
    public function store(Request $request): RedirectResponse
    {
        $request->validate([
            'email' => ['required', 'email'],
        ]);

        // We will send the password reset link to this user. Once we have attempted
        // to send the link, we will examine the response then see the message we
        // need to show to the user. Finally, we'll send out a proper response.
        $status = Password::sendResetLink(
            $request->only('email')
        );

        return $status == Password::RESET_LINK_SENT
                    ? back()->with('status', __($status))
                    : back()->withInput($request->only('email'))
                            ->withErrors(['email' => __($status)]);
    }
}

こちらを踏まえて、Breezeが提供してくれているテストにリダイレクト先・セッションメッセージのアサートを追加しました。以下がそのテストコードになります。

tests/Feature/Auth/PasswordResetTest.php

    public function test_reset_password_link_can_be_requested(): void
    {
        Notification::fake(); //メールが実際に送信されないように

        $user = User::factory()->create();

        $response = $this->from('forgot-password')
            ->post('/forgot-password', ['email' => $user->email]);

        $response->assertRedirect('forgot-password')
            ->assertSessionHas('status', 'パスワードリセットメールを送信しました。');

        Notification::assertSentTo($user, ResetPassword::class);
    }

ステータスメッセージとともに前画面にリダイレクトされ、ユーザー宛てにメールが正常に送信されることを確認しています。

$this->from(‘forgot-password’)ですが、これは何をしているかというとリファラーをセットしています。テストでは、ブラウザ操作時のように「前のURL」という概念が存在しません。そのためfrom()関数を使ってポスト送信時のリファラをセットしてあげる必要があります。

３つ目は、「未登録のメールアドレスであればメールは送信されない」のテストです。このケースはBreezeのテストコードには含まれていなかったため新規に作成しています。

tests/Feature/Auth/PasswordResetTest.php

    public function test_reset_password_link_request_fails_for_unregistered_email(): void
    {
        Notification::fake();

        $response = $this->from('forgot-password')
            ->post('/forgot-password', ['email' => 'unregistered@example.com']);

        $response->assertRedirect('forgot-password')
            ->assertSessionHasErrors('email', ['このメールアドレスに一致するユーザーは存在しません。']);

        Notification::assertNothingSent();
    }

from()を使ってリファラをセット・ポスト送信をするところまでは先ほどと同じです。もちろんメールアドレスは未登録のものを使用してくださいね。ポスト送信の結果からassertSessionHasErrors()を使用して、エラーメッセージemailが期待通りであることをアサートしています。

最後のassertNothingSent()は、通知が何も送信されていないことをアサートしています。

ではここまでで作成したテストを実行してみましょう。

$ php artisan test --filter=PasswordResetTest

   PASS  Tests\Feature\Auth\PasswordResetTest
  ✓ reset password link screen can be rendered                                                                    0.57s  
  ✓ reset password link can be requested                                                                          0.16s  
  ✓ reset password link request fails for unregistered email                                                      0.17s  

  Tests:    3 passed (10 assertions)
  Duration: 1.14s

問題なさそうです。

パスワードリセット画面でのテスト

次は、パスワードリセット実行画面のテストです。まずは「メールに記載されたリセット用のリンクからパスワードリセット画面へアクセスできる」をテストします。

tests/Feature/Auth/PasswordResetTest.php

    public function test_reset_password_screen_can_be_rendered(): void
    {
        Notification::fake();

        $user = User::factory()->create();

        $this->post('/forgot-password', ['email' => $user->email]);

        Notification::assertSentTo($user, ResetPassword::class, function ($notification) {
            $response = $this->get('/reset-password/' . $notification->token);

            $response->assertStatus(200);

            return true;
        });
    }

上記はBreezeのテストコードから特に変更はしていません。コードの前半部分はユーザーの作成とポスト送信に関する記述なので先ほどまでのテストと同じで、後半のNotification::assertSentToの部分がこのテストのメインとなります。

クロージャーの引数として、$notificationを受け取っています。これはユーザーへ送信される通知メールであるResetPasswordクラスのインスタンスなので、これを使って「メールが送信されていること」だけでなく「通知メールに含まれるトークンを使ってパスワードリセット画面（/reset-password/{token}）にアクセスし、そのページが正常にレンダリングされる」ことの一連のテストが可能になります。

では次が最後のテスト項目です。「パスワードを新しいものに変更、その後新しいパスワードでログインができる」をテストします。Breezeのテストコードをベースに、成功時のセッションメッセージと新しいパスワードでログインできることのアサートを追加しました。

tests/Feature/Auth/PasswordResetTest

    public function test_password_can_be_reset_with_valid_token(): void
    {
        Notification::fake();

        $user = User::factory()->create();

        $this->post('/forgot-password', ['email' => $user->email]);

        Notification::assertSentTo($user, ResetPassword::class, function ($notification) use ($user) {
            $response = $this->post('/reset-password', [
                'token' => $notification->token,
                'email' => $user->email,
                'password' => 'new_password', //新しいパスワード
                'password_confirmation' => 'new_password',
            ]);

            $response->assertRedirect('login')
                ->assertSessionHas('status', 'パスワードをリセットしました。');

            return true;
        });

        $this->assertGuest(); //この時点ではまだ未ログイン状態であることを確認

        $this->post('/login', [
            'email' => $user->email,
            'password' => 'new_password', //新しいパスワードでログイン
        ]);

        $this->assertAuthenticated(); //ログインできたことを確認
    }

このテストでもNotification::assertSentToが使用されていますが、今度はクロージャーの中でパスワードリセットのポスト送信を実行し、リダイレクト先・ステータスメッセージが期待通りであることを確認しています。

また、パスワードリセット完了直後はユーザーはまだ未ログイン状態となっています。そのため新しいパスワード（new_password）を使ってログインを実行し、ログインが成功することを確認しています。

ではここで作成した２つのテストを実行してみます。

$ php artisan test --filter=PasswordResetTest

   PASS  Tests\Feature\Auth\PasswordResetTest
  ✓ reset password screen can be rendered                                                                         0.60s  
  ✓ password can be reset with valid token                                                                        0.10s  

  Tests:    2 passed (8 assertions)
  Duration: 0.89s

うまくいきました！次回は、ログインスロットルに関するテストをご紹介します。

ユーザー認証のテスト（３）Laravel 10　ログアウト

Sat, 17 Feb 2024 10:13:04 +0900

前回のログイン・ログイン失敗のテストに続き、今回はログアウトのテストをご紹介します。また認証機能にBreezeを使用した環境で、ログアウト時のリダイレクト先の変更も行います。

ログアウトのテスト

前回と同じくBreezeが提供してくれているテストをベースに、テスト名はそのままでアサーションとポスト送信の記述を少し変更しています。

tests/Feature/Auth/AuthenticationTest.php

    public function test_users_can_logout(): void
    {
        $user = User::factory()->create();

        $this->actingAs($user); //$userを認証済み状態に

        $this->assertAuthenticated(); //ログインしていることを確認

        $response = $this->post('/logout');

        $this->assertGuest();         //ログアウトしていることを確認

        $response->assertRedirect('/');
    }

POST送信でログアウトを実行し、正しく認証が削除されているか、リダイレクトされているかをチェックしています。またactingAs()を使うことで、ログイン処理を記述せずに対象のユーザーを認証済み状態に設定できます。

このテストでは分かりやすいようにログアウト動作の前後で認証状態をチェックしていますが、ログアウト前のチェックが不要な場合は以下のように、actingAs()とpost()を１行で書くこともできます。

        $response = $this->actingAs($user)->post('/logout');

では、テストを実行してみます。

$ php artisan test --filter=test_users_can_logout

   PASS  Tests\Feature\Auth\AuthenticationTest
  ✓ users can logout                                                                                                                   0.63s  

  Tests:    1 passed (4 assertions)
  Duration: 0.93s

問題なさそうですね。

ログアウト後の遷移先を変更（Breeze使用）

デフォルトでログアウト後のリダイレクト先はルート画面となっていますが、異なる画面へ遷移するよう変更したいケースも多いと思います。

Breezeでログアウトの処理がどのように定義されているのか見てみます。まずはルーティングから。

routes/auth.php

...
    Route::post('logout', [AuthenticatedSessionController::class, 'destroy'])
                ->name('logout');
...

AuthenticatedSessionControllerのdestroy()に定義されていることが分かりました。同ファイルを一部抜粋したものが以下になります。

app/Http/Controllers/Auth/AuthenticatedSessionController.php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Http\Requests\Auth\LoginRequest;
use App\Providers\RouteServiceProvider;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use Inertia\Response;

class AuthenticatedSessionController extends Controller
{
...
    /**
     * Destroy an authenticated session.
     */
    public function destroy(Request $request): RedirectResponse
    {
        Auth::guard('web')->logout();

        $request->session()->invalidate();

        $request->session()->regenerateToken();

        return redirect('/');
    }
}

ログアウトの処理と、最後にリダイレクト先が指定されていますね。redirect()の部分を、ログイン画面にリダイレクトするよう修正しました。

        return redirect('/login');

ここで、ログアウトのテストコードに戻ります。

まだテストコードへはリダイレクト先の変更が反映されていないので、テスト失敗が正しい挙動です。念の為テストを実行して確認してみましょう。

$ php artisan test --filter=test_users_can_logout

   FAIL  Tests\Feature\Auth\AuthenticationTest
  ⨯ users can logout                                                                                                                   0.51s  
  ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────  
   FAILED  Tests\Feature\Auth\AuthenticationTest > users can logout                                                                           
  Failed asserting that two strings are equal.
  -'http://localhost'
  +'http://localhost/login'

ちゃんとリダイレクト先相違のエラーが出ました。コントローラーの変更が反映されていることが分かったので、現在の仕様に合わせてテストを書き換えます。

    public function test_users_can_logout(): void
    {
        $user = User::factory()->create();

        $response = $this->actingAs($user)->post('/logout');

        $this->assertGuest();

        $response->assertRedirect('/login'); //リダイレクト先を修正
    }

テストを実行します。

$ php artisan test --filter=test_users_can_logout

   PASS  Tests\Feature\Auth\AuthenticationTest
  ✓ users can logout                                                                                                                   0.49s  

  Tests:    1 passed (3 assertions)
  Duration: 0.72s

成功しました！次回は、パスワードのリセットに関するテストをご紹介します。

DKIM署名を含むメールのユニットテスト

Tue, 06 Feb 2024 12:51:34 +0900

「LaravelでメールをDKIM署名」で作成したメールのDKIM署名が正しいかどうかを判断するには、Gmailアプリなら受信したメールの「メッセージのソースの表示」でDKIMがPASSあるいはFAILで判定が表示されるのでわかります。しかし、ユニットテストでそれと同様な判断するにはどうしたらよいのか、というのが今回のお話です。

メールのDKIM署名をチェックするツール

さきに話したようにGmailでは、以下のように「メッセージのソースの表示」でソースを見ると、DKIMの署名が正しいならPASSと出ます。

しかし、ユニットテストでDKIM署名のチェックするには、配信したメールをファイルに落としてそれをチェックできるコマンドが必要です。

運よくそのツールを見つけることができました。ツールは残念ながらphpではなくpythonで書かれたものですが、以下の実行でインストールできます。

$ pip install dkimpy

このコマンドを利用するとDKIM署名のチェックの実行はとても簡単です。先ほどのGmailからダウンロードしたファイルをtest.emlとしてチェックしてみましょう。

$ dkimverify < test.eml
signature ok

署名OKです！

テストしたメールの送り元（From）はhello@lotsofbytes.comで、lotsofbytes.comのドメインには前回説明したようにAmazonのRoute53のDNSサーバーにTXTに公開鍵のエントリーが登録されています。このツールはそれを取得してメールのDKIM署名が正しいかどうかチェックしてくれます。

配信するメールをファイルに落とす

DKIM署名の正負を判断してくれるコマンドを見つけたところで、こんどはそのコマンドにフィードするためのメールデータが必要です。メールを作成するのは前回に開発したDKIM署名処理を行うMailableなので、それで生成されたメールのデータをファイルに落とす必要あります。しかし、Mailableから直接出力できるメソッドがあれば良いのですが、Mailableを使用するメーラー（smtpとかの）との関わりのため、そのようなメソッドはMailableには存在しません。

そこで考えるのは、メーラーをログとして、つまり.envでMAIL_MAILER=logと設定してファイルに落とすことです。しかし、ファイルはデフォルトではlaravel.logとなるし、出力はログなので記録時の日時の余計な文字列が含まれ、加工が必要となります。

ちなみに、ユニットテストの設定のXMLファイルでは、以下のようにメーラーは配列に落とすのがデフォルトとなっています。

phpunit.xml

<?xml version="1.0" encoding="UTF-8"?>
<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="vendor/phpunit/phpunit/phpunit.xsd"
         bootstrap="vendor/autoload.php"
         colors="true"
>
...
    <php>
...
        <env name="MAIL_MAILER" value="array"/>
...
    </php>
</phpunit>

ということは、メールの送信のテストがあれば、メモリにその内容が入ることになります。つまり、メール配信後にメモリから送信した内容を取得すればよいのです。

これは意外に簡単で、通常のメール送のコードにtoString()の文字列化のメソッドを追加するだけです。以下、tinkerで見てみましょう。

まず、ユニットテストのようにメーラーを配列とします。

> config(['mail.default' => 'array']);
= null

宛先を変数として、

> use App\Mail\Newsletter;
> $email = 'test@example.com';
= "test@example.com"

NewsletterのMailableを初期化してMailのファサードで送信すると、

>  Mail::to($email)->send(new Newsletter($email))->toString();

DKIM署名のメールのデータが返ってきます。

= """
  From: Mailable Test <hello@lotsofbytes.com>\r\n
  To: test@example.com\r\n
  Subject: =?utf-8?Q?=E3=83=A1=E3=83=AB=E3=83=9E=E3=82=AC?=\r\n
   =?utf-8?Q?=E3=81=AE=E9=85=8D=E4=BF=A1=E3=81=A7=E3=81=99?=\r\n
  MIME-Version: 1.0\r\n
  Date: Sun, 04 Feb 2024 21:58:58 +0000\r\n
  Message-ID: <bfe853f9bd87f57ab1f02e48f3465bd9@lotsofbytes.com>\r\n
  DKIM-Signature: v=1; q=dns/txt; a=rsa-sha256;\r\n
   bh=Ueb0qJ5i58RAOT361r7NWPIoj8dj5uSTjaEHFZSj/p8=; d=lotsofbytes.com; h=From:\r\n
   To: Subject: MIME-Version: Date: Message-ID; i=@lotsofbytes.com; s=default;\r\n
   t=1707083938; c=relaxed/relaxed;\r\n
   b=EiklbRI4G7Q8VpIM4LAXfyCJKJveXZQMdRza/Q1g/XyAG0wEp5HfXa33RnylIB27C1gozstjp\r\n
   InPV6cqTrWI1SF0xQaBjknHqVIR+eh/Eh+zEidYgmP4Ocs2QC/6iAtx1UpCvgIk4AnvgM/y3q\r\n
   RW+3DkVmIu79nGSRzBtwG3BlG5iA1Eo4NGZt//k70Qi8Ngkl33ce0VeyYZ5EzHVokupnzJiB3\r\n
   yZeWtUEBERog12/kKeLYSLLN8nvGRY1mByWLwPuWF3zYVX3Luji9nMmYRqNKCWZbhe+SFTxwJ\r\n
   yWLYYgYXqZDkw0pdgI2g62Xb9xfsySAIIbcphrceDUM1E82w5A==\r\n
  List-Unsubscribe: <http://localhost/unsubscribe?token=eyJpdiI6IjRhRGNvdnJHWEdFd1pRWmZhNmhBbFE9PSIsInZhbHVlIjoiSit0WmxBWE5JSTdvK3FCNjFJempDUWY3SmVEWFo0NXZhTjRDc215cmxUUT0iLCJtYWMiOiJhNmJkNmQyMmVlMzI3YjJmZDdkMGMyMGRiNjhhYjhiNTgyOTEyZGFjYTFhNzkzZWIxOTQ5MzU1MTlhZDJkMjYzIiwidGFnIjoiIn0%3D>\r\n
  List-Unsubscribe-Post: List-Unsubscribe=One-Click\r\n
  Content-Type: text/html; charset=utf-8\r\n
  Content-Transfer-Encoding: quoted-printable\r\n
  \r\n
  <html>\r\n
      <body>\r\n
          <h1>=E3=83=A1=E3=83=AB=E3=83=9E=E3=82=AC=E3=81=AE=E9=85=8D=E4=BF=\r\n
  =A1=E3=81=A7=E3=81=99</h1>\r\n
          <p>=E3=81=84=E3=81=A4=E3=82=82=E3=83=A1=E3=83=AB=E3=83=9E=E3=82=\r\n
  =AC=E3=82=92=E8=B3=BC=E8=AA=AD=E3=81=97=E3=81=A6=E9=A0=82=E3=81=84=E3=81=\r\n
  =A6=E3=81=82=E3=82=8A=E3=81=8C=E3=81=A8=E3=81=86=E3=81=94=E3=81=96=E3=81=\r\n
  =84=E3=81=BE=E3=81=99=E3=80=82</p>\r\n
      </body>\r\n
  </html>\r\n
  """

>

この文字列をファイルに保存して、dkimverifyのコマンドにフィードすればユニットテストの作成が可能ですね。

ユニットテストを作成

以下、Dkim署名のユニットテストを作成してみました。

tests/Unit/NewsletterTest

namespace Tests\Unit;

use Tests\TestCase;
use App\Mail\Newsletter;
use Illuminate\Support\Facades\Mail;

class NewsletterTest extends TestCase
{
    protected $exportFileName, $emlPath;

    protected function setUp(): void
    {
        parent::setUp();

        // テスト用のファイル名を設定
        $this->exportFileName = 'NewsletterTest.eml';
        $this->emlPath = storage_path('app/'.$this->exportFileName);

        // テスト用のファイルが存在する場合は削除
        @unlink($this->emlPath);
    }

    /**
     * @test
     *
     * @covers App\Mail\NewsletterMessage
     */
    public function buildWithDkim(): void
    {
        $email = 'test@example.com';

        $mailable = new Newsletter($email);

        // メール送信して文字列化
        $data = Mail::to($email)->send($mailable)->toString();

        // メールをファイルに保存
        file_put_contents($this->emlPath, $data);

        //DKIM情報チェック
        $output = shell_exec('/usr/local/bin/dkimverify < '.$this->emlPath);
        $this->assertEquals("signature ok\n", $output);
    }
}

テストを実行してみましょう。

$ php artisan test --filter NewsletterTest

   PASS  Tests\Unit\NewsletterTest
  ✓ build with dkim                                                                                                                                                                                       0.33s

  Tests:    1 passed (1 assertions)
  Duration: 0.37s

問題なくパスです。

Google AnalyticsのデータをAPIで取得（２）コマンドを作成

Sun, 28 Jan 2024 03:02:42 +0900

前回においてGoogle Cloudを通じてGoogle Analyticsへのアクセス認証のお膳立てができたとろで、今回は目的のデータ取得のコマンドの開発です。

認証に必要なデータを設定する

新規のLaravelのプロジェクトを作成した後に、まず前回で用意したアクセス認証のための、プロパティIDと秘密鍵を含むga4.keyファイルの取り込みの設定をします。

プロパティID

GA4のプロパティIDは、config(‘services.ga4.property_id’)として取り込むので、以下のコードを追加します。

config/services.php

return [

    /*
    |--------------------------------------------------------------------------
    | Third Party Services
    |--------------------------------------------------------------------------
    |
    | This file is for storing the credentials for third party services such
    | as Mailgun, Postmark, AWS and more. This file provides the de facto
    | location for this type of information, allowing packages to have
    | a conventional file to locate the various service credentials.
    |
    */
...

    'ga4' => [
        'property_id' => env('GA4_PROPERTY_ID'),
    ],

];

もちろん、.envでは、以下のようにプロパティIDを指定します。

.env

...
GA4_PROPERTY_ID=2XXXXXX2

ga4.key

サービスアカウントで作成した秘密鍵を含むjsonファイルga4.keyは、storage/ga4.keyに移します。そこの場所にファイルを置く理由は、GITバージョン管理から外すためです。Laravelのデフォルトの.gitignoreの設定には、/storage/*.keyがあります。

.gitignore

/node_modules
/public/build
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.env.production
.phpunit.result.cache
...

Laravelのコマンドを作成

いよいよコマンドの開発です。まず、必要なライブラリを以下の実行で追加します。

$ composer require google/analytics-data

そして、GA4のデータの取得のためのコマンドを作成します。

app/Console/Commands/Ga4Command.php

namespace App\Console\Commands;

use Illuminate\Support\Str;
use Illuminate\Console\Command;
use Google\Analytics\Data\V1beta\BetaAnalyticsDataClient;
use Google\Analytics\Data\V1beta\DateRange;
use Google\Analytics\Data\V1beta\Dimension;
use Google\Analytics\Data\V1beta\OrderBy;
use Google\Analytics\Data\V1beta\OrderBy\MetricOrderBy;
use Google\Analytics\Data\V1beta\Metric;

class Ga4Command extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'ga4';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Get GA4 data';

    /**
     * Execute the console command.
     *
     * @return int
     */
    public function handle()
    {
        $client = new BetaAnalyticsDataClient([
            'credentials' => storage_path('ga4.key'), // GA4のデータのアクセスに必要なファイルへのパス
        ]);

        $response = $client->runReport([
            'property' => 'properties/'.config('services.ga4.property_id'), // このプロパティIDのプロパティにアクセス
            'dateRanges' => [
                new DateRange([ // 今日から過去２８日間のデータに絞る
                    'start_date' => '28daysAgo', 
                    'end_date'   => 'today',
                ]),
            ],
            'dimensions' => [ // ページタイトルとページパスがディメンション
                new Dimension(['name' => 'pageTitle']),
                new Dimension(['name' => 'pagePath']),
            ],
            'metrics' => [ // ページビューの数が指標
                new Metric(['name' => 'screenPageViews']),
            ],
           'orderBys' => [ // ページビューが多い順から少ない順へ
                new OrderBy([
                    'metric' => new MetricOrderBy([
                        'metric_name' => 'screenPageViews',
                    ]),
                    'desc'   => true,
                ]),
            ],
            'limit' => 10, //最高１０まで
        ]);

        // 出力をブレードでフォーマット

        $rows = [];

        foreach ($response->getRows() as $row) {
            $title = $row->getDimensionValues()[0]->getValue() ?? null;
            $url = $row->getDimensionValues()[1]->getValue() ?? null;
            $count = $row->getMetricValues()[0]->getValue() ?? null;

            if ($url === '/') {
                continue;
            }

            $rows[] = (object) [
                'title' => Str::before($title, ' – ララジャパン'),
                'url'   => $url,
                'views' => $count,
            ];
        }

        $html = view('ranking', compact('rows'))->render();

        echo $html;

        return Command::SUCCESS;
    }
}

上のrunReport()に渡す配列のディメンションと指標は以下に説明があります。

https://developers.google.com/analytics/devguides/reporting/data/v1/api-schema?hl=ja#dimensions

上で使用したディメンションは、

指標は、

コマンドの実行

上のコマンドを実行すると、以下のような出力となります。これをコピペしてWordpressに入れ込みます。

$ php artisan ga4
<div class="mg-wid-title"><h6 class="wtitle">Trending</h6></div>
<ol>
    <li><a href="/2023/11/23/メルマガをワンクリックで登録解除/" class="trending">メルマガをワンクリックで登録解除</a></li>
    <li><a href="/2021/05/03/bulk-insertで大量のデータをdbに登録する/" class="trending">bulk insertで大量のデータをDBに登録する</a></li>
    <li><a href="/2020/02/08/phpunitの実行のあれこれ/" class="trending">phpunitの実行のあれこれ</a></li>
    <li><a href="/2022/08/22/sqlのcount関数と条件/" class="trending">SQLのCOUNT()関数と条件</a></li>
    <li><a href="/2020/10/03/withinput-witherrors-with/" class="trending">withInput(), withErrors(), with()</a></li>
    <li><a href="/2022/01/24/laravel-collection（９）foreachの代わりにeach/" class="trending">Laravel Collection（９）foreachの代わりにeach</a></li>
    <li><a href="/2016/06/19/eloquentでカウントするときの注意/" class="trending">Eloquentでカウントするときの注意</a></li>
    <li><a href="/2023/09/25/laravelの新しいmailableでhtmlメールを送信/" class="trending">Laravelの新しいMailableでHTMLメールを送信</a></li>
    <li><a href="/2020/07/25/abortを使ってリダイレクト/" class="trending">abort()を使ってリダイレクト</a></li>
</ol>

ちなみに、上のコマンドで使用されたブレードは、

resources/views/ranking.blade.php

<div class="mg-wid-title"><h6 class="wtitle">Trending</h6></div>
<ol>
@foreach ($rows as $row)
    <li><a href="{!! $row->url !!}" class="trending">{{ $row->title }}</a></li>
@endforeach
</ol>

ユーザー認証のテスト（２）Laravel 10　ログイン

Sat, 20 Jan 2024 12:39:28 +0900

前回の画面表示テストに続き、今回もLaravelユーザー認証のテストです。正しいＥメールとパスワードでログインが成功するケースと、間違ったパスワードでログインしログインに失敗する２つのケースについて、テストを作成します。

エラーメッセージの日本語化

前回、Laravelと認証機能のBreezeをインストールした直後の環境でテストを作成しました。後でご紹介するログイン失敗のケースではエラーメッセージも含めてアサートしたいので、まずは日本語化の設定から進めてゆきます。

Githubで公開されているBreezejpという日本語化パッケージを使わせていただきます。名前にBreezeとついていますがJetstream、Laravel UIなどの環境でも使用可能とのこと。適用方法もとても簡単で、以下の２つのコマンドを実行するだけです。

まず、composerでパッケージをインストールします。

$ composer require askdkc/breezejp --dev

次に以下のコマンドを実行。

$ php artisan breezejp
Laravel Breeze用に日本語翻訳ファイルを準備します
config/app.phpのlocaleをjaにします

 GitHubリポジトリにスターの御協力をお願いします🙏 (yes/no) [yes]:
 > yes

Thank you! / ありがとう💓
日本語ファイルのインストールが完了しました!

これでプロジェクト直下にlangディレクトリと、日本語用ファイルが作成できました。また出力内容からも分かるように、言語ファイルの設置だけでなくconfig/app.phpのlocaleもjaに変更してくれています。

これで日本語化の設定は完了です。

ここまででBreezeと、Breezejpの２つが出てきました。名前が似ていて少しややこしいのですが、前者は認証機能を簡単に実装できるパッケージで（前回の記事でインストールしました）、後者は今回インストールした日本語化のパッケージになります。

テスト用Userデータ

次に、テストに必要なダミーユーザーを作成するためのFactoryについてです。Laravelデフォルトですでに用意されているので、内容を確認してみます。

database/factories/UserFactory.php

...
class UserFactory extends Factory
{
    protected static ?string $password;

    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        return [
            'name' => fake()->name(),
            'email' => fake()->unique()->safeEmail(),
            'email_verified_at' => now(),
            'password' => static::$password ??= Hash::make('password'),
            'remember_token' => Str::random(10),
        ];
    }
...

パスワードには、”password”という文字をハッシュ化した値が保存されるようになっているようですね。

ログイン成功のテスト

準備ができたので、テストをしてゆきましょう。まずはログイン成功のテストです。前回と同じくBreezeが用意してくれているユニットテストを使用しますが、アサートを少し追加しています。

tests/Feature/Auth/AuthenticationTest.php

    public function test_users_can_authenticate_using_the_login_screen(): void
    {
        $user = User::factory()->create();

        $this->assertGuest(); //未ログイン状態であることをチェック

        $response = $this->post('/login', [
            'email' => $user->email,
            'password' => 'password',
        ]);

        $this->assertAuthenticated(); //ログインが成功したことをチェック

        $response->assertRedirect(RouteServiceProvider::HOME);
    }

このテストでは、Laravelが用意してくれているログイン認証のための便利なアサーションを２つ使用しています。assertGuest()は、ユーザーが未ログインであること、またassertAuthenticated()は、ユーザーが認証済みであることをアサートしています。ログイン前後の認証状態を効率的にチェックできてとても便利ですね。

この２つの関数は通常、guardを引数として受け取ります。上記のテストでは引数を省略していますが、その場合にはconfig/auth.phpのdefaultsセクションで定義されているwebガードがデフォルトとして使用されます。

では以下のように、guardsの定義にwebだけでなくadminも定義されている場合はどうでしょうか。

config/auth.php

・・・
    'defaults' => [
        'guard' 　　　　　　　　=> 'web',
        'passwords' => 'users',
    ],
・・・
    'guards' => [
        'web' => [
            'driver'   => 'session',
            'provider' => 'users',
        ],
        'admin' => [
            'driver'   => 'session',
            'provider' => 'admin',
        ],
    ],
・・・

adminガードに対して認証確認を行いたい場合は、以下のように引数にadminを渡します。環境に併せて適宜ご変更ください。

　　       $this->assertGuest('admin'); 
        $this->assertAuthenticated('admin');

ログイン失敗のテスト

次はログインに失敗する場合のテストです。正しいパスワードは先ほどのFactoryで設定されている通り"password"ですが、失敗するために"wrong-password“でログインしてみます。

tests/Feature/Auth/AuthenticationTest.php

    public function test_users_can_not_authenticate_with_invalid_password(): void
    {
        $user = User::factory()->create();

        $this->assertGuest(); //未ログイン状態であることをチェック

        $response = $this->post('/login', [
            'email' => $user->email,
            'password' => 'wrong-password',
        ]);

        $response->assertSessionHasErrors([
            'email' => 'ログイン情報が存在しません。'
        ]);

        $this->assertGuest();
    }

エラーメッセージは先ほど日本語化したため、正しく設定されていれば日本語のメッセージが返るはずです。

では、ログイン成功・失敗のテストを実行してみましょう。

$ php artisan test --filter=AuthenticationTest

   PASS  Tests\Feature\Auth\AuthenticationTest
  ✓ users can authenticate using the login screen                                              0.58s  
  ✓ users can not authenticate with invalid password                                           0.27s  

  Tests:    2 passed (8 assertions)
  Duration: 1.04s

テストが成功しました！

次回は、ログアウト関連のテストをご紹介します。

LaravelでメールをDKIM署名

Wed, 03 Jan 2024 02:38:56 +0900

Googleのメルマガ配信に対する要求は、前回の「メルマガをワンクリックで登録解除」だけでなく、配信するすべてのメールは、「ドメインに SPF および DKIM メール認証を設定します。」とあります。SPFはDNSでの設定のみですが、DKIMメール認証のためには、それぞれの配信メールの内容を元にDKIM署名のヘッダーの追加が必要です。私のクライアントの環境では、postfix + opendkimとシステムレベルで対応としました。ところが、

そのパフォーマンスが非常に悪く配信時間が以前の何倍もかかるようになりました。パフォーマンスの悪さの原因がわからず悩んでいたところ、Laravelで（正確にはSymfonyで）、DKIM署名が可能なことを発見しました。試した結果、postfix + opendkimの半分以上の配信時間が可能となりました。

DKIM認証の仕組み

まず、DKIM認証の仕組みを簡単に説明します。DKIM認証のためには、配信側においてsshと同様に秘密キーと公開キーを作成します。公開キーはドメインのDNSにエントリーを作成して保存します。メール配信側（通常はMTA）は、送信メールのデータと秘密キーでDKIM署名を作成してメールのヘッダーに、DKIM-Signatureの値として追加します。メール送信先のMTAでは、このメールを受け取ると配信者のDNSから先の公開鍵を取得して、メールに含まれるDKIM署名の正当性を検証します。

以下、DKIM認証されたメールのソースです。Dkim-Signatureヘッダーとしてあり、受け取り側のgoogle.comでDKIMの認証がOK（dkim=pass）なことが伺えます。

DKIMのキーを作成

DKIM認証の対象となるドメイン（上の例では、lotsofbytes.com）のために、秘密キーと公開キーを以下のコマンド実行で作成します。

$ openssl genrsa -out dkim_private.key 2048
Generating RSA private key, 2048 bit long modulus
............................+++
......................................+++
e is 65537 (0x10001)

次に、それをもとに公開キーを作成します。

$ openssl rsa -in dkim_private.key -pubout -outform der 2>/dev/null | openssl base64 -A
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2Em6C71Rcvf9qsRJciVRjuqcJQRzMeNRMK7Kizz2jfPxnx7XBu7hg2lJ3AvJj86pXJE2DASR0LmXMUfwOyXQ5dCJrBdfYK31ZCuBfVN1Vz/9utupyq1zPfAoteB8biR+mvc5MinrY2kj6LDBbuYU3Ff930AOVig/5ExAKfrSvt9gqrSSbZn36L/MnigcJWmB61mbCDXEPxTsZ8C+X7OsplpSdmHM3VpL9Dzo6FPyFwNnKMcGMBpgnTGo8PfN7H+Fh5n7QTv42f6BLEiWd47JoBU5yRnRqjVCFenTI1Gu/8RlwaWUJBZ7+eDeJmaPONb6WFjRlVD8ScU0qzEpKi71mQIDAQAB

これをDNSに以下のように、TXTレコードとして追加します。公開キーは長いので１つの文字列で収めることができません。キーの適当な場所で引用符を使って２つの文字列にする必要があります。以下は、AWSでのRoute53でのDNSエントリーの例です。

アプリでDKIM署名

DKIMの署名の機能はLaravelには存在しないので、Laravelが使用しているSymfony MailerのDKIM署名を使います。

「メルマガをワンクリックで解除」で使用したMailableのコードを編集しました。以下では差分を掲載しています。

app/Mail/Newsletter.php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Symfony\Component\Mime\Email;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Headers;
use Illuminate\Queue\SerializesModels;
use Illuminate\Mail\Mailables\Envelope;
use Symfony\Component\Mime\Crypto\DkimSigner;

class Newsletter extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * @var DkimSigner
     */
    public static $signer;

    /**
     * Create a new message instance.
     */
    public function __construct(public string $email)
    {
        $this->email = $email;

        if (! self::$signer) {
            // 署名者のインスタンスを作成
            self::$signer = new DkimSigner(
                'file://'.storage_path('dkim_private.key'), // 秘密キーのパス
                config('mail.dkim.domain'), // DKIM対象のドメイン名
                'default' // DNSのセレクター
            );
        }
    }

    /**
     * Build the message.
     */
    public function build(): static
    {
        $html = view('newsletter')->render();

        // 以下で、メールにDKIM署名
        $this->withSymfonyMessage(function (Email $symfonyMessage) use($html) {
            $symfonyMessage->html($html); // symfonyのコンポーネントにデータを入れる
            $signedEmail = self::$signer->sign($symfonyMessage); // 署名
            $symfonyMessage->setHeaders($signedEmail->getHeaders()); // ヘッダーに追加
        });

        return $this;
    }

...
}

コードの変更箇所は、２つあります。

まずコンストラクターにおいて署名者のインスタンスを作成して、これをクラス変数として$signerに収めます。ここで必要な情報は、

秘密キーのパス：これは先に作成したdkim_private.keyをstorageのディレクトリに置いておくことが必要。Laravelのプロジェクトの.gitignoreには、/storage/*.keyの行が含まれるので、バージョン管理からは除外となります。
DKIMの対象となるドメイン名：ここでは以下のように、congig/mail.phpに項目を追加しておき、.envにて、MAIL_DKIM_DOMAIN=で値を渡します。ちなみに、ここでドメインは、メールの差出人Fromで使われるドメイン（例えば、hello@lotsofbytes.comnならlotsofbytes.com）となります。
config/mail.php
```php return [ ... 'dkim' => [ 'domain' => env('MAIL_DKIM_DOMAIN'), ] ];
公開キーのレコード名のセレクター名：ここでは先にDNSに登録した名前の、default._domainkey.lotsofbytes.comのdefaultを指定。

次に、build()のメソッドを追加します。これは、Laravel 9x以前にEnvelopeやContentなどのコンポートがないときにメールを構築するために使われていたメソッドです。しかし、ここにおいてSymfony MailのモジュールにアクセスしてDKIM署名を実行する機能のために使います。ここで大事なのは、SymfonyのDKIM署名を使用するために、Symfonyのメールのインスタンス（Symfony\Component\Mime\Email）においてメールの内容となるデータを先に注入することです。もちろん、後にLaravel側でも同様な作業が行われますが、それはメール配信時の作業で、この時点ではDKIM署名のために必要なメールの内容がありません。それゆえにです。

最後に

postfix+opendkimのDKIM署名のパフォーマンスが悪かったために、このような一時対応となりましたが、これが複数のMailableで必要となると管理は先のシステムレベルで行えることに越したことはありません（改善方法を知っているお客様がいれば是非ご連絡を！）。しかし、レンタルサーバーでpostfixなどの管理権限がないときは、今回の方法が役に立つと思います。

ユーザー認証のテスト（１）Laravel 10

Thu, 21 Dec 2023 08:43:51 +0900

当サイトでご紹介しているユーザー認証のテストはLaravel5.4のもので、Laravel10となった今ではアサート関数やfactory関連の記述も変化しているため新しいものに書き換えることにしました。Laravelの新規インストールから、認証周りのテスト作成をご紹介します。また、認証機能にはBreezeを使用しました。

Breezeとは?

Breezeについては、Laravelのドキュメントにて以下のように紹介されています。

Laravel Breezeは、ログイン、ユーザー登録、パスワードリセット、メール確認、パスワード確認など、すべての認証機能を最小かつシンプルにLaravelへ実装したものです。

Laravel uiの後継という立ち位置で、Laravel7から採用されています。フロントの実装もついてくるのでインストールするだけですぐに認証機能を利用することができます。

プロジェクト新規作成・Breezeインストール

まずはLaravelをインストールします。本記事作成時のバージョンは10.2.9でした。インストール先のディレクトリ名は適宜書き換えてくださいね。

$ composer create-project laravel/laravel test-project

$ cd test-project

次に、.envを編集します。今回DBはsqliteを使用しますので、DB_CONNECTIONを編集し、以降はコメントアウトします。

.env

DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

次はマイグレーションを実行します。sqliteのデフォルトでは、/database/database.sqlite というファイルが作成されます。

$ php artisan migrate

ここまで進めたら、いよいよBreezeをインストールします。オプションについていくつか質問されますが、テスト用フレームワークはPHPUnitを選択してください。

$ composer require laravel/breeze --dev

$ php artisan breeze:install

┌ Which Breeze stack would you like to install? ───────────────┐
│ Blade with Alpine                                            │
└──────────────────────────────────────────────────────────────┘

┌ Would you like dark mode support? ───────────────────────────┐
│ No                                                           │
└──────────────────────────────────────────────────────────────┘

┌ Which testing framework do you prefer? ──────────────────────┐
│ PHPUnit                                                      │
└──────────────────────────────────────────────────────────────┘

これでインストール関連は完了です。テストを書くだけなら不要ですが、せっかくなのでブラウザの表示も確認してみましょう。

$ php artisan serve

http://127.0.0.1:8000/register へアクセスすると、以下のようなユーザー登録画面が表示されます。

テストの準備

phpunit.xmlを編集します。今回はテストでもsqliteを使用するので、以下のようにDB_CONNECTION、DB_DATABASEのコメントアウトを外すだけです。

phpunit.xml

<?xml version="1.0" encoding="UTF-8"?>
<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="vendor/phpunit/phpunit/phpunit.xsd"
         bootstrap="vendor/autoload.php"
         colors="true"
>
    <testsuites>
        <testsuite name="Unit">
            <directory>tests/Unit</directory>
        </testsuite>
        <testsuite name="Feature">
            <directory>tests/Feature</directory>
        </testsuite>
    </testsuites>
    <source>
        <include>
            <directory>app</directory>
        </include>
    </source>
    <php>
        <env name="APP_ENV" value="testing"/>
        <env name="BCRYPT_ROUNDS" value="4"/>
        <env name="CACHE_DRIVER" value="array"/>
        <env name="DB_CONNECTION" value="sqlite"/> //ここのコメントアウトを外す
        <env name="DB_DATABASE" value=":memory:"/> //ここのコメントアウトを外す
        <env name="MAIL_MAILER" value="array"/>
        <env name="QUEUE_CONNECTION" value="sync"/>
        <env name="SESSION_DRIVER" value="array"/>
        <env name="TELESCOPE_ENABLED" value="false"/>
    </php>
</phpunit>

これで準備は完了です。あとはテストを書いてゆくだけなのですが、なんとBreezeはインストール直後の状態でユーザー登録やログイン認証・パスワード変更のテストが一通り揃っています。

以下はtestsディレクトリのスクリーンショットです。

これだけでテストは十分揃っているようですが、今回は少し付け足したいケースもあったのでこれらのテストを参考にしながら認証テストを作成することにします。

画面表示のテスト

テストを書くにあたりルーティングを確認します。php artisan route:listでリストを出力すると、以下のようになっていました。

このルーティングの中から、まずはログイン画面（login）の表示と、ログイン後のダッシュボード（dashboard）の表示をテストしてみます。AuthenticationTest.phpには初期状態で４つのテストが用意さてれていますが、まずは簡単なテストから、ということでシンプルに以下のように編集しました。１つ目はデフォルトで用意されているテストで、２つ目は新しく追加したものです。

tests/Feature/Auth/AuthenticationTest.php

namespace Tests\Feature\Auth;

use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

class AuthenticationTest extends TestCase
{
    use RefreshDatabase;

    public function test_login_screen_can_be_rendered(): void
    {
        $response = $this->get('/login');

        $response->assertStatus(200);
    }

    public function test_unauthenticated_user_cannot_view_dashboard(): void
    {
        $response = $this->get('dashboard');

        $response->assertRedirect('/login');
    }

}

１つ目のテストは、ログイン画面の表示を確認しています。問題なく表示されればステータスのコードは200となり、テストが通るはずです。

２つ目は、認証が必要な画面にアクセスしています。まだログインしていない状態なので、ログイン画面にリダイレクトされる挙動を期待しています。

テストを実行してみると、成功しました。

$ vendor/bin/phpunit --filter AuthenticationTest --testdox
PHPUnit 10.5.1 by Sebastian Bergmann and contributors.

..                                                                  2 / 2 (100%)

Time: 00:01.134, Memory: 38.50 MB

OK (2 tests, 3 assertions)

アサートは２つなのに3 assertionsとなっているのは、２つ目のテストのassertRedirectが２つのアサートを内包しているためです。１つは、リダイレクトされたこと。もう１つは、リダイレクトの先が/loginであることです。

次回は、ログイン関連のテストをご紹介いたします。

コマンドにプログレスバーを追加する

Wed, 29 Nov 2023 00:25:29 +0900

一度に大量のデータを更新する必要がある時などはArtisanコンソールコマンドでバッチを作成して実行します。その際に更新に時間が掛かって途中で何も出力が無いと処理が正常に進んでいるのか不安になってしまいます。そんな時はプログレスバーを表示すれば進捗が確認できて便利です。

演習コマンド

Laravelにデフォルトで用意されているusersテーブルを用いて演習用のコマンドを作成し、使い方を確認していきます。作成するのは登録されているemailからユーザー名部分を抜き出し、nameを上書きするコマンドです。コマンドの実行には更新対象となるusersのレコードが必要となるので先にダミーレコードを準備しましょう。DatabaseSeeder.phpのrun()を以下の様に編集してください。

database/seeders/DatabaseSeeder.php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     */
    public function run(): void
    {
        \App\Models\User::factory(1000)->create();
    }
}

そして以下を実行するとusersに1000件のダミーレコードが作成されます。

$ php artisan db:seed

続いて演習用のUserNameUpdateコマンドを作成します。

$ php artisan make:command UserNameUpdate

UserNameUpdateコマンドは以下の様にしました。まだプログレスバーを実装する前の状態です。

app/Console/Commands/UserNameUpdate.php

namespace App\Console\Commands;

use App\Models\User;
use Illuminate\Support\Str;
use Illuminate\Console\Command;

class UserNameUpdate extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'app:user-name-update';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'nameをemailのユーザー名に更新する';

    /**
     * Execute the console command.
     */
    public function handle()
    {
        $this->info('ユーザ名の更新を開始します。');

        $users = User::all();

        $users->each(function ($user) use (&$updated) {
            $user->name = Str::before($user->email, '@');
            $user->save();
            $updated++;
        });

        $this->info('ユーザ名の更新が完了しました。（更新件数：' . $updated . '）');
    }
}

以下を実行するとemailの’@‘より前の部分をnameに上書きします。

$ php artisan app:user-name-update
ユーザ名の更新を開始します。
ユーザ名の更新が完了しました。（更新件数：1000）

コマンド実行後にtinkerで以下を実行してみて下さい。ランダムにピックアップした２０件ですが、意図通りに更新されているのが確認できると思います。

> User::take(20)->inRandomOrder()->pluck('email', 'name');
= Illuminate\Support\Collection {#7081
    all: [
      "marjorie.hagenes" => "marjorie.hagenes@example.com",
      "owen.sipes" => "owen.sipes@example.org",
      "leann10" => "leann10@example.net",
      "amy21" => "amy21@example.net",
      "brooks.leffler" => "brooks.leffler@example.org",
      "arianna89" => "arianna89@example.com",
      "ledner.teagan" => "ledner.teagan@example.net",
      "axel17" => "axel17@example.org",
      "ykoepp" => "ykoepp@example.com",
      "rita19" => "rita19@example.net",
      "genevieve98" => "genevieve98@example.com",
      "nathen.goldner" => "nathen.goldner@example.net",
      "xjones" => "xjones@example.org",
      "assunta57" => "assunta57@example.com",
      "swift.vena" => "swift.vena@example.net",
      "senger.maybell" => "senger.maybell@example.org",
      "jace.willms" => "jace.willms@example.com",
      "stephanie.berge" => "stephanie.berge@example.org",
      "acremin" => "acremin@example.org",
      "yaufderhar" => "yaufderhar@example.org",
    ],
  }

一度コマンドを実行してnameが更新されてしまったので、以下を実行してダミーデータを作り直しておきましょう。

$ php artisan migrate:fresh --seed

withProgressBar()

それでは先ほどのコマンドを修正してプログレスバーを表示するようにしてみましょう。プログレスバーを表示するにはwithProgressBar()を使用します。withProgressBar()は第一引数にループ処理可能な値（iterable）を、第二引数にループ実行する処理をクロージャで指定します。UserNameUpdateコマンドに実装した例が以下になります。

app/Console/Commands/UserNameUpdate.php

...
    public function handle()
    {
        $this->info('ユーザ名の更新を開始します。');

        $users = $this->withProgressBar(User::all(), function (User $user) {
            $user->name = Str::before($user->email, '@');
            $user->save();
            usleep(10000);
        });

        $this->info('');    // 改行用
        $this->info('ユーザ名の更新が完了しました。（更新件数：' . $users->count() . '）');
    }
...

コマンドを実行するとバーが表示され、User::all()の総数である１０００件の処理が完了すると100%となるようにループ毎にゲージが溜まっていきます。

$ php artisan app:user-name-update
ユーザ名の更新を開始します。
1000/1000 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓] 100%
ユーザ名の更新が完了しました。（更新件数：1000）

今回ダミーデータを1000件用意しましたが、私の環境では処理が一瞬で終了してしまい、プログレスバーのゲージが蓄積していく様子が確認できなかったのでusleep()を挟みループ毎に0.01秒スリープするようにしました。また、プログレスバー表示後に改行コードが含まれておらず、続く「ユーザ名の更新が完了しました。・・・」の表示がプログレスバーと同じ行に表示されてしまう為、$this->info(’’)で改行を挟みました。

createProgressBar()

プログレスバーを表示するもう１つの方法としてcreateProgressBar()を使ってProgressBarインスタンスを生成する方法があります。こちらは前項のwithProgressBar()よりもバーを表示するタイミングやゲージを進めるタイミングを細かくコントロールできます。以下、UserNameUpdateコマンドに実装した例です。

app/Console/Commands/UserNameUpdate.php

...
    public function handle()
    {
        $this->info('ユーザ名の更新を開始します。');

        $users = User::all();

        $bar = $this->output->createProgressBar($users->count());
        $bar->start();

        foreach ($users as $user) {
            $user->name = Str::before($user->email, '@');
            $user->save();
            usleep(10000);
            $bar->advance();
        }

        $bar->finish();

        $this->info('');
        $this->info('ユーザ名の更新が完了しました。（更新件数：' . $users->count() . '）');
    }
...

今回のUserNameUpdateコマンドの様に取得したデータに対してループでシンプルな処理を実行するパターンでは前項で紹介したwithProgressBar()の方がコードが簡潔ですね。ループ内で実行する処理が複雑でクロージャに渡す変数が多くなってしまう様なケースではcreateProgressBar()を使用するのが良いかもしれません。因みにですが、withProgressBar()はLaravel8から追加された関数の様です。Laravel7以前はcreateProgressBar()のみでした。

メルマガをワンクリックで登録解除

Thu, 23 Nov 2023 12:10:48 +0900

Gmailは 2024 年 2 月以降、Gmail アカウントに 1 日あたり 5,000 件以上のメールを送信する送信者に対していくつかの義務付けを発表しました。その１つに、「受信者がメールの配信登録を容易に解除できるようにすること」とあります。毎日何十万というメルマガを送信する私のクライアントではメルマガの受信者の大半がGmailのメールアドレスを使用しています。メルマガはLaravelのプログラムから送信されます。対応しないと迷惑メールになりますよというGoogleの警告は恐ろしいですが、Laravelなら簡単に対応できます。

※11/25：以下においてCSRFトークンに関して書き忘れがあったの追加しています。

メールの配信登録を容易に解除できるとは？

Googleが発表したメール送信のガイドラインは以下で詳細が閲覧できます。 https://support.google.com/mail/answer/81126?sjid=16148365418482843036-NC

サーバーでのSPFとDKIMの両方の対応はサーバーのシステムでの設定ですが、アプリ側では以下の要求があります。

そこで言及されているワンクリックとは、PCのブラウザで開いたウェブのGmailで、以下のように、受信メールの送信元の隣に表示される登録解除のリンクのことです。

これをクリックすると以下のようなポップアップの画面が表示され「登録解除」のボタンを押すと、送信者のサイトに遷移することなくメルマガの登録解除が実行されます。

これがどうして可能なのかなのですが、受信したメールのソースコードを見ると、

先のガイドラインで指示したように、List-UnsubscribeとList-Unsubscribe-Postのヘッダーが含まれているからです。

つまりそれらのヘッダーを含むメールを送信すれば、対応できるわけです。

ワンクリックのリンクを含むMailableを作成

もう１度、Googleが勧める追加すべきヘッダーを見てみましょう。

    List-Unsubscribe-Post: List-Unsubscribe=One-Click
    List-Unsubscribe: <https://solarmora.com/unsubscribe/example>

最初の方は固定のヘッダーですが、後者の方はリンクは購読解除のプログラムの作成が必要とされます。

まず、このヘッダーを含むMailableを作成します。以下のコードでは、送信先のメールアドレスを暗号化して、List-Unsubscribeの登録解除のURLでtokenの引数とします。実際には、暗号化にはメールアドレスだけでなく発行した日時やどのキャンペーンのメルマガかなどの他の情報と合わせて入れる必要があるかもしれません。

app/Mail/Newsletter.php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Headers;
use Illuminate\Queue\SerializesModels;
use Illuminate\Mail\Mailables\Envelope;

class Newsletter extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     */
    public function __construct(public string $email)
    {
        $this->email = $email;
    }

    /**
     * Get the message headers.
     */
    public function headers(): Headers
    {
        // 送信先のメールアドレスを暗号化する
        $url = route('unsubscribe.store',['token' => encrypt($this->email)]);

        return new Headers(
            text: [
                'List-Unsubscribe' => '<'.$url.'>',
                'List-Unsubscribe-Post' =>'List-Unsubscribe=One-Click',
            ],
        );
    }

    /**
     * Get the message envelope.
     */
    public function envelope(): Envelope
    {
        return new Envelope(
            subject: 'メルマガの配信です',
        );
    }

    /**
     * Get the message content definition.
     */
    public function content(): Content
    {
        return new Content(
            view: 'newsletter',
        );
    }
}

上のMailableで使用されるブレードは以下です。

resources/views/newsletter.blade.php

<html>
    <body>
        <h1>メルマガの配信です</h1>
        <p>いつもメルマガを購読して頂いてありがとうございます。</p>
    </body>
</html>

さてこれで、メルマガ登録解除のヘッダーを含むメールの送信が可能です。 tinkerを使い、メルマガを送信します。$emailの変数の値は自分のGmailのメールアドレスを使用してくださいね。

> use App\Mail\Newsletter;

> $email = 'test@example.com';
= "test@example.com"

> Mail::to($email)->send(new Newsletter($email));
= Illuminate\Mail\SentMessage {#7251}

さて、届いた部分をGmailで開くと、なんと「メールリスト登録解除」のリンクが表示されていません！

しかし、ソースコードを見ると、必要なヘッダーはしっかり含まれています。

これではテストできませんね。ネットで調査したところ、メール送信元のサイトの評価と関係しているとかで、評価が良くないと逆に使用されたメールアドレスが正しいということでスパムをたくさん送信されるとかの理由らしいです。つまり開発環境などから送信したメールは評価がないので、リンクは表示されないのです。評価が良い私のクライアントからのメルマガでは、受信したメールに登録解除のリンクは表示されていました。

しかしながら、どうテストしたらよいものか。

登録解除のPOSTを受け取るコントローラ

とりあえず、登録解除のPOSTを受け取るコントローラが必要です。以下に作成してみました。

app/Http/Controllers/UnsubscribeController.php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log;

class UnsubscribeController extends Controller
{
    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
        $email = decrypt($request->token); //非暗号化してメールアドレスを取り出す

        // 実際はメールアドレスを将来メルマガに使用しないようなDB処理が必要なところ
        // ログファイルにメールアドレスを保存
        Log::debug('email: '.$email);
    }
}

POSTを受け取るのでこのデモではstore()だけにしています。

それを使うルートの方は、こんな感じ。

routes/web.php

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

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

Route::resource('unsubscribe', UnsubscribeController::class)->only('store');

さらに、通常のCSRFトークンは意味がないので、以下で例外とします。

app/Http/Middleware/VerifyCsrfToken.php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array<int, string>
     */
    protected $except = [
        'unsubscribe',
    ];
}

さて、届いたメールに登録解除のリンクがなくて、どうこのPOSTを確認するかですが、これもtinkerで可能です。ローカル環境でまずウェブサーバーを立ち上げます。

$ php artisan serve
   INFO  Server running on [http://127.0.0.1:8000].

tinkerで、以下のようにLaravelのHttp Clientを使用してPOSTを実行します。$tokenの値はさきほどのメールのソースコードから持ってきます。

> $token='eyJpdiI6IkxaaWhEeW5OSnl4OTZYWkJCMG5ZaEE9PSIsInZhbHVlIjoib2VCNFhBaWZCak1PUGZsN3Q2RFphTEZZc25TN2UwT29wOXZyMitrd0pPST0iLCJtYWMiOiJmODY4YjZmOGU1NzYxODg3NDJjZmRmM2JmMTA3YTdiMDQzNzQ4YTY1NTJmZmI0ZjZmZmIxMGY5NDNhMzExYTY5IiwidGFnIjoiIn0%3D';
> Http::post('http://127.0.0.1:8000/unsubscribe?token='.$token)->body();
= ""

実行後にlaravel.logの中身を見ると、

[2023-11-23 01:39:06] local.DEBUG: email: test@example.com

しっかり、非暗号化してメールアドレスを取り出すことができました。

最後に

ワンクリックのメルマガ登録解除の簡単な対応を紹介しましたが、注意が必要なのは今回はPCのブラウザでGmailを開いたときの対応だけだということです。他のOutlookなどのメールクライアントには関係のないことです。また、スマホのGmailのアプリでも解除のリンクは表示されません。それゆえに、メールの内容にもメールの登録解除のリンクを入れて対応することが必要です。

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

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

Laravel新Mailableのメール送信ユニットテスト

Tue, 17 Oct 2023 01:13:17 +0900

LaravelのMailableはメール送信に便利なクラスですが、テストでも同様にMailableをアサートするための便利なメソッドが用意されています。この記事では、Laravel10系の新しいMailableを使ったメール送信テストの書き方をご紹介します。

新Mailableでのメール送信についてはこちらの記事をご覧ください。

テスト対象

テスト対象は以下のクラスです。送信先のメールアドレスを受け取って送信するシンプルなものです。

App/Models/Message.php

class Message extends Model
{
    public static function sendMail($email)
    {
        Mail::to($email)->send(new BuildMail);
    }
}

sendの引数に渡しているBuildMailがMailableを継承しているクラスとなり、以下のように定義しています。

App/Mail/BuildMail.php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Attachment;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;

class BuildMail extends Mailable
{
    use Queueable, SerializesModels;
 
    /**
     * Create a new message instance.
     */
    public function __construct()
    {
        //
    }
 
    /**
     * Get the message envelope.
     */
    public function envelope(): Envelope
    {
        return new Envelope(
            subject: 'Test Mail',
            from: 'from@example.com',
        );
    }
 
    /**
     * Get the message content definition.
     */
    public function content(): Content
    {
        return new Content(
            html: 'emails.test',
        );
    }
 
    /**
     * Get the attachments for the message.
     *
     * @return array<int, \Illuminate\Mail\Mailables\Attachment>
     */
    public function attachments(): array
    {
        return [
            Attachment::fromPath(
                storage_path('app/img/testmail.jpg')
            ),
        ];
    }
}

メールの送信回数をテスト

まず、メールが１回送信されたことをテストしてみましょう。テストコードは以下のようになります。

   public function sendMailTest()
    {
        Mail::fake();

        //テスト対象の関数を実行
        Message::sendMail('to@example.com');

        Mail::assertSent(BuildMail::class, 1);
    }

最初にMail::fake()を使用しています。テストでは実際にメールを送信する必要はないので、メール送信をモック化し実際に送信されることを防いでいます。

Mail::assertSent()では、メールが送信されたかどうか、またその回数をアサートしています。第一引数がメール送信クラス、第二引数が期待する送信回数です。今回は１回送信されることを確認するので、１としています。

これでテストを実行すると、無事OKとなりました。

% vendor/bin/phpunit --filter sendMailTest        
PHPUnit 10.4.1 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 00:00.447, Memory: 26.00 MB

OK (1 test, 1 assertions)

もし期待と異なりメールが２通送信された場合、以下のエラーが返ってきます。エラーメッセージにも送信数が違う旨が書いてあるので分かりやすいですね。

The expected [App\Mail\BuildMail] mailable was sent 2 times instead of 1 times.
   Failed asserting that 2 is identical to 1.

件名・宛先をテスト

件名や宛先など、より詳しく送信メールの情報をアサートしたい場合も同様にMail::assertSent()を使います。その際、以下のように第二引数のクロージャーでBuildMailクラスのインスタンスである$mail変数を受け取る必要があります。

        Mail::assertSent(BuildMail::class, function ($mail) {
            return $mail->hasTo('to@example.com') &&
                $mail->hasFrom('from@example.com') &&
                $mail->hasSubject('Test Mail');
        });

hasToで送信先のメールアドレスを、hasFromで送信元のメールアドレスを、またhasSubjectでメールの件名をそれぞれアサートしています。新・旧Mailableで関数名も同じですね。

テストを実行してみると、こちらもOKが出ました。

% vendor/bin/phpunit --filter sendMailTest        
PHPUnit 10.4.1 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 00:00.353, Memory: 26.00 MB

OK (1 test, 1 assertions)

このテストの際、新Mailableになって便利になったと感じたことがあります。

旧Mailableでは、buildメソッドを使用しsubjectやfromを指定しているケースも少なくないと思います。その場合、テストコード内でもbuildの記述が必要でした。以下のようにです。

         Mail::assertSent(BuildMail::class, function ($mail) {

            $mail->build();

            return $mail->hasTo('to@example.com') &&....
        });

ですが、buildを使用せず新Mailableで提供されるようになったenvelopeやcontentを使用していれば、特に何も気にしなくともアサートは成功します。これはテストを書く立場として少し嬉しいです。

添付ファイルをテスト

次に、添付ファイルが期待通りか確認します。

BuildMailの定義でも使用していたAttachmentクラスを使うので、useをお忘れなく。

...
use Illuminate\Mail\Mailables\Attachment;
...
    public function sendMailTest()
    {
        ...//関数の実行など
        Mail::assertSent(BuildMail::class, function ($mail) {
            return $mail->hasAttachment(
                Attachment::fromPath(storage_path('app/img/testmail.jpg')),
            );
        });
    }

複数のメールを確認

１回で複数件送信されるメールのアサートも簡単です。以下は、計３通のメールが送信されたか、その宛先がそれぞれ期待通りかをアサートする場合のテストコードです。

        Mail::assertSent(BuildMail::class, 3);

        Mail::assertSent(BuildMail::class, function ($mail) {
            return $mail->hasTo('member1@example.com');
        });

        Mail::assertSent(BuildMail::class, function ($mail) {
            return $mail->hasTo('member2@example.com');
        });

        Mail::assertSent(BuildMail::class, function ($mail) {
            return $mail->hasTo('member3@example.com');
        });

このように、それぞれ順番にアサートを記述するだけで大丈夫です。こちらも新・旧Mailableで特に変わりはありません。

以上のように、新しいMailableでも旧とほとんど変わらない書き方でテストができます。どれもメールテストではよく使うものだと思いますので、ぜひご活用ください。

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

Laravel × MJMLでレスポンシブメールを送信

Wed, 04 Oct 2023 00:06:23 +0900

HTMLでデザインされたメールは読みやすく、視覚的に訴求しやすいというメリットがあります。ですが、多様なメーラーに対応するため通常のwebページとは異なるコーディングが必要であり、レスポンシブも考慮すると１通のメールを作成するのも大変です。

そこで、簡単にレスポンシブなHTMLメールが作成できるMJMLというツールをLaravel10.xのプロジェクトで試してみました。

MJMLをプロジェクトにインストール

ベースとなるメールクラスは前回作成したものを使用し、MJMLを使えるよう修正を加えてゆきます。

Laravel用にパッケージが用意されていますので、まずはこちらをインストールします。

$ composer require asahasrabuddhe/laravel-mjml

次に、フロントエンド用のライブラリをインストールします。

npm install --save mjml

ここまででインストールは完了です。

ビューファイル作成

次に、メールの本文となるビューファイルを作成します。

MJMLではmj-bodyやmj-columnなどの独自タグを使って画面を組み立てます。テンプレートやドキュメントにたくさん使用例が載っていますので、ご参照ください。オンラインエディタではリアルタイムに表示を確認できるので便利です。

今回はシンプルに、ナビゲーションとカラムだけのメールを作成しました。先にPCビューの完成形をお見せします。

このHTMLメールをMJMLで記述したものが、以下となります。

resources/views/emails/mjml.blade.php

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-all font-family="Ubuntu, Helvetica, Arial, sans-serif" />
      <mj-class name="nav-item" font-size="14px" color="#fff" />
      <mj-class name="column" font-size="16px" color="#333" align="center" padding="25px" font-weight="bold" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#FFC3BA">
    <!-- header navigation -->
    <mj-section background-color="#ef6451">
      <mj-column>
        <mj-navbar base-url="https://example.com" hamburger="hamburger" ico-color="#ffffff">
          <mj-navbar-link mj-class="nav-item" href="/page1">メニュー１</mj-navbar-link>
          <mj-navbar-link mj-class="nav-item" href="/page2">メニュー２</mj-navbar-link>
          <mj-navbar-link mj-class="nav-item" href="/page3">メニュー３</mj-navbar-link>
          <mj-navbar-link mj-class="nav-item" href="/page4">メニュー４</mj-navbar-link>
        </mj-navbar>
      </mj-column>
    </mj-section>
    <!-- ３column section -->
    <mj-section background-color="#FAD74D" padding-bottom="15px">
      <mj-column>
        <mj-text mj-class="column">カラムA</mj-text>
      </mj-column>
      <mj-column>
        <mj-text mj-class="column">カラムB</mj-text>
      </mj-column>
      <mj-column>
        <mj-text mj-class="column">カラムC</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

大きく、mj-headとmj-bodyで構成されています。

背景色や文字色など、個別に指定したいCSSはインラインでの記述が可能です。ですが、全てのCSSをインラインで書くとコードが読みにくくなったり修正が大変になりますので、繰り返しになるものは mj-head > mj-attributes 内でまとめて指定しました。

その際２つのタグを使用しています。mj-allは、全体のフォントと文字色の指定に。またmj-classでは、クラスとCSSの定義をしています。これはメニューリストのような複数あるアイテムに便利です。

mj-classの記述を上のコードから抜粋すると、mj-head内ではnav-itemクラスを以下のように定義しています。

mj-head内

      <mj-class name="nav-item" font-size="14px"/>

そしてこのnav-itemをbody内で使用するには、適用させたいタグにmj-classを指定すればOKです。以下のようになります。

mj-body内

      <mj-navbar-link mj-class="nav-item" href="/page1">メニュー1</mj-navbar-link>

また本文の要素は、セクションごとに mj-section（セクション） > mj-column（列） > 中身の要素　という形に配置してゆきます。mj-columnの中は、メニューボタンにはmj-navbar、テキストにはmj-text、のように要素に応じたタグが用意されているのでこれらを使って画面を構成します。

レスポンシブなメールを送信

最後に、Mailableの修正です。修正箇所は２つで、１つはuseするMailableを今回インストールしたパッケージのクラスへ変更。２つめは、contentの記述です。

以下は、修正前のコードです。

app/Mail/TestMail.php

...
use Illuminate\Mail\Mailable;
...
    public function content(): Content
    {
        return new Content(
            view: 'view.name',
        );
     }
...

修正後は、以下のようになります。mjml・buildMjmlViewといった新しいメソッドが使えるようになるのでそちらを使用します。

...
use Asahasrabuddhe\LaravelMJML\Mail\Mailable;
...
    public function content(): Content
    {
        return new Content(
            view: $this->mjml('emails.mjml')->buildMjmlView()['html'],
        );
     }
...

この記述だけで、先ほどのMJMLタグがHTMLに変換されます。早速Tinkerでメールを送信してみましょう。

$ php artisan tinker
Psy Shell v0.11.20 (PHP 8.1.17 — cli) by Justin Hileman
> use App\Mail\TestMail;
> Mail::to('mjml-test@example.com')->send(new TestMail);
= Illuminate\Mail\SentMessage {#6325}

PCビューは先ほどと同じなので省略です。モバイル表示では、どうでしょうか。

PCビューでは横並びだったナビゲーションはハンバーガーメニューに、３カラムは縦並びに変わりました。ちゃんと画面サイズに最適化された表示になっていますね。

ソースを見てみると、以下のようなHTMLに変換されています。全体はもっと長いので、MJMLを使うことでコードをだいぶ簡略化できることがわかります。

Laravelの新しいMailableでHTMLメールを送信

Mon, 25 Sep 2023 23:38:49 +0900

当サイトでも以前ご紹介しているLaravelのMailableですが、Laravel9.xから新しくなったようです。今までの書き方と何が違うのか？試してみました。使用バージョンはLaravel10.19になります。

以前のMailableの記事はこちら

HTMLメールを送信

まずは、新しいMailableクラスを作成します。以下のコマンドでTestMail.phpというファイルが作成されます。

$ php artisan make:mail TestMail

作成されたファイルを見てみると、旧Mailableにはあったbuildが無くなっています。代わりにenvelope、content、attachmentsというメソッドが用意されていますね。

app/Mail/TestMail.php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;

class TestMail extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the message envelope.
     */
    public function envelope(): Envelope
    {
        return new Envelope(
            subject: 'Test Mail',
        );
    }

    /**
     * Get the message content definition.
     */
    public function content(): Content
    {
        return new Content(
            view: 'view.name',
        );
    }

    /**
     * Get the attachments for the message.
     *
     * @return array<int, \Illuminate\Mail\Mailables\Attachment>
     */
    public function attachments(): array
    {
        return [];
    }
}

ここから、今回必要な箇所を編集してゆきます。

１つ目のenvelopeでは、件名・送信者・返信先に関する情報を設定できます。新しくAddressクラスが使えるようになっており、名前つきメールアドレスが作成できます。

Addressを使用する際は、クラスをuseしてくださいね。

use Illuminate\Mail\Mailables\Address;

    public function envelope(): Envelope
    {
        return new Envelope(
            subject: 'Test Mail',
            from: new Address('from@example.com', 'テスト送信者'),
        );
    }

次のcontentでは本文の設定を行います。今回はHTMLメールを送信するので、簡単なものですが以下のようなブレードを作成しました。

resources/views/emails/test.blade.php

<html>
  <body>
    <h1>新しいMailableです</h1>
  </body>
</html>

このブレードのパスを、contentに記述します。パスはresources/views以下の部分のみでOKです。

app/Mail/TestMail.php

    public function content(): Content
    {
        return new Content(
            html: 'emails.test',
        );
    }

最後のAttachmentは、添付ファイルについて定義します。

AttachmentのfromPathメソッドに、添付ファイルへのパスを渡します。あらかじめstorage/app/img内にtestmail.jpgという画像ファイルを用意したので、そちらを記述しました。

use Illuminate\Mail\Mailables\Attachment;

    public function attachments(): array
    {
        return [
            Attachment::fromPath(storage_path('app/img/testmail.jpg')),
        ];
    }

Attachmentを使用する場合も、useが必要ですのでお忘れなく。

これで設定は完了です！さっそくtinkerでメールを送信します。

$ php artisan tinker
Psy Shell v0.11.20 (PHP 8.1.17 — cli) by Justin Hileman
> use App\Mail\TestMail;
> Mail::to('test@example.com')->send(new TestMail);
= Illuminate\Mail\SentMessage {#6331}

受信をメールを確認してみましょう。私のローカル環境では、Mailtrapに届くように設定しています。

件名、From、本文、いずれも設定した通りになっていますね。画像ファイルも添付されています。

今回は新しくなったMailableを試してみました。8.x系で使用していたbuildは新しいMailableでも引き続き使用可能ですが、設定項目がそれぞれの関数に分かれている新しいMailableの方が、より分かりやすくなったように感じます。

次回は、Mailableで簡単にレスポンシブなHTMLメールが作成できる、MJMLというライブラリをご紹介します。

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

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

ProcessファサードでLinuxコマンドを実行する

Fri, 25 Aug 2023 04:13:45 +0900

webアプリにおいても時折、シェルスクリプトやLinuxコマンドなどを実行したい場合があります。そんな時、従来はexec()やsystem()を使用して実行していましたが、Laravel10からはProcessファサードが導入されLaravel的なインタフェースが用意された事でより直感的且つ読み易いコードが書けるようになりました。今回はProcessファサードの基本的な使い方を解説したいと思います。

従来の方法

Processの解説に入る前に、従来の手法についておさらいしておきましょう。冒頭で述べたようにexec()やsystem()を使用するか、あるいはProcessファサードの核であるSymphonyのProcessコンポーネントを使用するなど、色々やり方があります。私の場合は主にexec()を使用していました。

exec()は以下のように使います。

exec('実行するコマンド', $output, $resultCode);

第二引数の$outputと第三引数の$resultCodeは参照渡しです。従って関数の実行後に$outputには実行したコマンドの出力、$resultCodeには終了ステータスが格納されます。試しにディレクトリ内のファイル一覧を取得するlsコマンドをtinkerで実行してみましょう。

exec('ls -1', $output, $resultCode);    // オプション-1はファイル名を１行ずつ表示するオプション

$output
>> [
    "README.md",
    "app",
    "artisan",
    "bootstrap",
    "composer.json",
    "composer.lock",
    "config",
    "database",
    "lang",
    "package.json",
    "phpunit.xml",
    "public",
    "resources",
    "routes",
    "storage",
    "tests",
    "vendor",
    "vite.config.js",
  ]

$resultCode
>> 0

$outputは配列で各出力行が格納されます。$resultCodeには整数が格納されます、一般的なLinuxコマンドなら0で正常終了、0以外なら異常終了です。

次にProcessファサードを使って実行する場合はどうなるのか？見てみましょう。

Processでコマンドを実行する

Processでコマンドを実行するにはrun()かstart()を使用します。前者のrun()は同期実行、つまり、実行したコマンドが終了してから次の処理に移ります。一方、後者のstart()は非同期実行で実行したコマンドの完了を待たずにバックグラウンドで実行させたまますぐ次の処理に進むことができます。今回は前者のrun()についてのみ取り上げます。早速、Process::run()を使用して前項と同じコマンドを実行してみましょう。

// tinkerでの実行
$result = Process::run('ls -1')

Process::run()を実行するとProcessResultクラスのインスタンスが返却され、そのインスタンスメソッドを通してコマンドの実行結果について色々確認できます。

// 実行したコマンドを確認
$result->command();
>> "ls -1"

// コマンド実行時の標準出力を取得
$result->output();
>> """
  README.md\n
  app\n
  artisan\n
  bootstrap\n
  composer.json\n
  composer.lock\n
  ...
"""

// 出力に特定の文字列が含まれているかチェック
$result->seeInOutput('app');
>> true

// コマンドの終了ステータス取得
$result->exitCode();
>> 0

// コマンド実行成功？ ※終了ステータスが0ならtrue
$result->successful();
>> true

// コマンド失敗？ ※終了ステータスが0以外ならtrue
$result->failed();
>> false

exec()の場合は$outputで取得した出力が配列でしたが、Processではoutput()で取得した出力は文字列なので注意です。

エラー出力

コマンドが異常終了したか否かは終了ステータスを確認すれば分かりますが、その原因を把握する為にはエラー出力を確認する必要があります。エラー出力を取得する場合、exec()では実行するコマンドの末尾に2>&1を追加してエラー出力を標準出力にリダイレクトさせる必要がありました。

// lsコマンドに存在しないディレクトリaaaを引数で指定
exec('ls aaa', $output, $resultCode);

// 2>&1無しだとエラー出力が$outputに格納されない
$output
>> []

// 2>&1付で実行
exec('ls aaa 2>&1', $output, $resultCode);

// 今度は$outputに格納された
$output
>> [
"ls: aaa: No such file or directory",
]

Processの場合はコマンドに変更を加えなくてもerrorOutput()でエラー出力を取得できます。

Process::run('ls aaa')->errorOutput();
>"ls: aaa: No such file or directory\n"

カレントディレクトリを指定して実行

特定のディレクトリにてコマンドを実行したい場合、exec()では先頭にcd {指定のディレクトリ};を付与して実行します。

// 例. 親階層に移動してからpwdを実行
exec('cd ../;pwd', $output, $resultCode);

Processの場合はpath()でコマンドを実行したいディレクトリを指定できます。

Process::path('../')->run('pwd');

パイプ処理

Linuxコマンドの場合、パイプ(|)でコマンド同士を繋げて実行すると、前のコマンドの出力を次のコマンドの入力として実行できます。例えば、アクセスログに特定のIPが記載されている行が何行あるか調べたい時、以下の様に実行します。

grep '192.168.101.1' access.log | wc -l
>>      5

上記の実行ではgrepコマンドの出力をwcコマンドの入力として受け渡しています。上記の実行では５行ヒットしました。

こちらをProcessで実行する場合はpipe()というメソッドを使います。

$result = Process::pipe([
    "grep '192.168.101.1' access.log",
    'wc -l',
]);

// wc -l の実行結果には余白が含まれている
$result->output()
>> "       5\n"

// trimすれば数値のみ取得できる（またはsedコマンドをpipeして整形しても良いかも）
trim($result->output())
>> "5"

もちろん、run()の引数にパイプで結合したコマンドを指定しても同じ結果が得られます。

$result = Process::run("grep '192.168.101.1' access.log | wc -l");
trim($result->output());
>> "5"

しかし、プログラムから実行するコマンドは長文になりがち、かつ、要所要所で変数が埋め込まれがち（ファイルのパスなど）なので、pipe()を使った方がスッキリ書けると思います。

まとめ

Processの基本的な操作について従来のexec()を使った方法と比較しながら解説しました。まとめていて気が付いたのは、exec()を使用していた時はコマンドの末尾にエラー出力用に2>&1を付与したり、カレントディレクトリを指定する為に先頭にcdを付与したり、パイプ処理を実行する際はコマンドの途中にパイプ（|）を織り交ぜたり、とコマンド文がゴチャゴチャになりがちでした。一方でProcessではコマンドを汚さずに素の状態のまま保つ事ができるのでコードが読みやすく理解しやすいと思いました。

Laravel 10.xのインストール

Fri, 04 Aug 2023 19:22:15 +0900

2011年6月に最初のVersionがリリースされてから１２年。ついにLaravelも大台のVersion 10 を迎える事となりましたね。（パチパチパチ！！）という事でいつも通りinstallしてキャッチアップです。

サポート

サポートの予定については上の表の通りです。L8.xのリリース以降１年毎のバージョンアップとなっている為、次のL11.xのリリースが２０２４年初旬に控えていますね。明確な時期は未定の様ですが。前回のL9.xのインストール解説時にも触れましたが、L10.xからはPHP8.1以上が必須です、それ以前のバージョンを使用している方はアップグレードが必要となります。macOS環境の方は以前紹介したphpbrewを使えば複数のバージョンをinstallして切り替えて使えるので便利ですよ。

新規プロジェクト作成

それではいつも通りプロジェクトを作成してみましょう。

composer create-project laravel/laravel L10.x

プロジェクトディレクトリへ移動し、インストールされたLaravelのバージョンを確認してみます。2023年8月1日現在、10.16.1がインストールされました。

cd L10.x
php artisan --version
>> Laravel Framework 10.16.1

続いて、ビルドインサーバを立ち上げて見ます。

php artisan serv

ブラウザで http://127.0.0.1:8000/にアクセスし、お馴染みの画面が表示されました。

ここまではL9.xから特に変わり無いようです。

langディレクトリ

インストールしてみて気づいたのですが、プロジェクトのルートディレクトリからlangが無くなっています。langはL9.xでresources配下からルートディレクトリに移動したばかりです、今度はどこへ行ってしまったのでしょう？と、探していたらアップグレードガイドに記載がありました。

https://laravel.com/docs/10.x/upgrade#language-directory

新規プロジェクトを作成した初期状態ではlangディレクトリは作成されなくなったようです。従ってバリデーションエラーなどを日本語に変えたい場合などは

php artisan lang:publish

>>    INFO  Language files published successfully.

を実行してプロジェクトにlangディレクトリに追加する必要があります。

testの--profileオプション

リリースノートを眺めていて使えるかも？と、思った新機能です。テスト実行時に–profileオプションを付けると遅いテストを表示してくれるようです。試しに、SlowTestというテストクラスにて、sleep()を使用して時間が掛かるテストを追加して実行してみました。

以下が追加したテスト

tests/Unit/SlowTest.php

<?php

namespace Tests\Unit;

use PHPUnit\Framework\TestCase;

class SlowTest extends TestCase
{
    public function test_that_takes_3_seconds(): void
    {
        sleep(3);
        $this->assertTrue(true);
    }

    /**
     * @dataProvider provider_test_that_takes_x_seconds
     */
    public function test_that_takes_x_seconds($seconds): void
    {
        sleep($seconds);
        $this->assertTrue(true);
    }

    public function provider_test_that_takes_x_seconds(): array
    {
        return [
            '1sec' => [1],
            '2sec' => [2],
            '5sec' => [5],
        ];
    }
}

以下が–profileを付けて実行した結果です。

php artisan test --profile

>> PASS  Tests\Unit\ExampleTest
  ✓ that true is true

   PASS  Tests\Unit\SlowTest
  ✓ that takes 3 seconds                                                                                                                                                                    3.01s  
  ✓ that takes x seconds with data set "1sec"                                                                                                                                               1.00s  
  ✓ that takes x seconds with data set "2sec"                                                                                                                                               2.01s  
  ✓ that takes x seconds with data set "5sec"                                                                                                                                               5.00s  

   PASS  Tests\Feature\ExampleTest
  ✓ the application returns a successful response                                                                                                                                           0.15s  

  Tests:    6 passed (6 assertions)
  Duration: 11.28s

  Top 10 slowest tests:
  Tests\Unit\SlowTest > that takes x seconds with data set "5sec"                                                                                                                           5.00s  
  Tests\Unit\SlowTest > that takes 3 seconds                                                                                                                                                3.01s  
  Tests\Unit\SlowTest > that takes x seconds with data set "2sec"                                                                                                                           2.01s  
  Tests\Unit\SlowTest > that takes x seconds with data set "1sec"                                                                                                                           1.00s  
  Tests\Feature\ExampleTest > the application returns a successful response                                                                                                                 0.15s  
  Tests\Unit\ExampleTest > that true is true                                                                                                                                                0.00s  
  ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────  
                                                                                                                                                                        (99.17% of 11.28s) 11.19s

なるほど、テスト実行結果の後に遅いテストランキングを表示してくれる訳ですね。dataProviderでデータセットを指定している場合は、使用したデータ毎に実行時間を計測しランキングに反映されます。止むを得ず時間が掛かってしまうテストはどうしようも無いですが、単純に色々詰め込みすぎて遅くなっているテストが見つかったなら、分けることが出来ないか検討する良い機会だと思います。肥大化したテストは管理が大変ですから。

その他

リリースノートを眺めていて他に気になった新機能としてLaravel PennantとProcessファサードがあります。現時点では、Laravel Pennantはフラグ管理機能、Processファサードはshellコマンドなどが実行できるFacadeという認識です。いずれも従来は自作のヘルパ関数を作ったり、cmd()を使ったりと、Laravelishではない方法で対応してきました。新機能を使う事でどう変わるのか気になる処です。これらについては別の記事でコードを交えながら噛み砕いていきたいと思います。

L10.x on ララジャパン

CypressでE2Eテストを自動化（５）laracasts/cypressでLaravelプロジェクトをテスト

laracasts/cypressインストール

require is not defined の修正

laracasts/cypressのコマンド

テストコード

ユーザー認証のテスト（５）Laravel 10 スロットル

テスト対象

ログインスロットルのテスト

artisan modelコマンド

model:show

Attributes

Relations

Observers

最も便利なartisan dbコマンドの使い方

最後に

ユーザー認証のテスト（４）Laravel 10 パスワードリセット

テスト対象画面とテスト項目

パスワードリセットリクエスト画面のテスト

パスワードリセット画面でのテスト

ユーザー認証のテスト（３）Laravel 10 ログアウト

ログアウトのテスト

ログアウト後の遷移先を変更（Breeze使用）

DKIM署名を含むメールのユニットテスト

メールのDKIM署名をチェックするツール

配信するメールをファイルに落とす

ユニットテストを作成

Google AnalyticsのデータをAPIで取得（２）コマンドを作成

認証に必要なデータを設定する

プロパティID

ga4.key

Laravelのコマンドを作成

コマンドの実行

ユーザー認証のテスト（２）Laravel 10 ログイン

エラーメッセージの日本語化

テスト用Userデータ

ログイン成功のテスト

ログイン失敗のテスト

LaravelでメールをDKIM署名

DKIM認証の仕組み

DKIMのキーを作成

アプリでDKIM署名

最後に

ユーザー認証のテスト（１）Laravel 10

Breezeとは?

プロジェクト新規作成・Breezeインストール

テストの準備

画面表示のテスト

コマンドにプログレスバーを追加する

演習コマンド

withProgressBar()

createProgressBar()

メルマガをワンクリックで登録解除

メールの配信登録を容易に解除できるとは？

ワンクリックのリンクを含むMailableを作成

登録解除のPOSTを受け取るコントローラ

最後に

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

欲しい機能

ソースコード

お知らせ受信の許可

お知らせの受信

Laravel新Mailableのメール送信ユニットテスト

テスト対象

メールの送信回数をテスト

件名・宛先をテスト

添付ファイルをテスト

複数のメールを確認

OpenAIのレスをHTML表示

OpenAIからのレス

ソースコード

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

OpenAIとチャット

欲しい機能

Open AIでアカウントを登録

APIのキーをゲット

ソースコード

必ずここを読む

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

欲しい機能

ユーザー認証のテスト（５）Laravel 10　スロットル

ユーザー認証のテスト（４）Laravel 10　パスワードリセット

ユーザー認証のテスト（３）Laravel 10　ログアウト

ユーザー認証のテスト（２）Laravel 10　ログイン

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

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