Laravelのエラー画面をカスタマイズする

Laravelのエラー画面をカスタマイズする

Laravelでアプリケーション開発をしているときにエラー画面を見たことはありますでしょうか?

例えば「タスク管理アプリ開発:タスク詳細画面」にあるように web.phpTasksControllershow.blade.php というファイルが以下のような実装になっているとします。

<?php

Route::get('/{id}', 'TasksController@show')->where('id', '[0-9]+');
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Task;

class TasksController extends Controller
{
    public function show(int $id)
    {
        $task = Task::findOrFail($id);
        return view('tasks.show', ['task' => $task]);
    }
}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskApp</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div class="header">
        <h1>タスク詳細</h1>
        <a href="/" class="button">一覧に戻る</a>
    </div>
    <div class="main">
        <div class="title">{{ $task->title }}</div>
        <div class="contents">{{ $task->contents }}</div>
    </div>
</body>
</html>

データベースにはデータが2つ程ある場合、仮に http://127.0.0.1:8000/100 のような存在しないデータを取得しようとした場合、どのようになるでしょうか?以下のような 404 error の画面が表示されるはずです。

これが 404 error の画面です。404 というのはHTTPステータスコードと呼ばれ、サーバからのレスポンスの意味を表す3桁の数字コードのことです。

404 以外にも無事にレスポンスが返ってきたことを表す 200 や、サーバ側でエラーが発生している 500 などがあります。

標準のエラー画面はシンプルすぎる

上記の例のようにURLにidを含む形のアプリケーションだとURLを少し変更するだけで404 error の画面が表示されてしまいます。

「そのデータは存在しません」ということを示すためにもエラー画面が表示されるのは良いことなのですが、メインページを素敵なデザインで作っている場合、突然こんな質素なページが出てくると統一感がなくて、残念ですよね?

エラー画面をカスタマイズする

Laravelでは resources/views/errors/404.blade.php のように errors ディレクトリの中にHTTPステータスコード名のファイルを作成することで、エラー画面をカスタマイズすることができます。

500 error の場合は resources/views/errors/500.blade.php となります。

まずは resources/views ディレクトリ配下に errors ディレクトリを作成します。そして errors ディレクトリの配下に 404.blade.php を作り、以下のように実装してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskApp</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <h1>そのデータはありません</h1>
</body>
</html>

先ほどのように http://127.0.0.1:8000/100 などの存在しないデータを取得しようとしてみてください。以下のような画面が表示されればOKです👍

これで他のページとデザインの統一感を出すことが可能になります 🤗

参考:他サービスのエラーページ

有名なサービスのエラーページを見てみましょう。

Twitter

シンプル。

Facebook

アイコンをうまく使っています。

Amazon.com

トップページへの戻り方が明確です。

Airbnb

トップページ以外のリンクを示し、ユーザーが自分のやりたいことに合わせて移動できるようになっています。

note

どんなワードで検索をすればいいのかを明確にしてくれています。

まとめ

デザインをこだわって作ったサービスならば、エラーページなどの細部もこだわってデザインができると素晴らしいなと思います。