管理画面を簡単構築！Laravel Filamentで高速開発！

• Laravel Sailで開発
• 簡単なお知らせを更新するCMS
• ユーザーは管理者のみ
• フロントはLaravel上で作成

FilamentはTALL技術を基盤とするLaravelの拡張パッケージの１つです。

TALLとは、以下の４つの技術の頭文字を取ったものです。

• Tailwind CSS
• Alpine.JS
• Laravel
• Livewire

Filamentは、データの表示、編集、削除、検索などの一般的な管理作業をサポートするコンポーネントを提供し、簡単にカスタムの管理ダッシュボードを作成することができます。

Laravelの開発環境でお馴染みのLaravel Sailを使用します。

docker desktopをインストールし立ち上げた状態で、Laravelのプロジェクトを作成しましょう。

# cmsとして作成
curl -s "<https://laravel.build/cms>" | bash

sailコマンドのエイリアスを作成しておくとコマンドが短く打てますので、ぜひ設定しておいてください。

# sailコマンドのエイリアス設定
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

下記のコマンドで開発環境のdockerを立ち上げましょう。

cd cms
sail up -d

dockerが立ち上がるとこのようになると思います。

Filamentを利用する前にマイグレーションを行いDBとの接続をおこないましょう。

# マイグレーションを行う
sail artisan migrate

Filamentを利用するにはインストールを行う必要があります。

公式サイトのGet Startedを参照しつつ、インストールします。

# Filamentインストール
sail composer require filament/filament:"^3.1" -W

Panelを作成

下記コマンドを入力すると、IDの設定が促されます。

adminやbackendなど、URLとして設定したい文字列を設定します。

# 管理画面設定
sail artisan filament:install --panels

Filamentログイン用のユーザーを生成

管理画面用のユーザーを作成します。

下記コマンドを入力すると、名前、メールアドレス、パスワードの設定が促されます。

# ユーザー設定
sail artisan make:filament-user

Filamentへのログイン

設定が完了したら管理画面へログインしてみましょう。

http://localhost/admin/login

ログインの制限解除設定

もしもログインできなかったらapp/Models/User.phpに下記のように記述することでログインが可能になると思います。

<?php
 
namespace App\\Models;
 
# 下記行のuseを追加する
use Filament\\Models\\Contracts\\FilamentUser;
use Filament\\Panel;
use Illuminate\\Foundation\\Auth\\User as Authenticatable;
 
# 下記行で、implements FilamentUserを追加する
class User extends Authenticatable implements FilamentUser
{
    // ...
 
    public function canAccessPanel(Panel $panel): bool
    {
		# 下記の行のyourdomain.com部分を変える
        return str_ends_with($this->email, '@yourdomain.com') && $this->hasVerifiedEmail();
    }
}

管理画面を日本語にする

デフォルトでは英語になってるとおもいますので、言語設定と、言語ライブラリをインストールして日本語で表示できるようにしておきましょう。

まずはconfig/app.phpで言語設定を行います。

'timezone' => 'Asia/Tokyo', // デフォルトは'UTC'

'locale' => 'ja', // デフォルトは'en'

'faker_locale' => 'ja_JP', // デフォルトは'en_US'

言語ファイルが格納されるlangディレクトリを生成しましょう。

# langを生成
sail artisan lang:publish

言語ライブラリをインストールします。

# laravel-langをインストール
sail composer require laravel-lang/lang

日本語化の適用をします。

下記コマンドを打つとconfig/app.phpでおこなった言語設定を元に言語ファイルが追加されます。

# 言語設定に合わせてファイルを追加
sail artisan lang:update

言語設定と言語ファイルが変更されたことにより、管理画面の表示が変わったと思います。

Filamentで管理画面を作るには、Modelの定義とマイグレーションを行う必要があります。

今回はUserとNewsのモデルを作成します。

マイグレーションファイル生成

下記コマンドでModelファイルと、migrationsファイルを生成します。

#news modelを作成
sail php artisan make:model -m News

database/migrations/yyyy_mm_dd_hhmmss_create_news_table.phpにタイトルと本文を追加します。

<?php

use Illuminate\\Database\\Migrations\\Migration;
use Illuminate\\Database\\Schema\\Blueprint;
use Illuminate\\Support\\Facades\\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('news', function (Blueprint $table) {
            $table->id();
            $table->string('title');    //追加
            $table->text('body');   //追加
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('news');
    }
};

app/Models/Post.phpにも追加しましょう。

<?php

namespace App\\Models;

use Illuminate\\Database\\Eloquent\\Factories\\HasFactory;
use Illuminate\\Database\\Eloquent\\Model;

class News extends Model
{
    use HasFactory;
    protected $fillable = ['title', 'body'];    //追加
}

設定ができたら下記コマンドでマイグレーションを行います。

# マイグレーション
sail php artisan migrate

Modelを作成し、マイグレーションが完了したら、管理画面での入力画面を作成します。

DB操作関連で下記ライブラリをインストールします。

# dbalをインストール
sail composer require doctrine/dbal

続いて、管理画面にNews画面を生成します。

# News画面を生成
sail php artisan make:filament-resource News --generate

管理画面を見てみると、Newsが追加されていると思います。

記事を作成してみましょう。

データを入力し、作成ボタンを押すと右上に通知が出てくると思います。

左メニューから一覧に戻ると、記事が作成できていました。

管理画面での更新ができるようになったら、更新したデータをフロント画面へ表示してみましょう。

今回はデザインに関しては簡素な状態で表示しますが、実際にはデザインに合わせて表示の調整が必要になります。

News用のコントローラーを作成します。

# コントローラーを作成
sail php artisan make:controller NewsController

下記のような感じでコントローラーを記述します。

<?php

namespace App\\Http\\Controllers;

use Illuminate\\Http\\Request;
use App\\Models\\News;

class NewsController extends Controller
{
    public function index()
    {
        $posts = News::orderBy('id', 'desc')->paginate(20);
        return view('news.index', compact('posts'));
    }

    public function show($id)
    {
        $post = News::findOrFail($id);
        return view('news.show', compact('post'));
    }
}

routes/web.phpでページのルートを設定しましょう。

フロント側は一覧と詳細だけなので、Route::resourceを使いつつ必要なメソッドだけに絞っておきます。

<?php

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

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

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

Route::resource('news', NewsController::class)->only([
    'index', 'show'
]);

resources/views/news/index.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">
  <title>News</title>
</head>

<body class="antialiased">
  <div class="container">
    <h1>News</h1>
    <ul>
      @foreach ($posts as $post)
      <li>
        <p>{{ $post->title }}</p>
        <div>
          {{ $post->body }}
        </div>
      </li>
      @endforeach
    </ul>
  </div>
</body>

</html>

上記設定が完了したら、/newsにアクセスして見ましょう。

下記のような画面が表示されると思います。

LaravelとFilamentを使い管理画面を作成してみました。

今回ご紹介した実装は、基本的なCMS機能になりますので、実際にはより多くのデータ、機能を実装する必要がありますが、Filamentを使用することでしっかりと設計ができていればCMS機能を実装することが容易にできるようになります。

管理画面を作成する前にModelの定義などの設計が重要になりますので、事前にしっかりと設計を行い、必要な機能や管理画面での更新をイメージするとよりスマートな設計になると思います。

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています