m_shige1979のささやかな抵抗と欲望の日々

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

なんとなく作ったサイト

http://www.it-check-matome.info/


Github(注意すること)

https://github.com/mshige1979

phpテンプレートtwigの確認

smartyばっかり

使っていたの、cakephpだとphpで他のフレームワークをあまり触らなかったせいもあるので勉強

インストール

composerでインストール
mkdir twig_sample
cd twig_sample/
curl -s http://getcomposer.org/installer | php
cat << _EOT_ > composer.json
{
  "require": {
    "twig/twig": "1.*"
  }
}
_EOT_
php composer.phar install

シンプルな使い方

templates/sample.twig
<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
    {{ hoge }}
</body>
</html>

※テンプレートを用意

test1.php
<?php
/**
 */
require_once __DIR__ . "/vendor/autoload.php";

//  初期化
Twig_Autoloader::register();

// 設定
$loader = new Twig_Loader_Filesystem(__DIR__ . '/templates');
$twig = new Twig_Environment($loader);

// テンプレートを使用
$template = $twig->loadTemplate("sample.twig");

// レンダリング
echo $template->render([
    "hoge" => "Hello World."
]);

<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
    Hello World.
</body>
</html>

こうなる

指定方法ざっくり

通常のスカラー変数
<?php
require_once __DIR__ . "/vendor/autoload.php";
Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem(__DIR__ . '/templates');
$twig = new Twig_Environment($loader);
$template = $twig->loadTemplate("sample.twig");

// 値を設定
$aaa = "111";
echo $template->render([
    "hoge" => $aaa
]);

の場合はrenderで指定したキー名をそのまま指定するだけ

<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
    {{ hoge }}
</body>
</html>
配列の場合
<?php
require_once __DIR__ . "/vendor/autoload.php";
Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem(__DIR__ . '/templates');
$twig = new Twig_Environment($loader);
$template = $twig->loadTemplate("sample.twig");

// 値を設定
$aaa = ["111" => "aaa"];
echo $template->render([
    "hoge" => $aaa
]);

配列の場合はsmartyの場合と同様"."を連結する方法と、キーを指定する方法の2つが利用できる

<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
    {{ hoge['111'] }}
    {{ hoge.111 }}
</body>
</html>
オブジェクト
<?php
require_once __DIR__ . "/vendor/autoload.php";
Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem(__DIR__ . '/templates');
$twig = new Twig_Environment($loader);
$template = $twig->loadTemplate("sample.twig");

// 値を設定
$aaa = new stdClass();
$aaa->hoge = 100;
$aaa->foo = 200;

echo $template->render([
    "hoge" => $aaa
]);

オブジェクトの場合も"."でアクセスできる

<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
{{ hoge.hoge }}
{{ hoge.foo }}
</body>
</html>
if、foreach
<?php
require_once __DIR__ . "/vendor/autoload.php";
Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem(__DIR__ . '/templates');
$twig = new Twig_Environment($loader);
$template = $twig->loadTemplate("sample.twig");

// 値を設定
$aaa = [
  0 => 100,
  1 => 200,
  2 => 300,
];

echo $template->render([
    "hoge" => $aaa
]);

if文やforeachなどは%を指定して制御

<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
{% if hoge|length > 0 %}
    <ul>
        {% for item in hoge %}
        <li>{{ item }}</li>
        {% endfor %}
    </ul>
{% endif %}
</body>
</html>
内部で変数を動的に作成

set文を使用することで可能

<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
    {% set aaa = 100 %}
    <div>
        {{ aaa }}
    </div>

    {% set list = [
        100,
        200,
        300
    ]
    %}
    <ul>
        {% for item in list %}
        <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>
文字列の連結

php側でレンダリングした変数とhtmlの値を連結することも可能

<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
    {% set aaa = "aaa"~hoge %}
</body>
</html>
別のテンプレートをインクルード

sample.twig

<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
    {% include "sample2.twig" %}
</body>
</html>

sample2.twig

<h1>Hello World</h1>
{{ hoge }}

<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
    <h1>Hello World</h1>
hoge</body>
</html>

おまけ

エスケープ確認
<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
    {% set foo = "<h1>hello world.</h1>" %}
    {{ foo }}
</body>
</html>

<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
        &lt;h1&gt;hello world.&lt;/h1&gt;
</body>
</html>
htmlエスケープを無効にしたい場合
<!DOCType html>
<html>
<head>
    <meta charset="utf8" />
</head>
<body>
    {% set foo = "<h1>hello world.</h1>" %}
    {{ foo|raw }}
</body>
</html>

※フィルタにrawを使用する

今回はここまで…

まとめ

フレームワークを使用する場合は大抵、独自のテンプレートか有名ドコロのテンプレートを使用する風にしたほうが開発は捗るのでいくつか勉強しておいたほうがよい。なくてもそんなには困らないけどエスケープとかいろいろhtmlに組み込むのが嫌な感じとかあることが多いと思われる。
さずがにsmartyだけではこれから困るだろうから勉強しておかなくては…