Laravelで画像管理アプリを作成してみよう

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class ImageController extends Controller
{
    public function index(){}    
    public function create(){}
    public function store(Request $request) {}
    public function show(string $id) {}
    public function edit(string $id) {}
    public function update(Request $request, string $id) {}
    public function destroy(string $id) {}
}

use App\Http\Controllers\ImageController; //追加

Route::middleware(['auth:sanctum', 'verified'])->group(function () {
    // ImageControllerのリソースフルルーティング
    Route::resource('/images', ImageController::class);
});

public function create()
    {
        // 画像アップロードフォームのビューを返す
        return view('images.create');
    }

@extends('layouts.base')

@section('title', '画像アップロード')

@section('content')
<div class="max-w-md mx-auto my-10 bg-white p-5 rounded-md shadow-sm">
    <div class="text-center">
        <h1 class="my-3 text-3xl font-semibold text-gray-700">画像アップロード</h1>
        <p class="text-gray-400">アップロードする画像を選択してください</p>
    </div>

    <div class="m-7">
        <form action="/images" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mb-6">
                <label for="image" class="block mb-2 text-sm text-gray-600">画像</label>
                <input type="file" name="image" id="image" class="w-full px-3 py-2 text-gray-700 bg-white border border-gray-300 rounded-md focus:outline-none" required>
            </div>
            <div class="mb-6">
                <button type="submit" class="w-full px-3 py-4 text-white bg-blue-500 rounded-md focus:bg-blue-600 focus:outline-none">アップロード</button>
            </div>
        </form>
    </div>
</div>

<!-- アップロード成功メッセージ -->
@if (session('success'))
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mt-4 mx-auto w-1/2 text-center" role="alert">
    <p>{{ session('success') }}</p>
</div>
@endif
@endsection

use Intervention\Image\Facades\Image as ImageIntervention;  //追加
use Illuminate\Support\Facades\Storage;  //追加
use Illuminate\Support\Str; //追加
...
 // 画像アップロード処理
public function store(Request $request)
{
    $request->validate([
        'image' => 'required|image|max:2048', // 画像ファイルのバリデーション
    ]);

    $file = $request->file('image');
    $originalName = $file->getClientOriginalName();
    $timestamp = time();
    $newPath = 'storage/images/';

    // 拡張子を除いたファイル名の取得
    $filenameWithoutExt = pathinfo($originalName, PATHINFO_FILENAME);

    // オリジナルの画像インスタンスを生成
    $originalImage = ImageIntervention::make($file);

    // 元のサイズでWebP保存
    $newName = $timestamp . '_' . $filenameWithoutExt . '.webp';
    $encodedOriginal = $originalImage->encode('webp', 80);
    Storage::disk('custom_images')->put($newName, (string) $encodedOriginal);
    $size = strlen((string) $encodedOriginal); // サイズを取得

    // 縦横半分のサイズでWebP保存
    $m_image = ImageIntervention::make($file)->resize($originalImage->width() / 2, $originalImage->height() / 2);
    $encodedMImage = $m_image->encode('webp', 80);
    $m_image_path = $timestamp . '_' . $filenameWithoutExt . '_half.webp';
    Storage::disk('custom_images')->put($m_image_path, (string) $encodedMImage);
    $m_image_size = strlen((string) $encodedMImage); // サイズを取得

    // 200x200で中央をクロップしてWebP保存
    $thumbnail_image = ImageIntervention::make($file)->fit(200, 200);
    $encodedThumbnail = $thumbnail_image->encode('webp', 80);
    $thumbnail_path = $timestamp . '_' . $filenameWithoutExt . '_thumb.webp';
    Storage::disk('custom_images')->put($thumbnail_path, (string) $encodedThumbnail);
    $thumbnail_size = strlen((string) $encodedThumbnail); // サイズを取得

    // データベースに画像情報を保存
    $image = new Image;
    $image->uuid = Str::uuid();
    $image->name = $filenameWithoutExt;
    $image->path = $newPath . $newName;
    $image->size = $size;
    $image->m_image_path = $newPath . $m_image_path;
    $image->m_image_size = $m_image_size;
    $image->thumbnail_path = $newPath . $thumbnail_path;
    $image->thumbnail_size = $thumbnail_size;
    $image->save();

    return redirect()->route('images.index')->with('success', '画像がアップロードされました。');
}

public function show(String $id)
{
    // Image モデルを ID で検索
    $image = Image::findOrFail($id);

    // ビューにデータを渡す
    return view('images.show', compact('image'));
}

@extends('layouts.base')

@section('title', '画像詳細')

@section('content')
    <div class="container mx-auto p-4">
        <div class="card card-bordered">
            <figure>
                <img src="{{ asset($image->path) }}" alt="{{ $image->name }}" class="rounded-t-lg">
            </figure> 
            <div class="card-body">
                <h2 class="card-title">{{ $image->name }}</h2>
                <p>サイズ: {{ formatBytes($image->size) }}</p> <!-- ここにサイズを表示 -->
                <!-- ここにその他の画像詳細情報を表示 -->
                <div class="justify-end card-actions">
                    <a href="{{ route('images.index') }}" class="btn btn-primary">一覧に戻る</a>
                    <a href="{{ route('images.edit', $image->id) }}" class="btn btn-success">編集</a>
                    <a href="{{ route('images.download', $image->uuid) }}" class="btn btn-secondary">Download</a>
                    <form action="{{ route('images.destroy', $image->uuid) }}" method="POST" onsubmit="return confirm('本当に削除しますか？');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-error">削除</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

public function edit(String $id)
{
    // IDに基づいて画像を検索
    $image = Image::findOrFail($id);

    // 編集ビューを表示し、画像オブジェクトを渡す
    return view('images.edit', compact('image'));
}

@extends('layouts.base')

@section('title', 'タイトル編集')

@section('content')
<div class="container mx-auto p-4">
    <h1 class="text-lg font-bold mb-4">画像タイトル編集</h1>

    <form action="{{ route('images.update', $image->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="mb-4">
            <label for="name" class="block text-sm font-medium text-gray-700">画像名</label>
            <input type="text" id="name" name="name" value="{{ $image->name }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
        </div>

        <!-- その他の編集可能なフィールド -->

        <div class="flex justify-start gap-4">
            <button type="button" onclick="window.history.back();" class="btn btn-secondary">戻る</button>
            <button type="submit" class="btn btn-primary">更新</button>
        </div>
    </form>
</div>
@endsection

public function update(Request $request, String $id)
{
    // バリデーション
    $validated = $request->validate([
        'name' => 'required|string|max:255',
        // その他の必要なバリデーションルール
    ]);

    // IDに基づいて画像を検索
    $image = Image::findOrFail($id);

    // データの更新
    $image->name = $request->name;
    // その他のフィールドも同様に更新
    $image->save();

    // 更新後、適切なリダイレクト先へ
    return redirect()->route('images.index')
                     ->with('success', '画像情報が更新されました');
}

use Illuminate\Support\Facades\File;  //追加
...

// 画像削除処理
public function destroy($uuid) {
    // UUIDに基づいて画像を検索
    $image = Image::where('uuid', $uuid)->firstOrFail();

    // 画像ファイルの削除
    $paths = [$image->path, $image->m_image_path, $image->thumbnail_path];
    foreach($paths as $path) {
        if($path && File::exists(public_path($path))) {
            File::delete(public_path($path));
        }
    }

    // データベースから画像レコードの削除
    $image->forceDelete();

    // 削除後、適切なリダイレクト先へ
    return redirect()->route('images.index')
        ->with('success', '画像が削除されました');
}

disks' => [
...

  'custom_images' => [
            'driver' => 'local',
            'root' => '/var/www/storage/images',
            'url' => env('APP_URL').'/images',
            'visibility' => 'public',
        ],
],

// 画像ダウンロード(リソースルートより前に記述する必要がある)
Route::get('/images/download/{id}', [ImageController::class, 'download'])->name('images.download');
// 画像に関するリソースルート CRUD（作成、読み取り、更新、削除）
Route::resource('images', ImageController::class);

mkdir -p app/Helpers
sudo vim app/Helspers/helpers.php

<?php

if (!function_exists('formatBytes')) {
    function formatBytes($bytes, $precision = 2) {
        $units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
        $bytes = max($bytes, 0);
        $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
        $pow = min($pow, count($units) - 1);
        $bytes /= pow(1024, $pow);

        return round($bytes, $precision) . ' ' . $units[$pow];
    }
}

sudo chown www-data:www-data -R app/Helpers
sudo chmod 775 -R app/Helpers

"autoload": {
    "psr-4": {
        "App\\": "app/"
    },
    "files": [
        "app/Helpers/helpers.php"
    ]
}