Viewについて
前回の投稿でControllerに直接HTMLを書いてそれをreturnするやり方で所定のブラウザ表示をさせてみました。
こうしたやり方も一つの手段ですが、あまり複雑な表現はできません。
本格的なWEBページを作成するためにはHTMLをじっくり管理する環境が欲しいところです。
その環境がMVCモデルのVに相当するViewです。
Viewは画面表示を担当する部分で、そのための様々なテンプレートを管理しています。
テンプレート
テンプレートはHTMLそのものではありません。
Laravelではこれらのテンプレートを組み合わせ、またControllerやModelから外部情報を引用して、実際の表示内容を構成します。
この作業をレンダリングといいます。
レンダリングを行うのはテンプレートに書かれたテンプレートエンジンです。
テンプレートはViewのなか、またLaravel全体の中で非常に重要な役割を負っているわけです。
テンプレートには大きく２つの方式があります。
一つは、ほぼテンプレートにPHPコードを書いてしまうやり方。
PHPに慣れている人にとってはわかりやすい方法です。
もう一つはBlade（ブレード）というファイル形式を利用するやり方です。
これはLaravel独自ファイル形式で、ブレード間の継承や一部引用、またModel経由でもデータの受け渡しが行えます。
この機能により、Viewのレイアウトをパーツ化して自由にレンダリングすることができます。
Bladeの活用こそがLaravelの真骨頂といえるかもしれません。
LaravelにおいてPHPテンプレート、Bladeテンプレートどちらが優先されるかというと、それはBladeテンプレートになります。
例えばControllerから
return view('dmen.sel_sha');
とテンプレートを呼び出した場合、もしテンプレートに
sel_sha.php
sel_sha.blade.php
双方のファイルがあった場合、優先的に呼び出されるのはsel_sha.blade.phpになります。
PHPテンプレートの実演
まずテンプレートとしてPHPテンプレートを作成してみます。
テンプレートはresources>views> 配下に配置します。
viewsディレクトリを開くとデフォルトでwelcome.blade.php が用意されています。
Route の演習の際に設定を加える前のRouteの中身が
Route::get('/', function () {
return view('welcome');
});
でした。
この return view('welcome') で呼び出されていたのがこの「welcome.blade.php」であったということです。
管理を容易にするためにアプリケーション名を付けたフォルダを追加します。
ここにPHPテンプレートとして「sel_sha.php」を作成します。
テンプレートの作成にartisanコマンド等は必要ありません。エディターやエクスプローラで新規ファイル追加します。
あらかじめsel_sha.phpに対応したスタイルシートをpiblic>css の中にapp.css として
画像を同じく publicの下にimagesディレクトリを作成し public>images としてその中に収納します。
この状態では当然sel_sha.phpの中身はブランクなので、あらかじめ用意していたHTMLコードをここに貼り付けます。
そしてブラウザから「localhost:8000」とURLを叩くと
所定のブラウザ画面が表示されます。
このsel_sha.phpがPHPテンプレートです。
次にBladeテンプレートを作成してみます。
Bladeテンプレート
BladeはLaravel独自のテンプレート形式で、テンプレート同士で継承を行ったり、内容の一部を引用したりすることができます。
一般的にはテンプレートファミリーにおける親に相当する共通テンプレートを作成し、そこに共通パーツとして作成したヘッダーやフッター、そして表示内容としての子テンプレートをはめ込むイメージです。
Bladeには決められた構文があります。
＠***** と記述されたディレクティブというものです。
Bladeのレイアウト全般を制御するディレクティブには大きく以下の４つがあります。
① ＠extend('<Blade 名を指定>') : ()内で指定されたブレードを継承します。
② ＠yield('<Section 名を指定>') : ()内で指定されたSection名を引用します。Section名は子テンプレートなどに定義します。
③ ＠Section('**')～＠endsection : **部分にセクション名を定義し、この範囲をyieldで指定できるようにします。
④ ＠include('**') : 共通パーツとして作成されたテンプレートを指定して引用します。
Bladeにはレイアウトに関するものだけではなくいろいろな機能を実装するためのディレクティブが用意されています。
Bladeテンプレートの実演 １
実演として、先にデモをしたsel_sha.phpと同じ画像をBladeで再現します。
基本設計は
・共通テンプレートとしてlayout.blade.php を作成する
・共通ヘッダーとして header.blade.php を作成する
・共通フッターとして footer.blade.php を作成する
・コンテンツとして共通テンプレを継承した sel_sha.blade.php を作成する。
・もうひとつ、共通テンプレを継承した ad_banner.php を作成する。
まず、先ほど作成したsel_sha.php をエディターで開きます。
これを名前を付けて保存（Save As...）で「sel_sha.blade.php」として同じdmenフォルダ内に保存します。
同じようにsel_sha.phpから
・layout.blade.php
・header.blade.php
・footer.blade.php
を作成して、dmenフォルダのひとつ上、viewsフォルダ直下に保存します。
まず、sel_sha.blade.php を加工します。
・先頭の<HTML>から最後の</HTML> のうち<div class="content-login">～</div> と <div class="content-ad">～</div>に囲まれた部分以外を全部消去します。
・親テンプレートである layout.blade.php を継承する旨の宣言文 @extends('layout') と先頭に追記します。
・そして、この sel_sha.blede.php を引用した画面のタイトルと定義するために @section('title','フロントページ') も追記します。
・<div class="content-login">～</div> に囲まれていた部分を @section('content') ～ @endsection で囲みます。
・同様に <div class="content-ad">～</div> に囲まれていた部分を @section('banner') ～ @endsection で囲みます。
これら消去した情報は後で作成する共通テンプレートである layout.blade.php でレイアウト情報として定義します。
そして今度は親テンプレートである layout.blade.php を加工します。
・<TITLE>～</TITLE> 間に @yield('') を挿入します。
・<div class="content-login">～</div>で囲まれた要素を全部削除します。
そして @yield('content') を削除した部分に挿入します。
・加えて <div class="content-ad">～</div>で囲まれた要素を全部削除します。
そして削除したスペースに@yield('banner') を挿入します。
この状態でブラウザでlocalhost:8000を叩くと、もともとの sel_sha.php で書いたコンテンツが表示されています。
@yield によって
・@section('title','フロントページ')
・@section('content') ～ @endsection
・@section('banner') ～ @endsection
がはめ込まれていることがわかります。
ちなみに、親/子テンプレートという表現をするとLaravelではまず親が呼び出されて、その後中身が書かれている子が引用されるという順序に思えてしまいますが、あくまでControllerから呼び出されているのは子であるsel_sha.blade.php です。
呼び出されたsel_sha.blade.php が @extends('layout') で親を継承している、ということです。
Bladeテンプレートの実演 ２
次にディレクティブ @include を利用してlayout.blade.php のヘッダーとフッターをパーツ化します。
・layout.blade.php の<header> ～ </header> 間を削除します。
・そしてその中身を作成済の header.blade.php に移植します。
・そして layout.blade.php の<header> ～ </header> 間 に @include('header') を挿入します。
layout.blade.phpの修正
header.blade.php の作成
同様にこの作業を <footer> ～ </footer> 間に対しても行います。
フッターの作業を完了させて、ブラウザでlocalhost:8000を叩くともともとの sel_sha.php で書いたコンテンツが表示されています。
@yield は異なるファイルの@section ～ @endsection 間の内容を引用するにに対し、@include は異なるファイル全体をはめ込むイメージです。