LaravelのBladeテンプレート

今日は、Formクラスを調べる予定でしたが、予定を変更してLaravelのBladeテンプレートについて調べてみたいと思います。『Laravelのビュー』でビューのネストの方法は既に調べてあります。 Laravelのレイアウトはビューだけでも簡単にできるのですが、やはり共通のレイアウトはテンプレートを用意しておいたほうが簡単ですよね。

Laravelのテンプレートの基本

1. それでは、Laravelのテンプレートの基本から調べてみます。Baseコントローラにlayoutプロパティを指定します。

laravel/application/controllers/base.php

<?php
class Base_Controller extends Controller {
 //レイアウトの指定
 public $layout='layouts.template';
//404エラーのコール
public function __call($method, $parameters){
 return Response::error('404');
 }
}

5行目から8行目までは、Laravelの初期設定で既に作成されています。今回、3~4行目を追加しました。

2. viewsフォルダに新しくlayoutsフォルダを作成し、その中にtemplate.phpを作成します。

laravel/application/views/layouts/template.php

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>テンプレート</title>
 </head>
 <body>
 <header style="background-color:#6FF">
 <?php echo @$header;?>
 </header>
 <section style="background-color:#6F3">
 <?php echo @$content;?>
 </section>
 <footer>
 view/layouts/template
 </footer>
 </body>
 </html>

3.  helloフォルダ内にheaderビューとcontentビューを作成します。

laravel/application/views/hello/header.php

<h1><?php echo $title;?></h1>
 <p><?php echo $description;?></p>

laravel/application/views/hello/index.php 

<p>名前:<?php echo $name;?></p>
<p>住所:<?php echo $address;?></p>
<p><?php echo $email;?></p>

4. Helloコントローラのindexアクションを下記のように修正します。

laravel/application/controllers/hello.php

<?php
 class Hello_Controller extends Base_Controller{
 public function action_index(){
 //contentに渡すデータの作成
 $data=array(
 'name'=>'nakada',
 'address'=>'東京都目黒区',
 'email'=>'nakada@winroad.info'
 );
 //headerに渡すデータの作成
 $header_data=array(
 'title'=>'WinRoad徒然草',
 'description'=>'日常の業務をつれづれなるままに書き綴っています。'
 );
 //レイアウトのヘッダーにデータを渡す
 $this->layout->nest('header','hello.header',$header_data);
 //レイアウトのコンテントにデータを渡す
 $this->layout->nest('content','hello.index',$data);
 }

15~18行目のネストメソッドはビューのネストと同様に第1引数が、レイアウト内で使用される変数名、第2引数が、ネストするファイルのパス、第3引数がそのネストされているビューに渡すデータです。尚、レイアウトを使う場合はアクションは何もリターンしないことに注意して下さい。

5.  それではブラウザで確認してみます。

http://localhost/laravel/public/hello

Laravelのセクション

6. LaravelのSectionクラスを使うことで、ネストしたビューからレイアウトに簡単にコンテンツを挿入することができます。それでは、ヘッダーの中にネストビューが必要としているcssとJavascriptを挿入してみましょう。

7. 上記のどちらのネストビューファイルからでも構わないのですが、今回は、content(index.php)から、挿入してみたいと思います。ビューファイルindex.phpを下記のように修正します。

laravel/application/views/hello/index.php

<?php Section::start('jqmobile');?>
<meta name="viewport" content="width=device-width,minimum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script>
<?php Section::stop();?>
<p>名前:<?php echo $name;?></p>
<p>住所:<?php echo $address;?></p>
<p><?php echo $email;?></p>

8. templateファイルを下記のように修正します。

laravel/application/views/layouts/template.php

<meta charset="utf-8">
<title>テンプレート</title>
<?php echo Section::yield('jqmobile');?>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-theme="b">
<?php echo $header;?>
</div>
<div data-role="content">
<?php echo @$content;?>
</div>
<div data-role="footer" style="text-align:center" data-theme="b">
view/layouts/template
</div>
</div>
</body>
</html>

9. ブラウザで確認してみます。jQueryMobileのレイアウトが適用されているのが分かりますね。

このようにLaravelのテンプレートはテンプレートからビューへのコンテンツだけで無く、ビューからテンプレートへもコンテンツを渡すことが簡単にできます。これはかなり便利です。この機能を使えば色々なことが出来そうですね。

Bladeテンプレートエンジン

10. 前置きが長くなりましたが、本題のBladeテンプレートエンジンに入りたいと思います。Bladeテンプレートエンジンは拡張子を『.blade.php』にするだけで、美しく控えめなシンタックスでphp構文を作成することが出来るようになります。

11. Bladeテンプレートエンジンでは、{{ $data }}のように、”{{“と”}}”で囲むことで、エコーすることが出来ます。また、”{{–“と”–}}”で文字を挟むことで、コメントとして認識されます。尚、Bladeのコメントは、HTMLコメントとは異なり、HTMLソースには出力されませんので便利です。

12.  それでは、上記7~8のビューファイル(index.phpとtemplate.php)を下記のようにBladeテンプレートを使って書き換えてみます。

laravel/application/view/hello/index.blade.php

{{-- Bladeのショートカットでセクションの生成 --}}
 @section('jqmobile')
 <meta name="viewport" content="width=device-width,minimum-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
 <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script>
 @endsection
 {{-- データの表示 --}}
 <p>名前:{{ $name }}</p>
 <p>住所:{{ $address }}</p>
 <p>メール:{{ $email }}</p>

laravel/application/views/layouts/template.blade.php

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>テンプレート</title>
 @yield('jqmobile')
 </head>
 <body>
 <div data-role="page" id="page1">
 <div data-role="header" data-theme="b">
 {{@$header}}
 </div>
 <div data-role="content">
 {{@$content}}
 </div>
 <div data-role="footer" style="text-align:center" data-theme="b">
 view/layouts/template
 </div>
 </div>
 </body>
 </html>

尚、同じフォルダ内に同じ名前の.phpファイルと.blade.phpがあった場合は、.phpファイルが優先されるみたいですので、.blade.phpを表示したい場合は、.phpファイルを削除するか名称を変更して下さい。

ビューの中にビューをレンダーする

13. ビューの中に他のビューを表示するには、Bladeショートカットの@include又は、@renderで表示することが出来ます。違いは現在のビューの全てのデータを継承するか否かです。データを継承する必要がある場合は、@includeを使用します。

 Bladeのショートカット

14. Bladeでは、@if~@endif等のようにアットマーク(@)で、phpの条件分岐や繰り返し構文のショートカットを作成することが出来ます。下記に代表的なphp構文とBladeのショートカットの比較一覧を記述しておきます。

  • ForLoop
    <!-- phpでforloop構文-->
     <?php for($i=0;$i<=count($comments);$i++):?>
     コメントの内容は<?php echo $comments[$i];?><br>
     <?php endfor;?>
     {{-- Bladeでforloop構文 --}}
     @for($i=0;$i<=count($comments);$i++)
     コメントの内容は {{ $comments[$i] }}
     @endfor
  • Foreach
    <!-- phpでforeach構文 -->
     <?php foreach ($comments as $comment):?>
     コメントの内容は <?php echo $comment->body;?>
     <?php endfoerach;?>
     {{-- Bladeでforeach構文 --}}
     @foreach($comments as $comment)
     コメントの内容は {{ $comment->body }}
     @endforeach
  • Unlessステートメント
    <!-- phpでUnless構文 -->
     <?php if(! Auth::check());?>
     ログインページへ
     <?php endif;?>
     ログイン中
     {{-- BladeでUnless構文 --}}
     @unless(Auth::check())
     ログインページへ
     @endunless
     ログイン中

Bladeレイアウト

15. Bladeのレイアウトは『マスター』ビューを簡単な操作で提供してくれます。それでは、実際にマスタービューを作成するのですが、その前にレイアウトに関しては、TwitterBootstrapを使用したいので、TwitterBootstrapを使うための環境を整備します。

16. TwitterBootsrapの公式サイトから、ダウンロードしたZipファイルを解凍して、publicフォルダの直下にbootstrap名でフォルダを作成し、そのの中に全てのフォルダ(css、js、img)を保存します。

17. 次にjqueryの公式サイトからjqueryの最新版をダウンロードして、public/jsフォルダに保存します。

18. それでは、TwitterBootsrapを使う環境が整ったら、マスタービューを下記のように作成します。尚、TwitterBootstrapの使い方は、『これだけ覚えれば誰でも使えるTwitterBootstrap2.0』をご覧下さい。

laravel/application/views/layouts/master.blade.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>マスタービュー</title>
<meta name="viewport" content="width=device-width,minimum-scale=1">
{{ Asset::styles() }}
<!--
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
-->
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">WinRoad徒然草</a>
<ul class="nav">
 @section('navigation')
 <li>{{ HTML::link('hello/index','トップページ') }}</li>
 <li>{{ HTML::link('hello/list','一覧') }}</li>
 @yield_section
</ul>
</div>
</div>
<div class="container">
<div class="row">
 @yield('content')
</div>
</div>
{{ Asset::scripts() }}
<!--
<script src="js/jquery-1.8.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
-->
</body>
</html>

コメントアウトしている8~11行目と31~34行目は相対位置で指定していますので、テンプレートファイルがビューファイルの直下ならリンクするのですが、一つ下のフォルダ階層内にテンプレートファイルがある場合はリンクしません。ですので、Assetクラスを利用してCSSとJavascriptを参照するように設定しました(7行目と30行目)。

尚、HTMLクラスで表示する方法は下記に記述しておきます。7行目と30行目を下記のように変更して下さい。只、Assetクラスのいいところは、コントローラ内の条件によって使用するスタイルシートやJavascriptを変更できる点です。その必要が無いときは、わざわざAssetクラスを使う必要も無いでしょう。

7行目
{{ HTML::style(‘bootstrap/css/bootstrap.min.css’) }}
{{ HTML::style(‘bootstrap/css/bootstrap-responsive.min.css’) }}
30行目
{{ HTML::script(‘js/jquery-1.8.2.min.js’) }}
{{ HTML::script(‘bootstrap/js/bootstrap.min.js’) }}

19. プロフィールビューページを作成します。

laravel/application/views/hello/profile.blade.php

@layout('layouts.master')
@section('content')
プロフィールページです
@endsection

@layoutはファイルの先頭で、呼び出す必要があり、先頭にホワイトスペースを付けたり、途中で改行してはいけません。

20. Helloコントローラにprofileアクションを作成します。

laravel/application/controllers/hello.php

public function action_profile(){
 //アセットでbootsrapのCSSを登録する
 Asset::add('bootstrap-css','bootstrap/css/bootstrap.min.css');
 //アセットでresponsiveのCSSを登録する
 Asset::add('resonsive','bootstrap/css/bootstrap-responsive.min.css','css');
 //アセットでjqueryを登録する
 Asset::add('jquery','js/jquery-1.8.2.min.js');
 //アセットでbootstrapのjsを登録する
 Asset::add('bootstrap-js','bootstrap/js/bootstrap.min.js','jquery');
 return View::make('hello/profile');
 }

21. ブラウザで確認してみます。 下記のように@layout文で、Laravelは”master”テンプレートを自動的に使用してくれます。

http://localhost/laravel/public/hello/profile

@parentでレイアウトの追加

22. Laravelの@parentショートカットを使用するとマスタービューのセクションのアイテムに新しいアイテムを追加することも出来ます。profileビューファイルを下記のように修正してみましょう。

laravle/application/views/hello/profile.blade.php

@layout('layouts.master')
@section('navigation')
 @parent
 <li><a href="#">追加リンク</a></li>
@endsection
@section('content')
プロフィールページです
@endsection

23. ブラウザで確認してみます。下記のようにリンクが追加されました。

http://localhost/laravel/public/hello/profile

LaravelのBladeテンプレートはかなり便利ですね。使いこなせば面白いと思います。

本日は、以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ