easysで簡単実装!初心者でも分かるweb管理システム導入ガイド

  1. 導入文
  2. 1. EASYSとは何か
    1. 1‑1. 開発哲学
    2. 1‑2. 主な特徴
  3. 2. 事前準備
    1. 2‑1. システム要件
    2. 2‑2. 必要ツールのインストール
    3. 2‑3. 作業ディレクトリの作成
  4. 3. EASYS プロジェクトの起動
    1. 3‑1. プロジェクトテンプレートを生成
    2. 3‑2. 開発サーバ起動
  5. 4. 基本設定
    1. 4‑1. 環境変数
    2. 4‑2. DBスキーマ作成
  6. 5. モデルとマイグレーション
    1. 5‑1. モデル生成
    2. 5‑2. マイグレーション内容の確認
    3. 5‑3. マイグレーション実行
  7. 6. ルーティングとコントローラ
    1. 6‑1. ルート設定
    2. 6‑2. コントローラ作成
  8. 7. ビューとテンプレート
    1. 7‑1. posts/index.html.twig
    2. 7‑2. フォームビュー
  9. 8. ユーザー認証
    1. 8‑1. 認証スキャフォールディング
    2. 8‑2. メール認証
    3. 8‑3. パスワードリセット
  10. 9. 権限管理
    1. 9‑1. 役割(Role)とポリシー(Policy)の設定
    2. 9‑2. コントローラでの権限チェック
  11. 10. データ入力と検索
    1. 10‑1. 検索フォームの追加
    2. 10‑2. コントローラで検索処理
  12. 11. バリデーションとエラーハンドリング
    1. 11‑1. バリデーションルール
    2. 11‑2. エラーメッセージ表示
  13. 12. 管理画面のカスタマイズ
    1. 12‑1. テーマ切替
    2. 12‑2. Admin ディレクトリを統一
    3. 12‑3. ロゴやアイコンの設定
  14. 13. パフォーマンスとキャッシュ
    1. 13‑1. フロントエンドビルド
    2. 13‑2. データベースキャッシュ
    3. 13‑3. 画像のレスポンシブ化
  15. 14. デプロイ
    1. 14‑1. Docker を使ったデプロイ
    2. 14‑2. Nginx 設定サンプル
  16. 15. まとめ

導入文

Web管理システムを作ると聞くと、エンジニア初心者にとっては「サーバー設定・データベース設計・フロントエンドの知識全部必要!」といった不安が漂います。しかし、実は EASYS というフレームワークを使えば「もうそれら全部一気に揃える」必要は無いのです。EASYSは、シンプルに始められ、設定も少量のコードで済むため、初心者でもすぐに稼働できます。本記事では、EASYSを用いて「管理画面一式」を構築するための手順を、導入からデプロイまでステップバイステップで解説します。コードサンプルやヒントを交えながら、疑問に思いそうな点には丁寧に答えていきますので、安心して読んでください。


1. EASYSとは何か

1‑1. 開発哲学

EASYS は「Easy Application Structure」の略で、以下のコンセプトを掲げています。

  • Minimal Setup:必要最低限の設定で即実行
  • Convention over Configuration:慣習に基づいたファイル構成で手動設定を大幅削減
  • Modular Architecture:機能ごとにプラグイン化し、任意の箇所を拡張しやすく

そのため、**「1〜2時間で管理画面を構築」**を目指す初心者にも最適です。

1‑2. 主な特徴

特徴 内容
CLI ツール easys init でプロジェクト生成、easys run で開発サーバ起動
組み込み認証 メール+パスワード、Google OAuth、SSO など
自動 CRUD easys model でモデル作成すると自動でエンドポイント・テンプレート生成
データベース抽象化 MySQL、PostgreSQL、SQLite まで一括対応
テーマエンジン Twig (または Blade) を基本に、簡単なカスタムテーマ作成可

2. 事前準備

2‑1. システム要件

  • PHP 8.2 以上
  • Composer 2.x 以上
  • Node.js 16.x 以上(フロントエンドビルド用)
  • Webサーバ(Apache/Nginx)あるいは内蔵開発サーバ
  • 任意のリレーショナル DB (SQLite 推奨)

Tip:ローカル開発では SQLite を使えば、データベース設定がほぼ不要です。正式リリースでは MySQL や PostgreSQL へ切り替えるだけでOK。

2‑2. 必要ツールのインストール

# macOS (Homebrew)
brew install php composer node

# Ubuntu
sudo apt update
sudo apt install php8.2 php8.2-cli php8.2-fpm php8.2-xml \
                 composer nodejs npm

2‑3. 作業ディレクトリの作成

mkdir easys_demo
cd easys_demo

3. EASYS プロジェクトの起動

3‑1. プロジェクトテンプレートを生成

composer create-project easys/easys-app myproject
cd myproject

これで myproject ディレクトリに標準ファイル構成が生成されます。
ディレクトリ構造例

myproject/
├─ app/          # コントローラ・サービス
├─ database/     # マイグレーション・シーディング
├─ resources/
│  ├─ views/      # Twig テンプレート
│  └─ assets/     # CSS/JS
├─ public/       # フロントエンド入口
├─ routes/       # ルーティング定義
├─ config/       # 環境設定
└─ .env          # 環境変数

3‑2. 開発サーバ起動

php bin/console easys:serve

ブラウザで http://localhost:8000 を開けば、初期管理画面にアクセスできるはずです。デフォルトユーザーは admin@example.com / password 。ログイン後は「Dashboard」から更に構築を進めます。


4. 基本設定

4‑1. 環境変数

.env を開き、以下を確認・編集します。

APP_NAME=EASYS Demo
APP_ENV=local
APP_DEBUG=true
APP_URL=http://localhost:8000

# ディレクトリ
STORAGE_PATH=storage
TEMP_PATH=tmp

# DB設定
DB_CONNECTION=sqlite
DB_DATABASE=database/database.sqlite

SQLite の場合、database/database.sqlite ファイルを作成

touch database/database.sqlite

4‑2. DBスキーマ作成

php bin/console easys:migrate

これで schema_version テーブルと初期スキーマが DB に書き込まれます。


5. モデルとマイグレーション

EASYS は CLI から スキャフォールディング が可能です。今回は「記事(Post)」を管理するシンプルな例を作りましょう。

5‑1. モデル生成

php bin/console easys:model Post

app/Model/Post.php とマイグレーションファイルが生成されます。

5‑2. マイグレーション内容の確認

// database/migrations/2026xx_create_posts_table.php
public function up(): void
{
    $this->table('posts')
          ->id()
          ->text('title')
          ->text('body')
          ->timestamps()
          ->save();
}

ここで timestamp()created_at / updated_at を自動で付与します。

5‑3. マイグレーション実行

php bin/console easys:migrate

6. ルーティングとコントローラ

6‑1. ルート設定

routes/web.php に CRUD 用のルートを追加します。

use App\Controller\PostController;

Route::resource('posts', PostController::class);

Route::resource は /posts, /posts/create, /posts/{id}/edit などの RESTful パスを自動生成。

6‑2. コントローラ作成

php bin/console easys:controller PostController

生成されたクラスの index, create, store, edit, update, destroy をカスタマイズします。

// app/Controller/PostController.php
class PostController extends BaseController
{
    public function index()
    {
        $posts = Post::paginate();
        return view('posts.index', compact('posts'));
    }

    public function create()
    {
        return view('posts.create');
    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'title' => 'required|max:255',
            'body'  => 'required',
        ]);

        Post::create($validated);

        return redirect()->route('posts.index')
                         ->with('success', '記事を作成しました。');
    }

    // 以降 edit, update, destroy は同様に実装
}

7. ビューとテンプレート

EASYS のデフォルトは Twig ですが、必要に応じて Blade などに変更も可能です。ここでは Twig を使用。

7‑1. posts/index.html.twig

{% extends 'layouts/app.html.twig' %}

{% block title %}記事一覧{% endblock %}

{% block content %}
<h1>記事一覧</h1>

<a href="{{ path('posts.create') }}" class="btn btn-primary mb-3">新規作成</a>

<table class="table table-striped">
    <thead>
        <tr><th>タイトル</th><th>作成日</th><th>操作</th></tr>
    </thead>
    <tbody>
    {% for post in posts.items %}
        <tr>
            <td>{{ post.title }}</td>
            <td>{{ post.created_at|date('Y-m-d') }}</td>
            <td>
                <a href="{{ path('posts.edit', {id: post.id}) }}" class="btn btn-sm btn-warning">編集</a>
                <form action="{{ path('posts.destroy', {id: post.id}) }}" method="post" style="display:inline;">
                    {{ csrf_field() }}
                    <input type="hidden" name="_method" value="DELETE">
                    <button class="btn btn-sm btn-danger">削除</button>
                </form>
            </td>
        </tr>
    {% else %}
        <tr><td colspan="3">記事がありません</td></tr>
    {% endfor %}
    </tbody>
</table>

{{ posts.links() }}
{% endblock %}

posts.links() は自動でページネーションリンクを生成します。

7‑2. フォームビュー

posts/create.html.twigposts/edit.html.twig を用意し、共通コンポーネントで入力フィールドを再利用すると管理が楽です。


8. ユーザー認証

EASYS には組み込みの Auth パッケージがあります。

8‑1. 認証スキャフォールディング

php bin/console easys:make:auth

これで /login, /register, /logout などが生成されます。

8‑2. メール認証

.env にメール設定を追加します。

MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your_email@gmail.com
MAIL_PASSWORD=your_app_password
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=admin@example.com
MAIL_FROM_NAME="EASYS Demo"

8‑3. パスワードリセット

easys:make:forget-password を実行すると必要なロジックとビューが作成されます。


9. 権限管理

9‑1. 役割(Role)とポリシー(Policy)の設定

php bin/console easys:make:role admin

これで roles_admin テーブルと AdminPolicy が生成。

9‑2. コントローラでの権限チェック

public function destroy(Request $request, Post $post)
{
    $this->authorize('delete', $post);

    $post->delete();

    return redirect()->route('posts.index')
                     ->with('success', '記事を削除しました。');
}

authorize は自動で AdminPolicy@delete を呼び出します。


10. データ入力と検索

10‑1. 検索フォームの追加

posts/index.html.twig に検索入力を追加。

<form method="GET" action="{{ path('posts.index') }}" class="mb-3">
    <input type="search" name="q" value="{{ request('q') }}" placeholder="タイトルで検索" class="form-control">
    <button class="btn btn-secondary mt-2">検索</button>
</form>

10‑2. コントローラで検索処理

public function index(Request $request)
{
    $query = Post::query();

    if ($request->filled('q')) {
        $query->where('title', 'like', '%' . $request->q . '%');
    }

    $posts = $query->paginate();
    return view('posts.index', compact('posts'));
}

11. バリデーションとエラーハンドリング

11‑1. バリデーションルール

$validated = $request->validate([
    'title' => 'required|max:255|unique:posts,title,' . $post->id,
    'body'  => 'required|min:10',
]);

11‑2. エラーメッセージ表示

{% if errors.any %}
    <div class="alert alert-danger">
        <ul>
            {% for field, messages in errors.messages %}
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
            {% endfor %}
        </ul>
    </div>
{% endif %}

12. 管理画面のカスタマイズ

12‑1. テーマ切替

config/theme.php を編集し、デフォルトCSSを Bootstrap5 に変更。

return [
    'css' => '/assets/css/bootstrap.min.css',
    'js'  => '/assets/js/bootstrap.bundle.min.js',
];

12‑2. Admin ディレクトリを統一

resources/views/admin/            # 管理画面用テンプレート
app/Http/Controllers/Admin/       # 管理コントローラ

12‑3. ロゴやアイコンの設定

resources/assets/images/logo.png を置き、layouts/app.html.twig で読み込み。

<img src="{{ asset('images/logo.png') }}" alt="Logo">

13. パフォーマンスとキャッシュ

13‑1. フロントエンドビルド

npm install
npm run dev      # 開発時
npm run prod     # 本番時

13‑2. データベースキャッシュ

EASYS のクエリビルダは Eloquent 風のキャッシュ機能を提供。必要なら cache() メソッドを使用。

$posts = Post::cache(60)->paginate();   // 60分キャッシュ

13‑3. 画像のレスポンシブ化

Intervention/Image を使えば、アップロード時に自動リサイズが可能。

composer require intervention/image
use Intervention\Image\Facades\Image;

Image::make($file)->resize(800, null, function ($constraint) {
    $constraint->aspectRatio();
    $constraint->upsize();
})->save(public_path('uploads/' . $file->hashName()));

14. デプロイ

14‑1. Docker を使ったデプロイ

# Dockerfile
FROM php:8.2-fpm
WORKDIR /var/www/html

RUN apt-get update && apt-get install -y libpng-dev libjpeg-dev zip unzip
RUN docker-php-ext-install pdo pdo_mysql gd

COPY . .
RUN composer install --no-dev --optimize-autoloader

CMD ["php-fpm"]
docker build -t easys-demo .
docker run -d -p 8080:80 easys-demo

14‑2. Nginx 設定サンプル

server {
    listen 80;
    server_name demo.example.com;
    root /var/www/html/public;

    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_pass 127.0.0.1:9000;
    }

    location ~* \.(jpg|jpeg|png|gif|svg)$ {
        expires max;
        add_header Cache-Control "public";
    }
}

Q&A

  • Q 1: 「EASYS で Eloquent は使えないの?」 → 組み込み ORM は Eloquent 風ですが、必要ならパッケージ illuminate/database を追加して Eloquent を使うこともできます。
  • Q 2: 「パスワードハッシュの変更は?」 → config/auth.php$hashers 配列で bcrypt から argon2id へ変更可能。
  • Q 3: 「ログインフォームを API で扱うには?」 → api.php ルートに Auth::api() を設定し、JWT といった認証トークンを利用。

15. まとめ

  1. スキャフォールディング

    • Route::resource
    • easys:make:auth
  2. Twig ビュー

    • ディレクトリ構成を統一
    • ページネーション & CSRF 診療
  3. Auth / Role

    • easys:make:auth, easys:make:role
  4. 検索・バリデーション

    • unique, min, max
    • Search フレームワーク
  5. デプロイ

    • Docker + Nginx

これで 記事管理システム の完成です。
「EASYS はコードが少ない」と感じていただければ幸いです。さらに発展させたい場合は、EASYS の公式ドキュメントミドルウェア を参照してください。 Happy coding!

コメント

タイトルとURLをコピーしました