Filament のタイトルとスラッグ入力コンポーネントの使い方

1、プロジェクト概要

Filament Title With Slug は、FilamentPHP 用に作成されたカスタムコンポーネントで、フォームにおけるタイトルとスラッグの管理を容易にするものです。このコンポーネントは、WordPress のタイトルとスラッグの仕組みに着想を得ており、タイトルとスラッグを同時に編集できる機能を提供します。

主な特徴：

自動スラッグ生成：スラッグが手動で変更されていない場合、タイトルから自動的に生成されます。
柔軟な設定：すべてのラベルはカスタマイズ可能で、独自のスラッグ生成ロジック（slugifier）の利用やホスト名の非表示も可能です。
多言語対応：複数言語に対応しており、ローカライズ可能です。
ダークモード対応：ダークテーマとの互換性があります。

2、プロジェクトの初期設定

インストール方法

Composer を使用してパッケージをインストールします：

composer require camya/filament-title-with-slug

使用方法

Filament のフォームで TitleWithSlugInput コンポーネントを使用します：

use Camya\Filament\Forms\Components\TitleWithSlugInput;

TitleWithSlugInput::make(
    titleField: 'title', // モデルのタイトルフィールド名
    slugField: 'slug'    // モデルのスラッグフィールド名
);

実装例

以下は、Filament リソースで TitleWithSlugInput を使用する完全な例です：

use Filament\Forms;
use Filament\Resources\Form;
use Filament\Resources\Resource;
use Filament\Resources\Table;
use Filament\Tables;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;
use Camya\Filament\Forms\Components\TitleWithSlugInput;

class PostResource extends Resource
{
    protected static ?string $model = Post::class;

    protected static ?string $navigationIcon = 'heroicon-o-collection';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TitleWithSlugInput::make(
                    titleField: 'title',
                    slugField: 'slug'
                ),
                // その他のフォーム要素
            ]);
    }

    // その他のリソースメソッド
}

3、活用例と推奨事項

実際の活用例

ブログプラットフォーム：記事のタイトルとスラッグは SEO に重要です。TitleWithSlugInput を使用することで、一意なスラッグを自動生成し、効率的に管理できます。

商品管理システム：商品名と URL スラッグの管理においても同様に有用です。スラッグを自動生成することで、ユーザーにとって分かりやすい URL を提供できます。

推奨事項

ラベルのカスタマイズ：プロジェクトに合わせてラベルを調整することで、UI の統一感を保ちます。
独自スラッグ生成ロジックの利用：標準的なスラッグ生成ルールに合わない場合は、独自の slugifier を定義できます。
多言語環境への対応：言語ごとの翻訳に対応することで、グローバルな利用にも対応できます。

4、関連する技術スタック

FilamentPHP：現代的な Laravel ダッシュボードフレームワークで、フォームとテーブルのコンポーネントが豊富に提供されています。TitleWithSlugInput はこのエコシステムに自然に統合できます。
Laravel：Web アプリケーション構築向けの PHP フレームワークで、TitleWithSlugInput は Laravel アプリケーションに簡単に導入可能です。
Livewire：Laravel 向けのインタラクティブなフロントエンドフレームワークで、TitleWithSlugInput と併用することで、より洗練されたユーザー体験が実現できます。

これらの要素を理解することで、Filament Title With Slug コンポーネントの活用方法を深く把握できます。

タグ: FilamentPHP laravel slug generation form component UI toolkit

7月25日 19:35 投稿

異端開発室

Filament のタイトルとスラッグ入力コンポーネントの使い方