MD-Blog_Web System

ビューとは

前々回途中で簡単にまとめた「MVCパターンとは」の2番目。所謂オモテ、あるいはインターフェイスと呼んでいる部分を司るプログラムです。
MVCパターンにおいては、コントローラでこねくり回されたデータたちは、コントローラからビューへと渡され、HTML化されることでブラウザ上に目に見える形で現れます。

ビューの基本

ビューの呼び出し方

ここに会員のマイページを表示する"Mypage"コントローラがあるとして、その中でログインチェックやら会員情報の取得やらを通して得たデータをどのようにビューに繋げるかといいますと、

/app/controllers/MypageController.php

// mypageビューを表示する
return View::make('mypage');

// mypageビューに名前データを渡して表示する
return View::make('mypage', array('name' => 'Mio'));

前回も同じようなコードを書きましたが、こんな風にコントローラクラスの返り値としてViewクラスを叩くのが基本です。

ビューファイルの設置

置き場所は以下のviewsディレクトリの中です。

project
└app
　└views

Laravelのビューは、ファイル自体は普通のPHPファイルです。
普通のPHPなので、そのままHTMLを直書きすることもできるし、途中でPHPの処理を挟むこともできます。

また、例えばユーザ用ページをまとめてuserディレクトリ突っ込みたい、という気持ちが沸いたりしたときは、

project
└app
　└views
　  └user

のようにディレクトリを追加することもできます。その場合のコントローラからの呼び出しは、

// mypageビューを表示する
return View::make('user.mypage');

と、ドットで繋げばOKです。

Bladeテンプレート

さて、ビューは普通のphpファイルだと書きましたが、LaravelにはCMSのように効率的にHTML構造を作れるテンプレートエンジン"Blade"というものが組み込まれています。
Bladeによるコーディングは、MovableTypeなどのCMSのデザインテンプレートを組み立てる考え方にちょっと似ていますが、違う考え方が必要な部分もあります。

Bladeを使う

Bladeを使ってビューを作りたい場合、そのビューファイルは必ず"＊＊＊.blade.php"というファイル名にします。
そしてまず、ベースとなるマスターレイアウトを作成します。

/app/views/layouts/master.blade.php

<html>
<head>
    <!-- 各ページのtitle変数を出力 -->
    <title>@yield('title') | MONSTER DIVE</title> 
    <!-- ↓のようにLaravelのクラスを呼び出すことももちろん可能 -->
    <link rel="stylesheet" href="{{ URL::to('css/style.css') }}" media="all">
</head>
<body>
    <!-- 'header'セクションを定義する -->
    @section('header')
        <header id="header">
            <h1 id="headerLogo">MONSTER DIVE</h1>
        </header>
    @show

    <div id="container">
        @yield('content')
    </div>
</body>
</html>

例えばこんな感じでマスターレイアウトを作成しました。
各ページのレイアウトは、このマスターレイアウトを"継承"して量産していくのです。

今度は子レイアウトの方を作ってみます。

/app/views/index.blade.php

@extends('layouts.master')

<!-- title変数に'トップページ'を代入する -->
@section('title', 'トップページ')

<!-- @sectionと@stopで囲まれた範囲をマスターの'header'セクションに代入 -->
@section('header')
    <!-- @parentと書くとマスターテンプレートの'header'がそのまま使われる -->
    @parent

    <!-- さらに追記もOK -->
    <p>追記</p>
@stop

<!-- @sectionと@stopで囲まれた範囲をマスターの'content'セクションに代入 -->
@section('content')
    <p>ここはトップページの本文です</p>
@stop

"継承"という単語が表すとおり、Bladeを使ったビューの構築はオブジェクト指向のクラスの継承のイメージで作ることができます。
マスターレイアウトが基底クラスとなるわけですね。

上の内容を出力すると、以下のようになるはずです。

<html>
<head>
    <title>トップページ | MONSTER DIVE</title> 
    <link rel="stylesheet" href="/css/style.css" media="all">
</head>
<body>
    <header id="header">
        <h1 id="headerLogo">MONSTER DIVE</h1>
        <p>追記</p>
    </header>

    <div id="container">
        <p>ここはトップページの本文です</p>
    </div>
</body>
</html>

この通り、各ページのビューに書くコードは非常にシンプルなまま、必要に応じてオーバーライドして柔軟に対応できるのががBladeの良いところです。

コントローラから受け取ったデータの表示

上の方に書いたコントローラのコードに、

// mypageビューに名前データを渡して表示する
return View::make('mypage', array('name' => 'Mio'));

という部分がありましたが、折角受け取ったこのnameデータをビューに表示してみます。
3通りの書き方をしてみました。

/app/views/index.blade.php

＜?php echo $name; ?＞
{{ $name }}
{{{ $name }}}

一番上の 2～3番目がBlade構文を使ったもので、2重波括弧と3重波括弧では若干処理が異なります。
と言っても何ら難しいことはなく、3重にすると出力の際に自動エスケープしてくれるというだけです。
つまりフォームデータなどは必ず3重にしないとダメ。

まだまだあるよBlade構文

他にも、@if～@else～@endifで囲んで条件式を作ったり、@for～@endforでループしたりと、Bladeは基本的な処理はを唱えずともこなせるようになってます。
Laravelという可愛いFWの名前に対してちょっと物騒なエンジン名ですが、インターフェイス構築が早くなること請け合いなので、使いこなしてみたい方はまずは公式ドキュメントへ。

まとめ

導入、ルーティング、コントローラ、ビューと順番に来て、次はいよいよ最後？のモデル編ですね。

フレームワークの基本的な部分から説明に入ってしまったのでサーバサイドがバリバリな方には物足りない内容かもしれませんが、PHPのフレームワークを触ってみたいという方や、CMSから一歩先の開発をしてみたいという方や、PHPでフレームワークとか書く気起きないし自分RoR派だし、という方も、この記事でLaravelの魅力に触れて頂ければ此れ幸いです。

mioのLaravel初心者講座目次

Recent Entries

MD EVENT REPORT

What's Hot?

株式会社MONSTER DIVE

タグリスト

カテゴリアーカイブ

最新鋭のPHPフレームワーク「Laravel4」でWeb開発 | (4)ビューとBladeテンプレート編

mioのLaravel初心者講座 目次

ビューとは

ビューの基本

ビューの呼び出し方

ビューファイルの設置

Bladeテンプレート

Bladeを使う

コントローラから受け取ったデータの表示

まだまだあるよBlade構文

まとめ

mioのLaravel初心者講座 目次

mioのLaravel初心者講座目次

mioのLaravel初心者講座目次