シムノート

PHPフレームワークSymfonyの学習帳

ユーザ用ツール

サイト用ツール


サイドバー

メニュー



このエントリーをはてなブックマークに追加

blog:2015-12-10:超入門_symfony3_twig_テンプレート

超入門 Symfony3 : (5) Twig テンプレート

Symfonyでは動的な画面の表示にTwigテンプレートを使用します。MVCパターンのViewの部分に当たります。

テンプレートの作成

おみくじの運勢を表示するテンプレートを作成してみましょう。テンプレートはapp/Resources/viewsの下に格納します。さらに、OmikujiControllerから利用されるテンプレートを作るので、omikujiというディレクトリを作成し、その下にテンプレートを作成します。テンプレートのファイル名はコントローラー内のアクションメソッド名に合わせてomikujiとします。

{% extends 'base.html.twig' %}               {# ① #}

{% block title %}おみくじ{% endblock %}       {# ② #}

{% block body %}                             {# ③ #}
    {{ name }}さんの運勢は {{ unsei }} です。  {# ④ #}
{% endblock %}

① デフォルトで作成されているbase.html.twigを親テンプレートとして継承しています。全ページで共通するレイアウトを親テンプレートに記述します。
② 親テンプレートで定義してあるtitleブロックを上書きしています。
③ 親テンプレートで定義してあるbodyブロックを上書きしています。
{{変数}}の箇所で、コントローラーから渡された変数を表示しています。

Twigのタグ
{{ ... }} 変数や計算結果を画面に表示
{% ... %} 制御文
{# ... #} コメント

親テンプレートであるbase.html.twigを見てみましょう。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title> {# ① #}
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %} {# ② #}
        {% block javascripts %}{% endblock %}
    </body>
</html>

titleブロックを定義しています。ブロックは子テンプレートに定義があれば、そちらで上書きされます。
bodyブロックを定義しています。

コントローラーからテンプレートを使用する

OmikujiControllerを先ほど作成したテンプレートを使用するよう修正します。

...
class OmikujiController extends Controller
{
    ...
    public function omikujiAction(Request $request, $yourname)
    {
        $omikuji = ['大吉', '中吉', '小吉', '末吉', '凶'];
        $number = rand(0, count($omikuji) - 1);

//        return new Response(
//            "<html><body>{$yourname}さんの運勢は $omikuji[$number] です。</body></html>"
//        );
        return $this->render('omikuji/omikuji.html.twig', [ // ①
            'name' => $yourname,
            'unsei' => $omikuji[$number],
        ]);
    }
}

① 以前にnew Response("HTML...")としていた部分を$this->render()で置き換えます。第1引数にはテンプレートファイル名を指定します。テンプレートファイル名はapp/Resources/viewsからの相対パスで指定します。第2引数にはテンプレートへ渡す変数を連想配列で指定します。

それでは、http://localhost:8000/omikuji/Eddie_Jones へアクセスして動作確認をしてみましょう。「Eddie_Jonesさんの運勢は XX」と表示されます。

その他の書式

上記で説明した以外でも様々な書式があります。主要なものを紹介します。

{# テンプレート内での変数の設定 #}
{% set foo = 'foo' %}
{% set foo = [1, 2] %}
{% set foo = {'foo': 'bar'} %}

{# フィルタ #}
{{ 'welcome' | upper }} {# 'WELCOME'と表示される #}

{# 制御文 #}
{% if users | length > 0 %}                {# if文 #}
    <ul>
        {% for user in users %}            {# for文 #}
            <li>{{ user.username }}</li>
        {% endfor %}
    </ul>
{% endif %}

{# 他のテンプレートの差し込み #}
{% include 'navbar.html' %}

詳細はこちら


Comments



244 +8 = ?
blog/2015-12-10/超入門_symfony3_twig_テンプレート.txt · 最終更新: 2015/12/28 01:34 by tsubo