Laravelでbladeを利用したViewを作成

今回はLaravelで採用されているviewテンプレートのBladeを利用して画面を作成してみます。

phpはhtml内に直接phpの処理を記述することができますが、それだと画面と処理という別々のものが強く結合してしまうので保守性があんまりよくありません。
テンプレートを利用すると、画面のパーツ化による流用がしやすくなったり、画面表示の際の変数の展開で自動エスケープなどをしてくるので便利です。
いわゆる画面開発をしていて「あれがしたい」というものが一通り準備されていたりします。

ではさっそく使ってみましょう。

基本構造の作成

Bladeでは画面の継承というものがあります。
これは大きな構造をまず作成して、そこから細部を補足するような画面を作成していくイメージなのかなぁという感じです。
言葉で見ても意味がわからないので、コードに落としてみます。

今回はheader.blade.php, footer.blade.php, master.blade.phpというテンプレートを/apps/views/layouts/に作成します。

【master.blade.php】

<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta author="raru">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <title>  
      @yield('page_title')  
    </title>  
    {{ HTML::style('css/bootstrap.min.css', array('media'=>'screen')); }}  
    {{ HTML::script('js/jquery-2.1.1.min.js', array('media'=>'screen')); }}  
    {{ HTML::script('js/bootstrap.min.js', array('media'=>'screen')); }}  
    @yield('scripts')  
    @yield('styles')  
  </head>  
  <body>  
    @section('header')  
      @include('layouts.header')  
    @show  
  
    @yield('body')  
  
    @section('footer')  
      @include('layouts.footer')  
    @show  
  </body>  
</html>

ちょっと説明をします。

<title>  
  @yield('page_title')  
</title>

まずこの@yieldというものです。
これはpage_titleという名前で、この場所に後から何かを差し込みできるようにするという意味になります。
領域を確保しているという感じでしょうか。
@yield('scripts')などを用意しているのも、基本的に読み込むものはベースのテンプレートで読み込んで、画面ごとに違うものについてはその画面ごとに融通を効かせる為です。

@section('header')  
  @include('layouts.header')  
@show

これはここを1つのセクションとして領域の確保をしています。
@sectionから@showまで1つのブロックになっています。
@showは、このsectionのブロック内に記述されているものをいますぐ表示する、ということを指します。
今回は@includeを利用して、/app/views/layouts/header.blade.phpを読み込んでします。
blade.phpの拡張子は記載不要です。
これはcontrollerからviewを返すときと同じですね。

また、ここを単純に@includeとしていないのは@sectionを利用して名前付きの空間を確保することで、layouts.headerで対応できない画面構成が必要になった時に@section内の内容を上書きして他のlayoutを読み込めるようにする為です。

【header.blade.php】

headerだよ！

【footer.blade.php】

footerだよ！

とりあえず試しなので、ヘッダとフッタはこんな感じで。

ちなみに{{ HTML::style('css/bootstrap.min.css', array('media'=>'screen')); }}などの部分はcss読み込みやjavascript読み込みを行っています。
このcssファイルは/app/public/css/に置いてあります。

これが展開されるとhttp://localhost/css/のようにフルパスになってしまうのですが、相対パスでの取得の仕方がいまいちわかりませんでした。
が、どうせ展開されればアプリケーションのルートに合わせてurlを生成してくれるのだしあまり気にしなくてもいいのかもしれませんね。

中身(body)の作成

では、基本骨子は作成したのでいわゆる画面に出す内容を作成してみましょう。

@extends('layouts.master')  
  
@section('page_title')  
姓名分割 | トップ  
@stop  
  
@section('body')  
Hello Laravel with Blade!!  
@stop

こちらも説明します。
まず一番上にある@extendsが前述した画面の継承になります。
これで、さっき作ったmaster.blade.phpを基にした画面が作成できます。

@section('page_title')から@stopまでのブロックは、masterでyieldとして宣言さえれていたpage_titleの部分に置き換わります。
なので、今回生成されるhtmlは以下のようになります。

<title>姓名分割 | トップ</title>

@yieldで確保された領域はその継承先でsectionを利用して埋め込んであげるわけですね。
bodyも同様です。

ちなみにheaderなどのsectionを上書きしたいときは
@section('header') 〜　@overrideで出来るようです。
※試してませんが、そうらしい

今回は特に処理は記述していませんがBladeでは他にもifやforのような処理や{{{}}}というエスケープありの変数展開と{{}}というエスケープなしの変数展開などの記法も存在します。

便利に使って画面を流用聞くようにシンプルに記述していきたいところですね。