*

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

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

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

記事を読む

no image

PHPでXMLをnamespaceを利用したxpathでnode取得

PHPでxmlを読み込んでxpathでnodeを取得して見たいと思います。 今回はyahooの形態

記事を読む

no image

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

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

記事を読む

no image

要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。

wordpressの更新を行おうとした時の上記のエラーが発生した場合に、いくつか対策方法があります。

記事を読む

no image

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

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

記事を読む

no image

Node.jsのSocket.io入門

前置き WebRTCを使用して通信を行なうときに、offerなどの情報を伝える為にサーバサイドのプ

記事を読む

no image

Javascript パターン

最近更新を行なえるほど技術を追っていませんが、日々の電車での移動時間に本を読んでいます。 2駅乗っ

記事を読む

no image

Facebookから日本語でデータ取得 (※だたしlocationは除く

Facebook Graph APIを通して取得したデータがローマ字や英語で困ることがあります。

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑