Laravel-Bladeを試してみた

投稿日:

知らない家の目覚まし時計で目が覚めました。

LaravelはBladeっていうテンプレートエンジンをデフォルトで使います。
ほいで、Bladeって凄いんです。継承とか出来ちゃうんです。
@extends('XXX')とか@parentとかです。
もちろん他にも色々あるんだけど、一番継承がびっくりしました。
※こう書くと最近のテンプレートエンジンを知らないってバレそう

詳しくは、Laravel4 テンプレート が参考になると思います。
{{{ でもエスケープしたい時、{}を3つも書かなきゃいけないのは面倒だね!! }}}

自分が思うにhtmlをゴニョる時って、ヘッダーとコンテンツとフッターがあって、コンテンツを常にいじって、ヘッダーはmetaタグの中で動的に変わる部分があって面倒くさくて、フッターは別にみたいなイメージです。
あとはサイドバーとかナビバーとかかな。

その中でも、集中して修正したいのはコンテンツ部分だと思います。
んで、上手い事部品としてそれぞれ分割されているとやりやすいかと。

その辺り上記 Laravel4 テンプレート を参考に、ちょっと試行錯誤してみたので備忘録がてらに残してみます。
試したlaravelのバージョンは4.2です（4以降だったらOKだと思います）。

viewのソース

まず、ざっとソースを書いちゃいます。
最初に一応言っておくと、Bladeを使うにはviewファイルの拡張子(普通に.phpだよ)前に.bladeを入れる必要がありますです。
※こんな感じhoge.php => hoge.blade.php
あと、テンプレートは/app/views/〜に置きます。
サンプルはこんな階層です。

/app/views/sample.blade.php # メインのテンプレート
           common/ # 共通部品置き場
                  layout.blade.php # レイアウト用
                  header.blade.php # ヘッダー
                  footer.blade.php # フッター

レイアウト用 /app/views/common/layout.blade.php

@yield('header')
@yield('content')
@yield('footer')
  • これが、全体の枠というかベースになる
  • header,content,footerをyieldで宣言しておく
  • yieldは引数で渡した名前の部品が書き込まれますんで読み込んで表示してくださいよ〜って頼む感じ（だと思われる）

ヘッダー用 /app/views/common/header.blade.php

@section('header')
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>{{{isset($title) ? $title : 'Hello'}}}</title>
    <link href="{{{asset('/assets/css/style.css')}}}" rel="stylesheet">
    @yield('addCss')
</head>
@stop
  • @section('header')〜@stopでここからここまでがheaderですよ〜って宣言する感じ
  • で、ここでベースとなるcssを読み込んでおいて、この下にyield('addCss')って宣言しておく
  • こうしておく事で、ページごとに読み込むcssを宣言できる
  • $titleのところはPHP書ければ分かると思います
  • asset()はヘルパーメソッドで、publicディレクトリーのURLを返してくれる

フッター用 /app/views/common/footer.blade.php

@section('footer')
<div>
    <p>フッター</p>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
@yield('addJs')
</body>
</html>
@stop
  • @section('footer')〜@stopでここからここまでがfooterですよ〜って宣言する感じ
  • で、ここでベースとなるjsを読み込んでおいて(例ではjQuery)、この下にyield('addJs')って宣言しておく
  • こうしておく事で、ページごとに読み込むjsを宣言できる

メインのテンプレート(コンテンツ用) /app/views/sample.blade.php

@extends('common.layout')
@section('addCss')
<link href="{{{asset('/assets/css/sample.css')}}}" rel="stylesheet">
@stop
@include('common.header')
@section('content')
<body>
    <h1>Hello</h1>
    <div>コンテンツ</div>
@stop
@section('addJs')
<script type="text/javascript" src="{{{asset('/assets/js/sample.js')}}}"></script>
@stop
@include('common.footer')
  • @extends('common.layout') レイアウト用テンプレート(layout.blade.php)を使いまっせ〜という宣言
  • 読み込む時は、.blade.phpは書かなくていいんです
  • 階層を表すには . を使います
    • common.layoutは/app/views/common/layout.blade.phpを読み込んでいる事になります
  • @section('content')〜@stopでここから(ry
  • @include('header')でヘッダーを読み込んでるけど、その前に@section('addCss')XXX@stopを書いておくことでheader.blade.phpで宣言しておいたaddCssにXXXをレンダリングしてくれる
  • @include('footer')でフッターを(ry、その前に@section('addJs')XXX@stopを書いておくことで(ry
  • ちなみに自分はよっぽどの事が無い限り、出力文字列はエスケープしろと教育を受けてきたのでこれでもかってくらいに{{{ }}}使っています
    • エスケープはe()っていうヘルパーもあるので、{{e('hoge')}}でもOKだけど、めんどいなぁ

使ってみる

/app/routes.php

Route::get('/', function()
{
    return View::make('sample') // 読み込む時.blade.phpは書かなくていいんです
            ->with('title', 'これはサンプル') // withでテンプレートに変数をセットします
            ;
});

うん、しょぼいけど出ましたね。

出力されたhtmlのソースコードを一応見てみる

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>これはサンプル</title>
    <link href="http://local.sample.laravel.shimabox.net/assets/css/style.css" rel="stylesheet">
    <link href="http://local.sample.laravel.shimabox.net/assets/css/sample.css" rel="stylesheet">
</head>

<body>
    <h1>Hello</h1>
    <div>コンテンツ</div>

<div>
    <p>フッター</p>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://local.sample.laravel.shimabox.net/assets/js/sample.js"></script>
</body>
</html>

うん。意図したとおりに出てるのが確認出来ると思います。

なんでこんなにパーツを分けたか

ちょ、パーツ分けすぎwwwとか思うかもしれませんが、例えば(ありえないかもしれないけど)、このページだけはHTML5で他のページはXHTMLで！
とかそんなパターンがあった場合、DOCTYPEをXHTMLで書いたヘッダーパーツを用意しておいて

/app/views/common/xhtml_header.blade.php # こんなの用意しておく

viewで読み込む際に@include('common.xhtml_header')って書けば対応可能です。
まぁ、何事もいい感じに部品として定義しておくのは大事な事どすえ。
他にもサイドバー部分とかナビ部分とか作っておくと捗ると思います。

まとめ

  • laravelのbladeは便利
  • bladeとかいって名前もかっこいい
  • viewだけでレイアウトを結構定義できる
  • でもエスケープはめんどい

以上、ざっと備忘録がてらに書いてみました。
何か参考になれば幸いです。
あれ？@parentの事、書かなかったなぁ。。大丈夫ググれば大丈夫。

スポンサーリンク
投稿日:
カテゴリー: PHP タグ:

作成者: shimabox

Web系のプログラマをやっています。 なるべく楽しく生きていきたい。

1件のコメント

  1. ピンバック: [heroku]deploy | log

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。