ポッドキャスト プレーヤーを作成して Livewire 3、Volt、Folio を学びましょう

昨日、Laravel チームは Laravel Folio をリリースしました。これは、Laravel アプリケーションでのルーティングを簡素化するように設計された強力なページベースのルーターです。 本日、同社は、Livewire 用に洗練された機能 API である Volt をリリースしました。これにより、コンポーネントの PHP ロジックと Blade テンプレートを、定型文を減らして同じファイル内に共存させることができます。

これらは別々に使用することもできますが、一緒に使用することは、Laravel アプリを構築するための新しくて非常に生産的な方法だと思います。

この記事では、Laravel News ポッドキャストのエピソードをリストし、ユーザーがそれらのエピソードを再生できるようにするシンプルなアプリを構築する方法を説明します。プレーヤーは、ページが読み込まれてもシームレスに再生を続けることができます。

まず、新しい Laravel アプリを作成し、Livewire、Volt、Folio、および Sushi (ダミー データを作成するため) をインストールする必要があります。

Livewire v3、Volt、Folio はすべてまだベータ版です。 かなり安定しているはずですが、自己責任で使用してください。

パッケージを要求した後、phpArtisanvolt:install および phpArtisan folio:install を実行する必要があります。 これにより、Volt と Folio が必要とするいくつかのフォルダーとサービス プロバイダーが足場になります。

ダミーデータとして、Sushiモデルを作成します。 Sushi は Caleb Pozio によって書かれたパッケージで、これを使用すると、モデル ファイルに直接書き込まれた配列からデータをクエリする Eloquent モデルを作成できます。 これは、サンプル アプリを構築している場合や、頻繁に変更する必要のないデータがある場合に最適です。

モデルを作成し、HasFactory トレイトを削除して、Sushi トレイトに置き換えます。 この例のデータとして、Laravel News Podcast の最新 4 つのエピソードの詳細を追加しました。

これがこの記事の要点ではないため、これがどのように機能するかについては詳しく説明しません。独自のポッドキャスト プレーヤーを構築する場合は、おそらく本物の Eloquent モデルを使用することになるでしょう。

Tailwind をロードし、ロゴを追加し、基本的なスタイルを追加するには、レイアウト ファイルが必要です。 Livewire と Alpine はスクリプトとスタイルを自動的に挿入するため、それらをレイアウトにロードする必要さえありません。 レイアウトを匿名の Blade コンポーネントとして resource/views/components/layout.blade.php に作成します。

まず、ポッドキャストのすべてのエピソードを表示するページが必要です。

Folio を使用すると、resources/views/pages ディレクトリに新しいページを簡単に作成でき、Laravel がそのページのルートを自動的に作成します。 ルートを /episodes にしたいので、php 職人 make:folio エピソード/index を実行できます。 これにより、resources/views/pages/episodes/index.blade.php に空のビューが作成されます。

このページでは、レイアウト コンポーネントを挿入し、すべてのポッドキャスト エピソードをループします。 Volt は、ほとんどの Livewire 機能に対して名前空間関数を提供します。 ここでは、通常の 開始タグと終了タグを開きます。 これらの中で、計算関数を使用して、すべてのエピソード モデルを取得するクエリを実行する $episodes 変数を作成します ($episodes = computed(fn () => Episode::get());)。 $this->episodes を使用して、テンプレート内の計算されたプロパティにアクセスできます。

また、各エピソードのduration_in_secondsプロパティを読み取り可能な形式にフォーマットする関数である$formatDuration変数も作成しました。 $this->formatDuration($episode->duration_in_seconds) を使用して、テンプレート内でその関数を呼び出すことができます。

また、ページ上の動的機能を @volt ディレクティブでラップして、Folio ページ内で「匿名 Livewire コンポーネント」として登録する必要があります。

そこから、対話性を追加する必要があります。 エピソード プレーヤーを追加して、エピソード リストからエピソードを聴けるようにしたいと考えています。 これは、レイアウト ファイルでレンダリングする通常の Blade コンポーネントにすることができます。

resource/views/components/episode-player.blade.php ファイルを追加することで、そのコンポーネントを作成できます。 コンポーネント内に、アクティブなエピソードを保存するための Alpine コードを含む