Livewire on ララジャパン

Livewireで並び替え可能なテーブルを作成する

Mon, 27 Jan 2025 04:46:16 +0900

javascriptを書かずに動的でリアクティブなアプリが作れるlivewireですが、既存のjavascriptやjQueryで行っていた事をlivewireでも実現しようとすると「はて、どうすれば良いだろうか？」と手が止まることがあります。直近でドラッグ＆ドロップで並び替え可能なテーブルをlivewireで実装する機会があり調べたので忘れない内にまとめたいと思います。

ドラッグ＆ドロップで並び替え可能なテーブル

例えば、以下の様なテーブルです。

従来はjquery-uiのsortable()を使用して対応していました。こちらをlivewireで実装するにはどうすれば良いでしょうか？

livewire-sortable

livewire-sortableというパッケージがあったので試してみます。まずは検証の為のページをlivewireで用意しましょう。livewireはversion 3.xを使用していますのでご注意を。

web.php

まず、ルーティングに/demoへアクセスした際にdemoブレードを返却するように設定します。

routes/web.php

use Illuminate\Support\Facades\Route;

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

demo.blade.php

blade側は以下の様に作成しました。デザインの為にbootstrap5をcdnで読み込んでいます。livewireを使用する為、headの閉じタグ直前に@livewireStyles、bodyの閉じタグの直前に@livewireScriptsをセットし、sortable-tableコンポーネントを作成して読み込む事にしました。

resources/views/demo.blade.php

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    @livewireStyles
  </head>
  <body>

    <div class="container my-5">
      <h1>Sortable Table!</h1>
      <livewire:sortable-table />
    </div>
    @livewireScripts
  </body>
</html>

livewire componentの作成

demo.blade.phpで読み込んでいるComponentを作成しましょう。以下のartisanコマンドを実行して下さい。

% php artisan make:livewire sortable-table
 COMPONENT CREATED  🤙

CLASS: app/Livewire/SortableTable.php
VIEW:  resources/views/livewire/sortable-table.blade.php

SortableTable.phpとsortable-table.blade.phpが作成されたはずです。作成された SortableTable.phpを以下のように編集します。プロパティに$usersを追加してmount()で初期化しています。$usersはfirst_name, last_name, display_orderプロパティを持つmodelコレクションです。

app/Livewire/SortableTable.php

namespace App\Livewire;

use App\Models\User;
use Livewire\Component;

class SortableTable extends Component
{
    public $users;

    public function mount()
    {
        $this->users = User::all();
    }

    public function render()
    {
        return view('livewire.sortable-table');
    }
}

そして以下がviewファイル。livewireが@foreachのループ内で各要素を識別できるようにwire:keyを指定しています。表示する$userはdisplay_order順にソートしています。

resources/views/livewire/sortable-table.blade.php

<div class="col-lg-8 px-0">
    <table class="table table-hover table-bordered">
        <thead class="table-dark">
          <tr>
            <th>#</th>
            <th>First</th>
            <th>Last</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($users->sortBy('display_order') as $user)
            <tr wire:key="user-{{ $user->id }}">
                <th>{{ $user->display_order }}</th>
                <td>{{ $user->first_name }}</td>
                <td>{{ $user->last_name }}</td>
            </tr>
          @endforeach
        </tbody>
    </table>
</div>

php artisan serverでビルドインサーバを起動して/demoへアクセスしてみましょう。冒頭で表示したシンプルなテーブルが表示されたかと思います。準備が整ったのでlivewire-sortableを使って並び替え出来るように変更してみましょう。

livewire-sortableを追加

今回は簡易的な導入なのでdemo.blade.phpにてCDNで追加します。@livewireScriptsの直後にscriptタグを追加してlivewire-sortableのCDNを読み込みます。livewire-sortableのプラグインより先にlivewireのスクリプトが読み込まれる必要がある為、必ず@livewireScriptsより後にセットして下さい。

resources/views/demo.blade.php

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    @livewireStyles
  </head>
  <body>

    <div class="container my-5">
      <h1>Sortable Table!</h1>
      <livewire:sortable-table />
    </div>
    @livewireScripts
    {{-- ここに追加↓ --}}
    <script src="https://cdn.jsdelivr.net/gh/livewire/sortable@v1.x.x/dist/livewire-sortable.js"></script>
  </body>
</html>

次にsortable-table.blade.phpを編集して並び替え出来るようにします。Githubには特に詳しい解説はありませんが、wire:sortableを並び替えする要素の親要素に追加、指定する値は並び替えを行った際に実行されるメソッド名です。wire:sortable.itemは並び替える対象の要素に付与します。最後にwire:sortable.handleを並び替え操作（ドラッグ＆ドロップ）を行う要素に追加します。

resources/views/livewire/sortable-table.blade.php

<div class="col-lg-8 px-0">
    <table class="table table-hover table-bordered">
        <thead class="table-dark">
          <tr>
            <th>#</th>
            <th>First</th>
            <th>Last</th>
          </tr>
        </thead>
        <tbody wire:sortable="updateOrder">
          @foreach ($users->sortBy('display_order') as $user)
            <tr wire:sortable.item="{{ $user->id }}" wire:key="{{ $user->id }}">
                <th wire:sortable.handle>{{ $user->display_order }}</th>
                <td>{{ $user->first_name }}</td>
                <td>{{ $user->last_name }}</td>
            </tr>
          @endforeach
        </tbody>
    </table>
</div>

ここまで実装できたら試しに画面を更新して並び替え操作をしてみましょう。#の列をドラッグすると列が並び替えできると思います。しかし、ドロップすると以下の様なエラーが発生します。これはwire:sortableに指定したメソッド、updateOrderが未実装な為です。

ではSortableTable.phpにupdateOrder()を実装してみましょう。以下の例では並び替えた後の順番通りにdisplay_orderの値を更新しています。

app/Livewire/SortableTable.php

namespace App\Livewire;

use App\Models\User;
use Livewire\Component;

class SortableTable extends Component
{
    public $users;

    public function mount()
    {
        $this->users = User::all();
    }

    public function render()
    {
        return view('livewire.sortable-table');
    }

    public function updateOrder($items)
    {
        $items = collect($items)->pluck('order', 'value');

        foreach ($this->users as $user) {
            $newDisplayOrder = (int) $items[$user->id];

            // 順番が変わっているならデータ更新
            if ($user->display_order != $newDisplayOrder) {
                $user->update(['display_order' => $newDisplayOrder]);
            }
        }
    }
}

updateOrder()の引数に$itemsという連想配列が渡されています。$itemsは連想配列で各要素はorderとvalueという値を持ちます。

orderは並び替え後の順番、valueはwire:sortable.itemにて指定した値、つまり$userのidです。実装したupdateOrder()内では最初に$itemsを扱い易いようにidをキー、新しい順番をvalueとするcollectionに変換しています。

$items = collect($items)->pluck('order', 'value');

そして、$usersプロパティをループで回して各userのdisplay_orderが変更されていないかチェック、変更されているならupdate()でDBの値を更新しています（注意：UserのModelクラスにおいて$fillableにdisplay_orderを含むことを忘れずに！）。ページを更新して並び替えを行ってみて下さい。並び替えると同時に#の番号が振り直され、DBに保存されているuserのdisplay_orderが更新されているかと思います。

まとめ

如何でしたでしょうか？ドラッグ＆ドロップによる並び替え操作は割とよくあるパターンなのでパッケージが開発されており深く悩む事無く実装できました。javascriptやjQueryなどで対応してきた動的なサイトというのはバリエーションに富んでおり、都合よくlivewireに置き換えられないケースがあるかと思います。そんな時は使えるパッケージが無いか探してみたり、Livewire公式のライブラリであるfluxなどで使えるコンポーネントが無いか探してみると良いかもしれません。

カレンダー（４）タイムゾーン

Mon, 04 Nov 2024 06:31:17 +0900

今までのカレンダーシリーズでは、タイムゾーンのことをまったく考えていませんでしたが、もちろん考える必要あります。

Laravelのタイムゾーンは何？

Laravelのプロジェクトのタイムゾーンは、以下で設定されています。

config/app.php

...
/*
    |--------------------------------------------------------------------------
    | Application Timezone
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default timezone for your application, which
    | will be used by the PHP date and date-time functions. The timezone
    | is set to "UTC" by default as it is suitable for most use cases.
    |
    */

    'timezone' => env('APP_TIMEZONE', 'UTC'),
...

見ての通り、デフォルトはUTCです。 UTCとは、協定世界時のことで国際協定により定められた世界共通の標準時です。

これを上書きしたいなら、.envで以下のように設定できます。

.env

...
APP_TIMEZONE="Asia/Tokyo"
...

上の設定は日本時間ですが、その値はPHPでは以下でリストされていて、 https://www.php.net/manual/ja/timezones.php アジアは、以下でリストされています。 https://www.php.net/manual/ja/timezones.asia.php

DateTimeZone

アプリで固定のタイムゾーン（つまり、APP_TIMEZONEを指定）でなく、タイムゾーンをダイナミックに変えたいなら、さきのタイムゾーンの定数を、以下のDateTimeZoneのクラスのインスタンス作成時に指定します。

https://www.php.net/manual/ja/class.datetimezone.php

use DateTimeZone;

$tz = new DateTimeZone("Asia/Tokyo");

Carbonではこのタイムゾーンのインスタンスを使って、UTCの時間を指定のタイムゾーンの時間に換算します。

Carbon::now($tz);

直接、タイムゾーンの定数の指定も可能です。

Carbon::now("Asia/Tokyo");

OpeningHoursも同様にタイムゾーンの指定が可能です。

OpeningHours::create($dates, $tz);

Livewireのコンポーネントにタイムゾーンを

前回のコードをもとにタイムゾーンを取り入れました。以下で$this->tzの箇所を見てください。

app/livewire/Calenar.php

namespace App\Livewire;

use DateTimeZone;
use Carbon\Carbon;
use Yasumi\Yasumi;
use Livewire\Component;
use Livewire\Attributes\Url;
use Spatie\OpeningHours\OpeningHours;

class Calendar extends Component
{
class Calendar extends Component
{
    #[Url]
    public int $year;
    #[Url]
    public int $month;
    public $calendar = [];

    const TZ = 'Asia/Tokyo';
    private DateTimeZone $tz;//プロパティではないので、privateで宣言

    public function boot()
    {
        $this->tz = new DateTimeZone(self::TZ);
    }

    public function mount()
    {
        $this->year ??= Carbon::now($this->tz)->year;
        $this->month ??= Carbon::now($this->tz)->month;
    }

    public function previousMonth(): void
    {
        $this->month--;
        if ($this->month < 1) {
            $this->month = 12;
            $this->year--;
        }
    }

    public function nextMonth(): void
    {
        $this->month++;
        if ($this->month > 12) {
            $this->month = 1;
            $this->year++;
        }
    }

    public function render(): \Illuminate\View\View
    {
        $openingHours = $this->openingHours();

        $this->generateCalendar($openingHours);

        return view('livewire.calendar');
    }

    // アクションではないのでprivateとする
    private function openingHours(): OpeningHours　
    {
        $yasumi = Yasumi::create('Japan', $this->year, 'ja_JP');
        $holidays = collect($yasumi->getHolidayDates())
            ->mapWithKeys(function ($date) { return [$date => []];})
            ->all();

        $dates = [
            'monday'     => ['09:00-12:00', '13:00-18:00'],
            'tuesday'    => ['09:00-12:00', '13:00-18:00'],
            'wednesday'  => ['09:00-12:00'],
            'thursday'   => ['09:00-12:00', '13:00-18:00'],
            'friday'     => ['09:00-12:00', '13:00-20:00'],
            'saturday'   => ['09:00-12:00', '13:00-16:00'],
            'sunday'     => [],
            'exceptions' => $holidays,
        ];

        return OpeningHours::create($dates, $this->tz);
    }

　　// アクションではないのでprivateとする
    private function generateCalendar(OpeningHours $openingHours): void
    {
        $startOfMonth = Carbon::createFromDate($this->year, $this->month, 1, $this->tz);
        $endOfMonth = $startOfMonth->copy()->endOfMonth();
        $startDayOfWeek = $startOfMonth->dayOfWeek;
        $totalDays = $endOfMonth->day;

        $this->calendar = [];
        $week = [];

        for ($i = 0; $i < $startDayOfWeek; $i++) {
            $week[] = null;
        }

        $today = Carbon::today();

        for ($day = 1; $day <= $totalDays; $day++) {
            $date = Carbon::createFromDate($this->year, $this->month, $day, $this->tz);
            $dayInfo = [
                'day' => $day,
                'isHoliday' => ! $openingHours->isOpenOn($date->toDateString()),
            ];

            $dayInfo['hours'] = [];

            if ($date->greaterThanOrEqualTo($today)) {
                $hours = $openingHours->forDate($date->toDateTime());

                foreach ($hours as $hour) {
                    $dayInfo['hours'][]= $hour->format();
                }
            }

            $week[] = $dayInfo;

            if (count($week) == 7) {
                $this->calendar[] = $week;
                $week = [];
            }
        }

        if (count($week) > 0) {
            while (count($week) < 7) {
                $week[] = null;
            }
            $this->calendar[] = $week;
        }
    }
}

上のコードでタイムゾーンの対応だけでなく、以下のような前回のコードのリファクターもあるので注意してください。

プロパティの$yearと$monthの宣言の上の行に、#[Url]のアトリビュートが使われています。これは、ブラウザのUrlのパラメータを反映させるためです（後に説明します）。
タイムゾーンの初期化は、mount()ではなくboot()で行っています。これは、mount()はLivewireのコンポーネントを含む画面がロードされるときに１回だけコールされますが、boot()は、コンポーネントのライフサイクルにおいて毎回コールされるからです（後に説明します）。
前回のコードでは、openHours()やgenerateCalendar()の関数の定義は、publicでしたが上のコードではprivateとしています。Livewireのコンポーネントのpublicの関数（例えば、previousMonth()）はアクションとしてクライアントからのアクセスが可能となるからです。

URLパラメータ

上のコードで、馴染みのないアトリビュートが登場しました。以下の#[Url]の部分です。

...
class Calendar extends Component
{
    #[Url]
    public int $year;
    #[Url]
    public int $month;
...

これは、php8から導入されたアトリビュートといわれるもので、Livewireではそのアトリビュートの次の行で宣言されている変数($yearや$month)のUrlにおけるパラメータを自動的に取り込むことを指示します。

例えば、

http://127.0.0.1:8001/calendar?month=1&year=2025

がブラウザのUrlとすると、コンポーネントの$yearと$monthのプロパティは、2025と1にそれぞれ初期化され、2025年の1月のカレンダーを表示してくれます。つまり、Urlにパラメータをつけることで欲しいの月のカレンダーを表示させることができるのです。便利ですね。

http://127.0.0.:8001/calendar

とパラメータがないなら、それらの変数は今日の年と月にmount()で初期化されます。

Livewireのライフサイクル

タイムゾーンの情報を保つ$tzの変数は、上のコードではmount()でなくboot()で初期化を行いましたが、どうしてそうなのでしょう。それには、コンポーネントで定義されている関数がコールされる順番の理解が必要です。

まず、ブラウザにおいて最初にカレンダーを表示したときは、以下の順番でコールされます。

boot() → mount() → render()

しかし、そのカレンダーにおいて、「次」のボタンを押して次の月へ移動するとき、つまりリアクティブのリクエストとなるときは、

boot() → nextMonth() → render()

の順番のコールとなり、mount()はコールされません。mount()で$tzを初期化してたら、render()でコールされるときにopeningHours()内で未初期化の変数のアクセスエラーとなります。

カレンダー（３）休日と営業時間の表示

Tue, 29 Oct 2024 11:47:49 +0900

Livewireを使用してカレンダーをリアクティブにしたところで、次はある店舗のカレンダーと見立てて休日と営業時間の表示をします。２つパッケージを使います。１つは、Laravelのパッケージをたくさん提供することで有名なspatieのopening-hoursのパッケージ、もう１つはいろいろな国の祭日のデータを提供するパッケージyasumiです。

欲しいもの

まず、完成品のカレンダーはこんなものです。

この店舗のカレンダーでは休日がピンクの背景色となっています。店舗は日曜日が定休日で祭日も休みとなります。さらに、このカレンダーを作成した当日を10/25としてそれ以降の営業日においての営業時間を表示しています。

opening-hours：営業時間

営業時間のデータを扱うにはこのパッケージが最適です。 https://github.com/spatie/opening-hours

このパッケージでは以下のように、曜日ごとの営業時間の配列を渡してOpeningHoursのインスタンスを作成します。

use Spatie\OpeningHours\OpeningHours;

$openingHours = OpeningHours::create([
    'monday'     => ['09:00-12:00', '13:00-18:00'],
    'tuesday'    => ['09:00-12:00', '13:00-18:00'],
    'wednesday'  => ['09:00-12:00'],
    'thursday'   => ['09:00-12:00', '13:00-18:00'],
    'friday'     => ['09:00-12:00', '13:00-20:00'],
    'saturday'   => ['09:00-12:00', '13:00-16:00'],
    'sunday'     => [],
    'exceptions' => [
        '2024-11-11' => ['09:00-12:00'],
        '2024-12-25' => [],
        '01-01'      => [],                // 毎年の１月１日は休み
        '12-25'      => ['09:00-12:00'],   // 毎年の１２月２５日は午前中だけ
    ],
]);

上では、

毎週、月、火、木、金、土が同じ営業時間で、水曜日が朝だけの定期的な営業時間です。日曜は、空の配列ということで休みです
非定期は、exceptionsの配列に入れます。2024-11-11のように特定な日にちで指定できますし、01-01のように毎年繰り返す日にちの営業時間も指定が可能です

さて、この営業時間を含むインスタンスをこしらえると、それに対していろいろなことを問うことが可能となります。

例えば、

月曜日は開いている？

$openingHours->isOpenOn('monday');
true

日曜日は開いている？

$openingHours->isOpenOn('sunday');
false

10/30日の19:00は開いている？

$openingHours->isOpenAt(new DateTime('2024-10-30 19:00:00'));
false

クリスマスの日は開いている？

$openingHours->isOpenOn('2024-12-25');
false

などなど、もっといろいろな関数があります。

そしてもちろん、特定な日を指定して、その日の営業時間のデータの取得も可能です。

$openHours = $openingHours->forDate(new DateTime('2024-10-25'));

$hours = [];
foreach($openHours as $hour) {
    $hours[] = $hour->format();
}
print_r($hours);

Array
(
    [0] => 09:00-12:00
    [1] => 13:00-20:00
)

これが先のカレンダーで必要とされる関数となります。

注意することは１つ、このopening-hoursで使用される関数に渡す日付は皆、馴染みのCarbonではなくphpのDateTimeであることです。もちろん、CarbonもDateTimeのWrapperのようなもので、

Carbon\Carbon::create("2025-10-25")->toDateTime();

DateTime @1761350400 {#3156
    date: 2025-10-25 00:00:00.0 UTC (+00:00),
}

とDateTimeに簡単に変換が可能です。

yasumi：祭日

祭日は国のよって違いますので、以下のパッケージを使います。

https://github.com/azuyalabs/yasumi

yasumiはもちろん日本語の「休み」からの由来です。

早速、今年の日本の祭日を出してみましょう！

use Yasumi\Yasumi;

// 国名と年を渡すだけ
$yasumi = Yasumi::create("Japan", "2024");

$holidays = $yasumi->getHolidayDates();

print_r($holidays);

Array
(
    [newYearsDay] => 2024-01-01
    [comingOfAgeDay] => 2024-01-08
    [nationalFoundationDay] => 2024-02-11
    [substituteHoliday:nationalFoundationDay] => 2024-02-12
    [emperorsBirthday] => 2024-02-23
    [vernalEquinoxDay] => 2024-03-20
    [showaDay] => 2024-04-29
    [constitutionMemorialDay] => 2024-05-03
    [greeneryDay] => 2024-05-04
    [childrensDay] => 2024-05-05
    [substituteHoliday:childrensDay] => 2024-05-06
    [marineDay] => 2024-07-15
    [mountainDay] => 2024-08-11
    [substituteHoliday:mountainDay] => 2024-08-12
    [respectfortheAgedDay] => 2024-09-16
    [autumnalEquinoxDay] => 2024-09-22
    [substituteHoliday:autumnalEquinoxDay] => 2024-09-23
    [sportsDay] => 2024-10-14
    [cultureDay] => 2024-11-03
    [substituteHoliday:cultureDay] => 2024-11-04
    [laborThanksgivingDay] => 2024-11-23
)

国名と年を渡すだけで祭日のデータ得られます。このデータを、先のopeningHoursのexceptionsに含んだら、店舗の休日となりますね。

店舗のカレンダー

ということで、これら２つのパッケージを使い以下のLivewireのコンポーネントとなります。

app/Livewire/Calendar.php

namespace App\Livewire;

use Carbon\Carbon;
use Yasumi\Yasumi;
use Livewire\Component;
use Spatie\OpeningHours\OpeningHours;

class Calendar extends Component
{
    public int $year;
    public int $month;
    public $calendar = [];

    public function mount()
    {
        $this->year ??= Carbon::now()->year;
        $this->month ??= Carbon::now()->month;
    }

    public function generateCalendar(OpeningHours $openingHours): void
    {
        $startOfMonth = Carbon::createFromDate($this->year, $this->month, 1);
        $endOfMonth = $startOfMonth->copy()->endOfMonth();
        $startDayOfWeek = $startOfMonth->dayOfWeek;
        $totalDays = $endOfMonth->day;

        $this->calendar = [];
        $week = [];

        for ($i = 0; $i < $startDayOfWeek; $i++) {
            $week[] = null;
        }

        $today = Carbon::today();

        for ($day = 1; $day <= $totalDays; $day++) {
            $date = Carbon::createFromDate($this->year, $this->month, $day);
            $dayInfo = [
                'day' => $day,
                'isHoliday' => ! $openingHours->isOpenOn($date->toDateString()),
            ];

            $dayInfo['hours'] = [];

            if ($date->greaterThanOrEqualTo($today)) {
                $hours = $openingHours->forDate($date->toDateTime());

                foreach ($hours as $hour) {
                    $dayInfo['hours'][]= $hour->format();
                }
            }

            $week[] = $dayInfo;

            if (count($week) == 7) {
                $this->calendar[] = $week;
                $week = [];
            }
        }

        if (count($week) > 0) {
            while (count($week) < 7) {
                $week[] = null;
            }
            $this->calendar[] = $week;
        }
    }

    public function previousMonth(): void
    {
        $this->month--;
        if ($this->month < 1) {
            $this->month = 12;
            $this->year--;
        }
    }

    public function nextMonth(): void
    {
        $this->month++;
        if ($this->month > 12) {
            $this->month = 1;
            $this->year++;
        }
    }

    public function openingHours(): OpeningHours
    {
        $yasumi = Yasumi::create('Japan', $this->year);

        // 以下で祭日を取得して、['2024-01-01' => [], '2024-01-08' => [] ...]の配列に変換
        $holidays = collect($yasumi->getHolidayDates())
            ->mapWithKeys(function ($date) { return [$date => []];})
            ->all();

        $dates = [
            'monday'     => ['09:00-12:00', '13:00-18:00'],
            'tuesday'    => ['09:00-12:00', '13:00-18:00'],
            'wednesday'  => ['09:00-12:00'],
            'thursday'   => ['09:00-12:00', '13:00-18:00'],
            'friday'     => ['09:00-12:00', '13:00-20:00'],
            'saturday'   => ['09:00-12:00', '13:00-16:00'],
            'sunday'     => [],
            'exceptions' => $holidays,
        ];

        return OpeningHours::create($dates);
    }


    public function render(): \Illuminate\View\View
    {
        $openingHours = $this->openingHours();

        $this->generateCalendar($openingHours);

        return view('livewire.calendar');
    }
}

コンポーネントのブレードは、以下となります。

<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4 text-center">{{ $year }}年{{ $month }}月</h1>
    <div class="flex justify-between mb-4">
        <button wire:click="previousMonth" class="bg-blue-500 text-white px-4 py-2 rounded">前</button>
        <button wire:click="nextMonth" class="bg-blue-500 text-white px-4 py-2 rounded">次</button>
    </div>
    <table class="min-w-full bg-white border border-gray-200">
        <thead>
            <tr>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">日</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">月</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">火</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">水</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">木</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">金</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">土</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($calendar as $week)
                <tr>
                    @foreach ($week as $day)
                        @if (is_null($day))
                            <td class="py-2 px-4 border border-gray-200"></td>
                        @else
                            <td class="py-2 px-4 border border-gray-200 align-top {{ $day['isHoliday'] ? 'bg-red-100' : '' }}">
                                {{ $day['day'] }}

                                <div class="text-sm text-blue-500">
                                    {!! implode('<br>', $day['hours']) !!}
                                </div>
                            </td>
                        @endif
                    @endforeach
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

もちろん、以下の作業を忘れずに。

$ composer require spatie/opening-hours
$ composer require azuyalabs/yasumi

カレンダー（２）Livewireを使いリアクティブとする

Sun, 20 Oct 2024 11:24:17 +0900

AI(Copilot)でコードを作成してカレンダーを表示できましたが、今度は今月の月間カレンダーだけなく前月と翌月のボタンを追加してクリックしたら表示をリアクティブに変更できるようにします。

Livewireに変換

前回で作成したカレンダー生成の関数を用いることになりますが、今回もCopilotを使って開発します。

さあ、働いてもらいましょう！

> Laravel Livewireを用いて、先月と翌月を表示できるようにしてください

この結果としてLivewireのコンポーネント、それが使用するブレード、そのコンポーネントを含むブレード、とルートの定義が出力されるのですが、残念なことにこれがLivewireの最新のバージョン３ではなく、バージョン２の出力なのです。

おかしいと思い、問いかけます。

> どのバージョンのLivewireを知っていますか？

私はLivewireの最新バージョンであるLivewire 3を知っています。Livewire 3は、リアクティブなUIを構築するための最新の機能と改善を提供しています。

そうなら、

> そうなら、Livewire3を使って書き直してください

とプッシュ。しかし残念なことに出力される結果は先ほどと同じとなりました。

どうやらLivewireのバージョン３の知識はないみたいです。

ということで、Copilotで出力されたコードと私のLivewireの学習、つまり人間とのコラボにより以下のコード生成となりました。

コンポーネントの作成

最新のバージョンのLaravelでプロジェクトを作成して、以下で最新（バージョン３ですよ）のLivewireのパッケージをインストールします。

$ composer require livewire/livewire

以下でコンポーネントを作成します。

$ php artisan make:livewire Calendar

作成されるファイルは２つあります。

new file:   app/Livewire/Calendar.php
new file:   resources/views/livewire/calendar.blade.php

まず、Calendar.phpを編集します。ここではCopilotで出力されたコードを入れますが、注意するのは、namespaceがバージョン３のLivewireでは、App\Http\LivewireからApp\Livewireに変わっています。

app/Livewie/Calendar.php

namespace App\Livewire;

use Livewire\Component;
use Carbon\Carbon;

class Calendar extends Component
{
    public $year;
    public $month;
    public $calendar = [];

    public function mount($year = null, $month = null)
    {
        $this->year = $year ?? Carbon::now()->year;
        $this->month = $month ?? Carbon::now()->month;
        $this->generateCalendar();
    }

    public function generateCalendar()
    {
        $startOfMonth = Carbon::createFromDate($this->year, $this->month, 1);
        $endOfMonth = $startOfMonth->copy()->endOfMonth();
        $startDayOfWeek = $startOfMonth->dayOfWeek;
        $totalDays = $endOfMonth->day;

        $this->calendar = [];
        $week = [];

        for ($i = 0; $i < $startDayOfWeek; $i++) {
            $week[] = null;
        }

        for ($day = 1; $day <= $totalDays; $day++) {<strong>
            $week[] = $day;

            if (count($week) == 7) {
                $this->calendar[] = $week;
                $week = [];
            }
        }

        if (count($week) > 0) {
            while (count($week) < 7) {
                $week[] = null;
            }
            $this->calendar[] = $week;
        }
    }

    public function previousMonth()
    {
        $this->month--;
        if ($this->month < 1) {
            $this->month = 12;
            $this->year--;
        }
        $this->generateCalendar();
    }

    public function nextMonth()
    {
        $this->month++;
        if ($this->month > 12) {
            $this->month = 1;
            $this->year++;
        }
        $this->generateCalendar();
    }

    public function render()
    {
        return view('livewire.calendar');
    }
}

コンポーネントに含まれる、generateCalendar()は前回と似ていますが、このクラスのプロパティの$month, $yearにより返す値が変わるようになっています。また、前月を表示するpreviousMonth()と次月を表示するnextMonth()のメソッドが追加されています。

今度はブレードですが、これもCopilotの出力ををもとに英語から日本語に私が編集しました。wire:clickにおいて先ほど追加関数名が指定されています。これらはLivewireのためのコードで、これによりカレンダーで表示する月を変えることができます。

/resources/views/livewire/calendar.blade.php

<div>
    <table>
        <caption>
            <button wire:click="previousMonth">前</button>
            <strong>{{ $year }}年{{ $month }}月</strong>
            <button wire:click="nextMonth">次</button>
        </caption>
        <thead>
            <tr>
                <th>日</th>
                <th>月</th>
                <th>火</th>
                <th>水</th>
                <th>木</th>
                <th>金</th>
                <th>土</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($calendar as $week)
                <tr>
                    @foreach ($week as $day)
                        @if (is_null($day))
                            <td></td>
                        @else
                            <td>{{ $day }}</td>
                        @endif
                    @endforeach
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

ルートの定義は以下となりますが、これはコンポーネントを全画面として表示する設定です。

routes/web.php

use App\Livewire\Calendar;
use Illuminate\Support\Facades\Route;

Route::get('/calendar', Calendar::class);

そして、この全画面表示のためにレイアウトのブレードが必要です。

resources/views/components/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ $title ?? 'Page Title' }}</title>
    </head>
    <body>
        {{ $slot }}
    </body>
</html>

これで完了です。

う～ん。ちょっと醜いですね。Copilotに少し恰好良くしてもらいましょう。

> コンポーネントのブレードをTailwind cssを利用してベターなルックにしてください

以下のようにブレードは変わります。

/resources/views/livewire/calendar.blade.php

<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4 text-center">{{ $year }}年{{ $month }}月</h1>
    <div class="flex justify-between mb-4">
        <button wire:click="previousMonth" class="bg-blue-500 text-white px-4 py-2 rounded">前</button>
        <button wire:click="nextMonth" class="bg-blue-500 text-white px-4 py-2 rounded">次</button>
    </div>
    <table class="min-w-full bg-white border border-gray-200">
        <thead>
            <tr>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">日</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">月</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">火</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">水</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">木</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">金</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">土</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($calendar as $week)
                <tr>
                    @foreach ($week as $day)
                        @if (is_null($day))
                            <td class="py-2 px-4 border border-gray-200"></td>
                        @else
                            <td class="py-2 px-4 border border-gray-200">
                                {{ $day }}
                            </td>
                        @endif
                    @endforeach
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

レイアウトの方は、以下となります。

resources/views/components/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ $title ?? 'Page Title' }}</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

    </head>
    <body class="bg-gray-100">
        <div class="container mx-auto p-4">
            {{ $slot }}
        </div>
    </body>
</html>

以下となりました。レスポンシブ対応ともなっています。

以上、Copilotと私のコラボの作品です。CopilotのLivewireの知識が最新でないのは残念ですが、知ったふりをしては欲しくないですね。

Livewireを使ってポーリング

Wed, 18 Sep 2024 12:47:18 +0900

ウェブソケットと同様にリアルタイム（まがい）で画面の一部を更新する方法に、ポーリングがあります。ウェブソケットではサーバーから更新情報をブラウザ（クライアント）へプッシュするのに対して、ポーリングは逆にブラウザからサーバーに情報を一定の時間で取得（ポーリング）しに行きます。それゆえに、PusherやReverbのようなウェブソケットサーバーは必要でなく簡単なセットアップとなります。このポーリングをとても人気があるLivewireを使用してプログラムしてみます。

欲しいもの

実用的なものでないですが、とても簡単なデモとします。

上の画面のように、ログイン画面が表示されたらログインできる残りの秒数を１０秒からカウントダウンします。１０秒過ぎたからと言ってログインが無効になるわけではありません。単に残りの秒数を全ページ更新せずに表示するだけです。

通常なら単にjavascriptでsetTimeout()あるいはsetInterval()を駆使して実現できることを、javascriptを一切使用せずにサーバーから残り秒数を取得して表示します。

Livewireのインストール

まず、Livewireのパッケージのインストール。

$ composer require livewire/livewire

今回はこれだけ。設定は何も要りません。

コンポーネントの作成

次にタイマーのコンポーネントを作成します。artisanでモデルを作成するようにコンポーネントを作成してくれます。

$ php artisan make:livewire Timer

これで作成されるファイルは２つあります。１つはコンポーネントでもう１つはそれに使用されるブレードです。

        new file:   app/Livewire/Timer.php
        new file:   resources/views/livewire/timer.blade.php

コンポーネントのコードを以下のように編集します。

app/Livewire/Timer.php

namespace App\Livewire;

use Livewire\Component;

class Timer extends Component
{
    public $remaining = 11;

    public function render()
    {
        $this->remaining--;

        return view('livewire.timer', [
            'remaining' => $this->remaining,
        ]);
    }
}

$remainingの変数が残り秒数の値となりますが、最初に11秒と設定しておき、そこから１を引いた10秒から表示です。正確に行うには開始時点での日時をキープしてrender()がコールされるたびにその時点での日時から経過秒数を計算ですが、ここは１秒おきに関数がコールされるとしてシンプルにします。ちなみに、Livewireではサーバーでの複数のリクエストを通して同じオブジェクトにアクセスが可能で、$remainingの値は毎回初期化されずステートをキープします。

次はコンポーネントのブレードの編集です。先のコンポーネントのクラス名と関連させてtimer.blade.phpとなっています。

resources/views/livewire/timer.blade.php

   <div wire:poll.1s>
        残りの秒数：{{ $remaining }}
    </div>

上のコードで大事なのは、wire:poll.1sの部分です。これがポーリングを指示しています。.1sは、１秒ごとにポーリングです。これがないとデフォルトは、2.5秒でポーリングとなります。

さて、このコンポーネントをログインのブレードに入れます。見てのとおり<livewire:timer />だけとシンプルです。

resources/views/auth/login.blade.php

<x-guest-layout>
    <!-- Session Status -->
    <x-auth-session-status class="mb-4" :status="session('status')" />

    <form method="POST" action="{{ route('login') }}">
        @csrf

        <livewire:timer /> <!-- ここでコンポーネントを使用 -->

        <!-- Email Address -->
...

この時点で不思議に思うのは、Livewireのおかげでjavascriptのコードは一切も書かないのですが、どこかでLivewireのライブラリ（javascript）をコールされているはずですよね。今のところブレードには前もって含まれてはいません。しかし、レンダーされた画面のHTMLソースを見ると以下のように、自動でスクリプトがインジェクトされています。

....
    <!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=cc800bf4"   data-csrf="ys60l3TQzop1efcgNKZjtUlZ4mX9WxZzlpiVjoUN" data-update-uri="/livewire/update" data-navigate-once="true"></script>
</body>
</html>

実際にログイン画面を表示してブラウザーのインスペクターでポーリングが行われているが見てみましょう。

たくさんPOSTのリクエストが実行されています。リクエストの詳細では、 http://127.0.0.1:8000/livewire/update にアクセスしているのが分かります。

このルートも手動で設定してはいないのに自動設定されています。チェックしてみましょう。

$ php artisan route:list | grep livewire
  GET|HEAD  livewire/livewire.js ......................... Livewire\Mechanisms › FrontendAssets@returnJavaScriptAsFile
  GET|HEAD  livewire/livewire.min.js.map ................................... Livewire\Mechanisms › FrontendAssets@maps
  GET|HEAD  livewire/preview-file/{filename} livewire.preview-file › Livewire\Features › FilePreviewController@handle
  POST      livewire/update ...................... livewire.update › Livewire\Mechanisms › HandleRequests@handleUpdate
  POST      livewire/upload-file .............. livewire.upload-file › Livewire\Features › FileUploadController@handle

livewire関連がいろいろとありますが、先ほどのルートも含まれていました。

タイマーを止める

さて、最後にもう１つやることあります。先ほどのプログラムでは、ほったらかしにすると残りの秒数がマイナスになってしまいます。

残り秒数が０以下となるなら、終了としてポーリングも停止したいです。そうするには、ブレードを編集して、０秒以下となったら、ポーリングの代わりに「終了しました！」の表示を条件文と使って入れ替えます。簡単ですね。

resources/views/livewire/timer.blade.php

<div>
    @if ($remaining <= 0)
        <div class="text-red-600 font-bold">終了しました！</div>
    @else
        <div class="font-bold" wire:poll.1s>
            残りの秒数：{{ $remaining }}
        </div>
    @endif
</div>

以下のようになりました。

最後に

Livewireを使うと実に簡単にポーリングができてしまいます、しかし、ポーリングはこのデモでは毎秒サーバーにリクエストするので、ユーザー数が多くなるとサーバーにはかなりな負荷となります。スケールが小さめのプロジェクト向きと思ってください。スケールが大きいプロジェクトではウェブソケットの使用を考えてください。

ウェブソケットに関しては、以下のご参照を。

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

気になるフロントエンドの技術

Sun, 08 Dec 2019 02:07:49 +0900

私が注目している技術に関してリストしてみます。もちろん、Laravel関連なのですが、フロントエンドやバックエンド含めて、いやいや、本当にいいものが登場してきています。将来時間を見つけてじっくりと紹介したいものばかりです。

フロントエンド

私が興味があるのは、既存のLaravelのサーバーサイドのコントローラを書き直さずに、どうやってフロントエンドをSPA化するか、です。

巷のjsのフレームワークでは、独自のroutingを設定して、サーバーサイドは単にそれにデータを注入するAPIとなることを強制します。新規のプロジェクトならまだしも、こちら何年と管理している既存のプロジェクトを書き換えるのはしんどい、サーバーでどちらにしろやらなければならない、routingやバリデーションを、どうしてまたフロントエンドでプログラムする必要ある？、などなど不満あります。

つまり、私は楽をしてなるべく現在のLaravelのコントローラの書き替えを避けたいのです。そういう意味では、POSTもSPA化できた今となっては、前回のturbolinksは最高！です。しかし、そこに辿り着く前に、なぜか以下の２つ新技術に巡り合いました。これら両方とも、今年登場したてで新しく、また両方とも、既存のコントローラを活かしている、という点でとても将来性が大いにあります。

inertiajs

https://inertiajs.com

イナーシャJSは、今年登場で、以下のようにコントローラで、通常view()でブレードを指定して画面をレンダリングする部分を、独自のInertia::render()を使用します。

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
          'users' => User::all(),
        ]);
    }

    public function store()
    {
        User::create(
            Request::validate([
                'first_name' => ['required', 'max:50'],
                'last_name' => ['required', 'max:50'],
                'email' => ['required', 'max:50', 'email'],
            ])
        );

        return Redirect::route('users');
    }
}

そして、通常使うブレードの代わりに、なんと、vuejsを使います！

<template>
  <form @submit.prevent="submit">
    <label for="first_name">First name:</label>
    <input id="first_name" v-model="form.first_name" />
    <div v-if="$page.errors.first_name">{{ $page.errors.first_name[0] }}</div>
    <label for="last_name">Last name:</label>
    <input id="last_name" v-model="form.last_name" />
    <div v-if="$page.errors.last_name">{{ $page.errors.last_name[0] }}</div>
    <label for="email">Email:</label>
    <input id="email" v-model="form.email" />
    <div v-if="$page.errors.email">{{ $page.errors.email[0] }}</div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        first_name: null,
        last_name: null,
        email: null,
      },
    }
  },
  methods: {
    submit() {
      this.$inertia.post('/users', this.form)
    },
  },
}
</script>

これが今のところの私のおおまかな理解ですが、興味あれば以下チェックしてみてください。ちなみに、Laravel + vuejs だけでなく、Laravel + Reactとか、Rails + Reactとか特定のフレームワークに固定されないのも特長です。

https://reinink.ca/articles/introducing-inertia-js

Laravel Livewire

https://laravel-livewire.com

ララベルライブワイヤーは、イナーシャとに比べてよりLaravelワールドです。イナーシャJSと同様に、Laravelのコントローラをキープしますが、ブレードのテンプレートもキープして、独自のシンタックスを追加して、javascriptのコードを書くことなしに、SPAに対応です。

コントローラを以下とすると、

use Livewire\Component;

class ContactForm extends Component
{
    public $name;
    public $email;

    public function submit()
    {
        $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
        ]);

        // Execution doesn't reach here if validation fails.

        Contact::create([
            'name' => $this->name,
            'email' => $this->email,
        ]);
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}

そのブレードは、

<form wire:submit="submit">
    <input type="text" wire:model="name">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="email">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Contact</button>
</form>

wire:modeとかは、vuejsのv-modelみたいですね。

仕組みは、サーバーサイドでブレードにjavascriptを埋め込んでいくみたいです。