Laravel でユーザ認証とマルチ認証を実現する

ユーザ認証を備えたコメント掲示板の開発

コメントの詳細ページ

ここではコメントの詳細情報を表示する機能を作成します．まず，ルート情報を定義します．コメントの詳細情報もメール検証後のユーザがログインして初めて閲覧できるようにします．

routes/web.php（抜粋）
Route::middleware('auth', 'verified')->group(function () {
    Route::get('/comments', [CommentController::class, 'index'])->name('comments.index');
    Route::get('/comments/{comment_id}', [CommentController::class, 'show'])->name('comments.show');
});

コントローラに show 関数を定義します．この関数では取得したコメントオブジェクトをビューに渡します．

app/Http/Controllers/CommentController.php（抜粋）
class CommentController extends Controller
{
    public function index()
    {
        $comments = Comment::get();
        // dd($comments);
        return view('comments.index')
                ->with('comments', $comments);
    }

    public function show($comment_id)
    {
        $comment = Comment::where('id', '=', $comment_id)
                ->first();
        if (!$comment) {
            return redirect('/comments');
        }
        return view('comments.show')
                ->with('comment', $comment);
    }
}

/resources/views/comments フォルダに show.blade.php を作成します．主な構造は index.blade.php と共通しているのでコピーして書き換えると良いでしょう．

resources/views/comments/show.blade.php
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Comment') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <div class="my-2 border border-gray-300 rounded-md p-3">
                        <div class="text-sm text-gray-700">Title:</div>
                        <div class="text-lg font-semibold text-gray-800 indent-4">{{ $comment->title }}</div>
                        <div class="text-sm text-gray-700">Body:</div>
                        <div class="text-base text-gray-800 indent-4">{{ $comment->body }}</div>
                        <div class="text-xs text-gray-600 pt-4">Created_at: {{ $comment->created_at }} / Updated_at: {{ $comment->updated_at }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

新たなクラスを利用したのでコンパイルします．

vagrant@ubuntu2204 laravelAuth $ npm run build ⏎

> build
> vite build

vite v4.5.0 building for production...
✓ 47 modules transformed.
public/build/manifest.json             0.26 kB │ gzip:  0.13 kB
public/build/assets/app-284e2196.css  30.85 kB │ gzip:  5.98 kB
public/build/assets/app-63bb58ea.js   72.12 kB │ gzip: 26.78 kB
✓ built in 1.83s
vagrant@ubuntu2204 laravelAuth $

一覧表示のページができました．

一覧ページから詳細ページへのリンクを作成します．


<div class="p-6 text-gray-900">
    @foreach ($comments as $comment)
        <div class="my-2 border border-gray-300 rounded-md p-3">
            <div class="font-semibold text-gray-800">
                <a href="{{ route('comments.show', $comment->id) }}">
                    {{ $comment->title }}
                </a>
            </div>
            <div class="text-sm text-gray-700">{{ $comment->body }}</div>
        </div>
    @endforeach
</div>

タイトルをクリックすると一覧ページに移動できるのですが，Tailwind CSS ではリンクのスタイルもリセットされているため，タイトルにリンクが設定されていることを認識することは困難です．

したがって，リンクにもスタイルを適用します．なお，擬似クラス hover はマウスポインタがリンク要素（文字列）の上にある状態で適用されるクラスです．また，擬似クラス active はリンク要素をクリックしている最中に適用されるクラスです．また，hover と active のクラス適用の変化をゆっくり 150 ミリ秒（=0.15秒）かけて行います (transition ease-in-out duration-150)．


<div class="p-6 text-gray-900">
    @foreach ($comments as $comment)
        <div class="my-2 border border-gray-300 rounded-md p-3">
            <div class="font-semibold">
                <a href="{{ route('comments.show', $comment->id) }}" class="text-blue-500 hover:text-blue-800 hover:underline active:text-blue-900 active:bg-gray-200 transition ease-in-out duration-150">
                    {{ $comment->title }}
                </a>
            </div>
            <div class="text-sm text-gray-700">{{ $comment->body }}</div>
        </div>
    @endforeach
</div>

忘れずにコンパイルした後で表示を確認します．リンクにスタイルが適用されました．

マウスカーソルをポイントした時やクリックしている最中にデザインがどのように変化するかも確認してください．僅かな時間差でアニメーションがあることにも注意してください．このように Tailwind CSS では細かな設定ができるので，デザインの自由度が非常に高いですね．一方で慣れないうちはその都度デザインを考えなければならないので面倒かもしれませんが．．．

目次に戻る

« 戻る次へ »