こんばんは、Webプログラマの篠田です。
猛暑日＆熱帯夜が続きますね。夏バテにならないようにウナギなどを食べながら涼しい季節がくるのを一日千秋の思いで耐えていますｗ
今回も前回に引き続きテンプレートエンジン「twig」のお話メインに、「テンプレート」としての作り方の基本設定をご紹介したいと思います。
テンプレートファイル「.twig」を用意してみよう
前々回から使っているPHP側でのtwig呼び出しの方法に手を加えていきます。
【Before】
|
1 2 3 4 5 6 7 |
<?php require_once './vendor/autoload.php'; $loader = new Twig_Loader_String(); $twig = new Twig_Environment($loader); echo $twig->render(‘<h1>Hello {{ message }}!</h1>', array('message' => 'twig World')); |
上記のコードを下記のように修正します
【After】
|
1 2 3 4 5 6 7 |
<?php require_once './vendor/autoload.php'; $loader = new Twig_Loader_Filesystem('./views/'); $twig = new Twig_Environment($loader); echo $twig->render(‘index.twig', array('message' => 'twig World')); |
変更点は下記の２点です。
・「Twig_Loader_String」が「Twig_Loader_Filesystem」になり、引数「./views/」を持つ
・「 $twig->render」の第１引数が「index.twig」になった
「Twig_Loader_String」は直接文字列を渡して、出力するというものでした。
「Twig_Loader_Filesystem」にすることで、ファイルに書かれた内容を出力するという意味合いに変わります
そして、「Twig_Loader_Filesystem」の引数として参照するファイルがどこにあるかを指定することができます。
今回であれば「./views/」となっているので、実行するPHPファイルと同階層にある「views」ディレクトリを参照するという設定になります。
※環境に応じて「views」の内容を変えることで参照先を変更することができます。
※今回は「vendor」ディレクトリと同階層に「views」ディレクトを作っています。
続いて、「views」ディレクトリに保存する「index.twig」ファイルを用意します。
下記の内容を記述しています。
もちろん文字コードは「UTF-8」で保存してください。
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <header> <meta charset="UTF-8"> </header> <body> <h1>Hello {{ message }}!</h1> </body> </html> |
この状態でPHPファイルを実行してみましょう。
すると、変更前と同じ結果になったのではないでしょうか？
テンプレートファイル「.twig」とは
見てもらうと分かるように「index.twig」フィアルの中身は基本「HTML」で書かれた内容と同様です。
違いを見るとHTMLでない「{{ message }}」というのが書かれているぐらいです。
拡張子は「.html」から「.twig」に変わりましたが基本はHTMLと同じで、内容が動的に変わる部分のみが「{{ }}」に置き換わったという理解で使うことができます。
これさえ理解しておけば、HTMLファイルの中にPHPのコードが混ざるようなこともなくページを作ることができます。
※このままでは、まだまだ簡単なことしかできませんが。。。
「twig」の「include」を使って共通化をしよう。
さて、ここまでの内容だけでサイトを作り出してしまうとテンプレートエンジンを導入したメリットが薄れてしまいます。
テンプレートエンジンの良さは「汎用性」をコードに保たせることができることです。
例えばHTMLの中で同じ記述が何度も出てくる場面が有ります。
その代表としては「<html>〜<body>」と「</body>〜</html>」の内容は大体１つのサイトで同じ記述になると思います。
※metaが違うというお話はまた次回にしますのでお楽しみに！
この部分を「共通化」することで１ページの「生産効率」をあげることもできます！
共通化の第１歩は共通化できる部分を切り出して別のファイルに記述することです。
ということで下記のようなファイルを作ってみましょう。
（１）「<html>〜<body>」を保存した「_header.twig」を作る
|
1 2 3 4 5 6 |
<!DOCTYPE html> <html> <header> <meta charset="UTF-8"> </header> <body> |
（２）「</body>〜</html>」を保存した「_footer.twig」を作る
|
1 2 |
</body> </html> |
このように「index.twig」に記述されていた他のファイルでも利用できる部分を書き出してみました。
これにより、「index.twig」は下記のようになります。
（３）残りの「index.twig」
|
1 |
<h1>Hello {{ message }}!</h1> |
この状態ではうまく動いてくれませんね。
※ブラウザがよしなにしてくれるので動かなくもないですが厳密には動いていない状態です。
今、１つのファイルだった「index.twig」が３つのファイルにわかれました。
この状態では意味がありませんので「index.twig」から「_header.twig」と「_footer.twig」を読み込んで、１つの塊としてブラウザに読み込むようにしましょう。
その時に活躍するのが、twigの「include」です。
PHPではお馴染みの別ファイルを読み込むときに使う関数です。
使い方のイメージはPHPの時とおなじ感覚で利用することができます。
早速、「index.twig」に組み込んでいきたいと思います。
|
1 2 3 |
{% include '_header.twig' %} <h1>Hello {{ message }}!</h1> {% include '_footer.twig' %} |
「include」は「Twig_Loader_Filesystem」で設定したディレクトリをスタートしてファイルを指定ます。
今回は「views」ディレクトリ直下に「_header.twig」と「_footer.twig」が保存されている想定なので上記のような記述になります。
これで、「<html>〜<body>」と「</body>〜</html>」の内容がソースに書かれていればinclude成功です。
まとめ
やっと、テンプレートエンジンの良さをご紹介できる所まで来ましたが、まだまだ実務に耐えられる状態ではないですね。
「metaが変わる場合はどうしたらいいの？」といったincludeでは十分な対応がしづらい点を次回ご紹介して、テンプレートエンジンの便利さを知ってもらえればと思います。
