MENU
ツチノコテクノロジーの社内向けコーディング標準と技術の案内
  1. ホーム
  2. プログラミング
  3. Laravelでlayoutsのファイルを更新しても画面に表示されないときの凡ミス例

Laravelでlayoutsのファイルを更新しても画面に表示されないときの凡ミス例

プログラミング
Laravel PHP エラー対応
yfukuda
  • URLをコピーしました！

Laravelの画面開発をするとき、「各画面に同じことを記述しているな」「１カ所に集約できないかな」と考えることがあると思います。そのときは、 resources/views/layouts の中のファイルを更新することで、１カ所に記述すれば全体が更新されるような仕組みを作ることができます。

今日は、layoutsの修正が反映されなくて時間を溶かしたお話しです。
今回使うのは、この resources/views/layouts/admin/app.blade.php ファイルです

@extends('adminlte::page')

{{-- Extend and customize the browser title --}}

@section('title')
    {{ config('adminlte.title') }}
    @hasSection('subtitle') | @yield('subtitle') @endif
@stop

{{-- Extend and customize the page content header --}}

@section('content_header')
    @hasSection('content_header_title')
        <h1 class="text-muted">
            @yield('content_header_title')

            @hasSection('content_header_subtitle')
                <small class="text-dark">
                    <i class="fas fa-xs fa-angle-right text-muted"></i>
                    @yield('content_header_subtitle')
                </small>
            @endif
        </h1>
    @endif
@stop

{{-- Rename section content to content_body --}}

@section('content')
    @yield('content_body')
@stop

{{-- Create a common footer --}}

@section('footer')
    <div class="float-right">
        Version: {{ config('app.version', '1.0.0') }}
    </div>
@stop

{{-- Add common Javascript/Jquery code --}}

@push('js')
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="{{ asset('admin/js/script.js') }}" type="text/javascript"></script>
@endpush

{{-- Add common CSS customizations --}}

@push('css')
<style type="text/css">
    .breadcrumb {
        background-color: transparent !important;
    }
</style>
@endpush

とあるページでこのようにメッセージ出力をコーディングしていました

@extends('layouts.admin.app')

@section('content')

{{-- フラッシュメッセージ --}}
@if (session('flash_message'))
    <div class="alert alert-info mt-3" role="alert" id="flash-message">
        {{ session('flash_message') }}
    </div>
@endif

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 mb-2">
            <h2>投稿履歴</h2>
        </div>
        <div class="col-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/mypage">マイページ</a></li>
                <li class="breadcrumb-item active">投稿履歴</li>
            </ol>
        </div>
    </div>
</div>

<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-md-2">
            {{ $posts->links() }}
        </div>
        <div class="col-md-10">
            <a class="btn btn-sm btn-primary ml-2 float-sm-right" href="{{ route('post_create') }}" role="button">新規登録</a>
        </div>
    </div>

以下略

このページと同じように、 admin の各ページは、それぞれ、 session('flash_message') を呼び出す記述がありました。そこで、フラッシュメッセージを１カ所書くだけにして、各ページの記述は消すことにしました。幸い、idが設定されていますし、色も同じclassが指定されていたので１カ所にすることができます！

layouts/admin/app.blade.php を以下のように直しました

@extends('adminlte::page')

{{-- Extend and customize the browser title --}}

@section('title')
    {{ config('adminlte.title') }}
    @hasSection('subtitle') | @yield('subtitle') @endif
@stop

{{-- Extend and customize the page content header --}}

@section('content_header')
    @hasSection('content_header_title')
        <h1 class="text-muted">
            @yield('content_header_title')

            @hasSection('content_header_subtitle')
                <small class="text-dark">
                    <i class="fas fa-xs fa-angle-right text-muted"></i>
                    @yield('content_header_subtitle')
                </small>
            @endif
        </h1>
    @endif
@stop

{{-- Rename section content to content_body --}}

@section('content')

    {{-- フラッシュメッセージ --}}
    @if (session('flash_message'))
        <div class="alert alert-info mt-3" role="alert" id="flash-message">
            {{ session('flash_message') }}
        </div>
    @endif

    @yield('content_body')
@stop

{{-- Create a common footer --}}

@section('footer')
    <div class="float-right">
        Version: {{ config('app.version', '1.0.0') }}
    </div>
@stop

{{-- Add common Javascript/Jquery code --}}

@push('js')
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="{{ asset('admin/js/script.js') }}" type="text/javascript"></script>
@endpush

{{-- Add common CSS customizations --}}

@push('css')
<style type="text/css">
    .breadcrumb {
        background-color: transparent !important;
    }
</style>
@endpush

これで１カ所に集約されました。そしてこちらは削除します。

@extends('layouts.admin.app')

@section('content')
<!-- ここにあったフラッシュメッセージを削除しました -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 mb-2">
            <h2>投稿履歴</h2>
        </div>
        <div class="col-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/mypage">マイページ</a></li>
                <li class="breadcrumb-item active">投稿履歴</li>
            </ol>
        </div>
    </div>
</div>

<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-md-2">
            {{ $posts->links() }}
        </div>
        <div class="col-md-10">
            <a class="btn btn-sm btn-primary ml-2 float-sm-right" href="{{ route('post_create') }}" role="button">新規登録</a>
        </div>
    </div>

以下略

これで完了です。
しかし！！これだと、フラッシュメッセージは出力されませんでした。なぜでしょうか？

｛｛　シンキングタイム：　5分　｝｝

答えは下です(^^)

はい、答えは、ページの方の領域指定が @section('content') となっていたからですね(^^)/
わかれば簡単です。本当は @section('content_body') としないといけませんでした。

これを検証するためには、とりあえず layouts/admin/app.blade.php のいろんなところにテキストを表示してみます。

@extends('adminlte::page')

{{-- Extend and customize the browser title --}}

@section('title')
    あああ{{ config('adminlte.title') }}
    @hasSection('subtitle') | @yield('subtitle') @endif
@stop

{{-- Extend and customize the page content header --}}

@section('content_header')
いいい
    @hasSection('content_header_title')
ううう
        <h1 class="text-muted">
            @yield('content_header_title')
えええ
            @hasSection('content_header_subtitle')
おおお
                <small class="text-dark">
                    <i class="fas fa-xs fa-angle-right text-muted"></i>
                    @yield('content_header_subtitle')
                </small>
            @endif
        </h1>
    @endif
@stop

{{-- Rename section content to content_body --}}

@section('content')
かかか
    {{-- フラッシュメッセージ --}}
    @if (session('flash_message'))
        ききき
        <div class="alert alert-info mt-3" role="alert" id="flash-message">
            {{ session('flash_message') }}
        </div>
    @endif
くくく
    @yield('content_body')
@stop

{{-- Create a common footer --}}

@section('footer')
けけけ
    <div class="float-right">
        Version: {{ config('app.version', '1.0.0') }}
    </div>
@stop

{{-- Add common Javascript/Jquery code --}}

@push('js')
こここ
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="{{ asset('admin/js/script.js') }}" type="text/javascript"></script>
@endpush

{{-- Add common CSS customizations --}}

@push('css')
さささ
<style type="text/css">
    .breadcrumb {
        background-color: transparent !important;
    }
</style>
@endpush

これを実行すると、「かかか」と「くくく」は表示されません。「こここ」「さささ」はHTMLを直接確認すると見れました。ということは、呼び出しが間違っていると気づくと思います！(^^)/

エラーの確認のときは、こういう泥臭いやり方は、手っ取り早いし、簡単に思いつくので、原因を絞り込むのにとってもいいですね！
凡ミスに時間がどろっどろに溶かされないように、手っ取り早くトラブルの切り分けができる方法をいくつか覚えておくといいと思います！

正解はこちら

@extends('layouts.admin.app')

@section('content_body')

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 mb-2">
            <h2>投稿履歴</h2>
        </div>
        <div class="col-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/mypage">マイページ</a></li>
                <li class="breadcrumb-item active">投稿履歴</li>
            </ol>
        </div>
    </div>
</div>

<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-md-2">
            {{ $posts->links() }}
        </div>
        <div class="col-md-10">
            <a class="btn btn-sm btn-primary ml-2 float-sm-right" href="{{ route('post_create') }}" role="button">新規登録</a>
        </div>
    </div>

以下略

ツチノコテクノロジーに開発・保守を発注しませんか？

Laravel・Flutterの開発・保守をツチノコテクノロジーに発注しませんか？

まずはZOOMで打ち合わせ

お申し込みはこちら

ツチノコテクノロジーでは一緒に働く仲間を募集しています！

完全リモートで働きたい方へ！

詳しくは以下をご覧ください。

ツチノコテクノロジー採用サイト

プログラミング
Laravel PHP エラー対応
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

yfukudaのアバター yfukuda 取締役・システムエンジニア

ツチノコテックアカデミアの記事は、社内で誰かが質問してくれたことに回答したときに、ついでに記載しています！(^^)/
みんなの悩みを共有すれば、きっと誰かの役に立つと信じて更新しています！

関連記事

目次