*

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

公開日: : 投稿者:raru php, web技術

今回は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のような処理や{{{}}}というエスケープありの変数展開と{{}}というエスケープなしの変数展開などの記法も存在します。

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

関連記事

no image

Mac OS X (Yosemite) にLaravelをインストール

Max OS 10.10(yosemite)にPHPフレームワークのLaravelをインストールして

記事を読む

no image

socket.ioとwebRTCでビデオチャット

現在作成したいものがあるために、その予行演習として nodeのsocket.ioとwebRTC機能

記事を読む

no image

Laravelでルーティングからview表示をしてみる

Laravelでのroutes.phpの設定と、bladeを利用してview表示を行います。 いろ

記事を読む

no image

Laravelでクラスをnewする

今回はLaravelでのクラスのnewの仕方です。 正確には、Laravelでの他ファイルで作成し

記事を読む

no image

Facebook APIを試してみました

Facebook APIが気になったのでちょっと試してみました。 まず私が勘違いしていたこと

記事を読む

no image

WebRTC + Node によるルーム機能付きビデオチャット 2

前回の続き こちらは前回の記事の続きになります。 また前回の記事にコメントを頂いたのですが、

記事を読む

no image

PHPのcURLを利用してAPIをGET/POSTで叩く

PHPからcURLを利用してhttpのget, postで問い合わせを行ってみます。 今回はYAH

記事を読む

no image

システムの仕様書を作れそうなウェブアプリ

現在サービス開発を本気で取り組もうと思っているraruです。 本気が指すところは、事業として成立す

記事を読む

no image

WebRTC + Node によるルーム機能付きビデオチャット 1

現在googleで調べても日本語では微妙にかゆいところに手が届かないWebRTCと Socket.

記事を読む

no image

IEとchromeでbeforeunloadをaタグのhrefに反応させずに利用……できなかった

今回beforeunloadが面倒な動きをしていたので調査&ある程度都合よくしてみました。 してみ

記事を読む

Message

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

PAGE TOP ↑