テンプレートエンジンTwigと連携させてみる
前節では、SlimでJSONデータの送信する方法を扱いました。では、HTMLデータを送信する場合はどうするのでしょうか。次にそこを扱っていきます。
テンプレートエンジンの利用
前回までのサンプルでは、ルーティングコールバック関数内でprint()することでHTML画面を表示させていました。原理的にはこの方法でHTMLデータは送信できますが、少しでもまともにデザインされた画面を表示させようとすると、コードが複雑になり無理があります。そこで、通常はテンプレートエンジンを利用します。テンプレートエンジンが何かについては、こちらの解説記事の「テンプレートエンジンとは」を参照してください。
先述の通り、Slimはビュー層を内包していませんので、テンプレートエンジンも含まれていません。しかし、テンプレートエンジンTwigと連携できるライブラリTwig-Viewが提供されています。それを導入することで問題なくテンプレートエンジンが使えます。
なお、先の「テンプレートエンジンとは」にも記載がありますが、TwigはSlimとは独立したSymfonyプロジェクトの1つとして作られたものなので、単独で使用することも可能です。
Twig-Viewパッケージの配置
では、SlimとTwigを連携させてみましょう。そのためには、まず、Twig-Viewパッケージを配置しておく必要があります。これは、Composerに任せます。srcフォルダで以下のコマンドを実行してください。
composer require slim/twig-view
すると、composer.jsonファイルとcomposer.lockファイルが更新され、必要なパッケージがダウンロードされます。特に問題なく処理が終了すれば、Twig-Viewパッケージの配置は完了しています。
Twig利用の基本手順
Twig-Viewパッケージの配置が完了したら、実際にTwigを利用したコーディングを行っていきます。それは以下の手順です。
- テンプレートファイルを作成する。
- Twigクラスをnewする。
- render()メソッドを実行する。
順に説明します。
まず、手順1です。テンプレートエンジンを利用する場合は、HTML記述ファイル（テンプレートファイル）を別で作成し、特定のフォルダにまとめて入れておきます。ここでは、srcフォルダ内にtemplatesフォルダを作成し、このフォルダを、テンプレートを入れておくフォルダとします。その中にリスト3のhello.htmlファイルを作成してください。なお、Twigでは、テンプレートファイルはテキストファイルであればよく、拡張子は特に指定がありません。そのため、ここでは.htmlとしています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twigによるこんにちは</title> </head> <body> <h1>こんにちは! Twig!</h1> </body> </html>
次に手順2と3を同時に行います。これは、ルーティングコールバック関数内の記述です。routes4.phpにリスト4の太字の部分を追記してください。
<?php
〜省略〜
use \Slim\Views\Twig; // (1)
$app->any("/no4/getDataByJSON/{id}",
〜省略〜
);
$app->any("/no4/helloTwig",
function(Request $request, Response $response, array $args): Response
{
$view = new Twig("../templates"); // (2)
return $view->render($response, "hello.html"); // (3)
}
);
リスト4の（2）が手順2に該当します。Slimで利用する場合のTwigクラスの完全修飾名は\Slim\Views\Twigです。これをまずuseして読み込んでおきます。これが（1）です。その上で、このTwigクラスをnewします。その際、引数としてテンプレートファイルフォルダを指定します。なお、Twigクラスのコンストラクタは第2引数として環境設定を記述した連想配列を渡すこともできます。（2）では省略した形を採用しているので、全てデフォルトの挙動となりますが、デバッグモードの設定やキャッシュの有無など、細かい挙動を設定したい場合は、以下のように第2引数を利用します。
$view = new Twig("../templates", ["debug" => true]);
Twigの環境設定としてどのような項目があるのかはこちらのTwigの公式ドキュメントを参照してください。
同様に、リスト4の（3）が手順3に該当します。（2）でnewしたTwigインスタンスのrender()メソッドを実行することで、テンプレートファイルを基にしたResponseオブジェクトが生成されます。その際、第1引数としてResponseオブジェクトを渡します。これは、ルーティングコールバック関数の第2引数をそのまま渡せばいいです。第2引数は描画するテンプレートファイルパスです。これは、（2）で設定したテンプレートファイルフォルダからの相対パスを記述します。リスト3で作成したhello.htmlはテンプレートファイルフォルダ直下に作成しているので、ここではファイル名だけ記載しています。
このようにして実行されたrender()メソッドは、テンプレートファイルを基に生成されたHTMLデータが内包されたResponseオブジェクトを返します。リスト4の（3）のように、そのResponseオブジェクトをルーティングコールバック関数の戻り値としてリターンすることで、生成されたHTMLがHTTPレスポンスとして送信されます。
ファイルの作成、追記が終了したら、実際に動作させてみましょう。以下のURLにアクセスしてください。
- http://localhost/firstslim/src/public/no4/helloTwig
図2の画面が表示されれば成功です。
［Note］コンテナの利用
リスト4ではTwigクラスをnewする処理をルーティングコールバック関数内に記述しています。リスト4のように単にテンプレートファイルフォルダパスを引数として渡すだけならば1行で済むので、ルーティングコールバック関数内にその都度コードを記述してもそれほど問題にはなりません。ところが、環境設定やその他の拡張設定なども含めてTwigクラスのnewの処理を行うとなると、1行ではすみません。となると、ルーティングコールバック関数内に毎回同じコード（ボイラープレートコード）を書かなければならなくなります。
そこで、通常、このTwigクラスのnewの処理はルーティングコールバック関数内には記述せず、Slimのコンテナという機能を利用し、そこからnewされたTwigインスタンスを取得します。
次回、このコンテナの解説を行い、Twigのnewの処理をコンテナに移管するコードを紹介します。
Twigのテンプレート変数
前節で、無事Twigを利用してHTML画面が表示できるようになりました。ただ、リスト3では静的なHTMLの表示のみで、PHP側から渡されたデータを表示する部分が抜けています。次にそこを見ていきましょう。
テンプレート変数の基本は波括弧2個
PHP側から渡されたデータを表示するには、Twigのテンプレート変数を使います。記述方法は「{{…}}」と波括弧を2個重ねます。
サンプルを作ってみましょう。まず、テンプレートファイルからです。ここでは、テンプレートファイルフォルダ内にno4というサブフォルダを作って、その中にリスト5のhelloWithVals.htmlファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テンプレート変数</title>
</head>
<body>
<h1>こんにちは! {{name}}さん!</h1>
</body>
</html>
h1タグの行に{{name}}という記述が見えます。これがテンプレート変数です。ここでは変数名としてnameを指定しています。
次に、このテンプレート変数に表示するデータの渡し方を見ていきましょう。routes4.phpにリスト6の太字の部分を追記してください。
<?php
〜省略〜
);
$app->any("/no4/helloWithVals",
function(Request $request, Response $response, array $args): Response
{
$assign["name"] = "夏目"; // （1）
$view = new Twig("../templates");
return $view->render($response, "no4/helloWithVals.html", $assign); // （2）
}
);
リスト6の（2）に注目してください。Twigインスタンスのrender()メソッドを実行する際、第3引数が増えています。この第3引数は、テンプレートに渡すデータが格納された連想配列を指定します。ここでは、$assignという連想配列名とし、（1）でデータを格納しています。（1）で指定しているキーに注目してください。これは、リスト5のh1タグ内のテンプレート変数名と同名です。Twigはrender()メソッドの第3引数で渡された連想配列のキーと同名のテンプレート変数がテンプレートファイル内にあれば、そこにデータをはめ込みます。
ファイルの作成、追記が終了したら、実際に動作させてみましょう。以下のURLにアクセスしてください。
- http://localhost/firstslim/src/public/no4/helloWithVals
図3の画面が表示されれば成功です。
フィルタ
テンプレート変数は、その表示の時に加工が可能です。その機能がフィルタです。よく使われるのは、改行コード\nをbrタグに変更するものでしょう。例えば、以下の表示データがあるとします。
$assign["msg"] = "こんにちは。\nさようなら。";
これを、以下のようにそのまま表示すると、改行されません。
<p>{{msg}}</p>
そこで、改行コードをbrタグに変換するためのフィルタを付与します。それは以下のように記述します。
<p>{{msg|nl2br}}</p>
テンプレート変数名に続けて、|を記述し、フィルタ名を記述します。nl2brフィルタはPHPのnl2br()関数そのものであり、上記のように記述することで、この関数が適用されたのと同じ効果が得られます。こういったフィルタとしてどのようなものがあるのかは、こちらのTwigの公式ドキュメントを参照してください。
コメント
テンプレートファイル内にコメントを記述したい場合は、以下の書式を使います。
{# コメント #}
