速習Larave3(その11)、メインメニュー

タグ： Laravel3  

今回は小ネタを一つ。メニューを作りましょう。左側がスカスカなのに気が付きましたか？ナビゲーションの領域が空いているので、そこにメニューを付けて操作性をあげましょう。

まあ、実のところ最初から付けても良かったんですが、そうするとステップごとに項目を付けたり、消したり、変えたりと手間が増えるので、後回しにしました。

そろそろ、機能的には揃ってきたので、この時点で作成することにしましょう。もちろん、皆さんが作成する場合には、最初から付けておきましょう。自分が作成するWebアプリの一番のユーザーにならなければ、良い所も、悪いところも見つけづらいですからね。（でも、固執してはいけません。自分のやり方が一番だと固執しているがために、オープンソースではすったもんだが絶えません。現実の社会で、いくらあなたの方法が優れていても、顧客の要望に答えなければ、お金にはならないでしょう。）

さて、どうやりましょうか。もちろん、全ページで表示するものですから、レイアウトに入れましょう。template.blade.phpでしたね。

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>@yield('title')</title>
        <meta name="viewport" content="width=device-width">
        {{ HTML::style('laravel/css/style.css') }}
    </head>
    <body>
        <div class="wrapper">
            <header>
                <h1>ミニブログ</h1>
                <h2>@yield('title')</h2>
                <p class="intro-text" style="margin-top: 45px;">
                </p>
            </header>
            <div>
                @if ( $warning )
                    <div style="color: red;">
                        {{ $warning }}
                    </div>
                @endif
                @if ( $message )
                    <div style="color: green;">
                        {{ $message }}
                    </div>
                @endif
            </div>
            <div class="sidebar">
                <h3>メニュー</h3>
                <ul>
                @section('sidenavi')
                    <li>{{ HTML::link_to_route('post-index', 'ホーム') }}</li>
                    @if( Auth::guest() )
                        <li>{{ HTML::link_to_route('login','ログイン') }}</li>
                    @else
                        <li>{{ HTML::link_to_route('post-edit', '記事追加') }}</li>
                        <li>{{ HTML::link_to_route('logout', 'ログアウト') }}</li>
                    @endif
                @yield_section
                </ul>
            </div>
            <div role="main" class="main">
                <div class="home">
                    @yield('content')
                </div>
            </div>
        </div>
    </body>
</html>

新しい、Bladeの使い方が出てきました。@section()と@yield_sectionです。それ以外は、既に学んだ内容です。

今まで、レイアウト上で@yield()を使用し、呼び出し側のビューで定義したセクションを取り込む場所を指定してきました。今回の記述法は、場所を指定すると同時に内容も指定する方法です。

もし、呼び出し側のビューでそのセクションを定義していない場合、デフォルトとして@sectionと@yield_sectionの間の内容が表示されます。

呼び出し側のビューで、そのセクションの内容を定義した場合、ビューで定義した内容で表示されます。

つまり、ビューで指定しなくても全ページに表示されつつ、変更したいのであれば指定してもいいよというわけです。便利ですね。

更に、レイアウトで指定した内容は表示しつつ、ビュー独自の内容を付け加えたい場合は、そのビューで以下のように定義します。

@section('sidenavi')
@parent
{{ HTML::lint_to_route(...)}}
{{ HTML::lint_to_route(...)}}
@endsection

@parentの部分がレイアウトで定義された内容です。つまりこの場合、デフォルトの内容の下に、このビュー独自の項目が付け加えられます。