皆様初めまして、CCSの新人プログラマの杜と申します。
入社してから新しいプログラム言語を勉強することになりました。
そして、一人で一つのプログラム言語で全ての仕事を済むことが難しくなりました。
複数の人と制作に関わる時、言語間でお互いフォローすることも多くなりました。
その中でロジックとデザインを分離して、それぞれ処理能力が高い部分を使うプログラムもあります。
自分は最初に触ったのはPHP言語向けのテンプレートエンジンのSmartyになります。
そんなSmartyについて紹介したいと思います。
■テンプレートファイル
テンプレートファイルはHTMLにロジックを記述するものなので、
デザイン部分だけでなく、ロジック部分の実現も可能になります。
例：
<html>
<head>
<title>Smarty</title>
</head>
<body>
<h3>HTMLで記述</h3>
</body>
</html>
■Smarty
HTMLでは変数や関数の扱いができませんが、
Smartyに限らず、テンプレートエンジンが計算結果やデータを入れるものなので、
動的にWebページの生成が実現可能となります。
■Smartyで変数の渡しと受け取る
PHPで宣言された変数はdisplay('パス')でパスを指定し、
assign('変数名'又は'配列名', '変数'又は'配列')により指定先のテンプレートファイルに送ることができます。
受け取ったテンプレートファイルには、{$変数名}又は{配列名.要素}という形で直接に使えることが可能となります。
例：
「sample.php」
<?php
$smarty = new Smarty();
// 渡したいデータ
$data = 'サンプル';
// テンプレートファイルに渡します
$smarty->assign('data', $data);
// ページを表示する
$smarty->display('sample.tpl');
?>
「sample.tpl」
<h2>{$data}</h2> // このままで使います
■テンプレートの拡張性
テンプレートファイル内ではJavascriptが直接に使えて複雑な処理や関数を作ることが可能となります。
その上で、CSSファイルの読み込みも可能、画面のデザインが豊富になります。
Smartyで渡された変数はテンプレートファイルだけではなく、Javascriptにも使えます。
Javascriptで使う場合はそのまま使えませんが、PHPから渡す時には一時JSONコードに変換する必要があるので、
受け取ってからまたJSONコードから一般な変数に戻ることで使えるようになりました。
例：
「sample.php」
<?php
$smarty = new Smarty();
// データ（連想配列）
$data = array('a' => 1, 'b' => 2);
// JSONコードに変換
$data = json_encode($data);
// テンプレートファイルに渡します
$smarty->assign('data', $data);
// ページを表示
$smarty->display('sample.tpl');
?>
「sample.tpl」
{literal}
<script type="text/javascript">
var json = '{{$data}}'; // 受け取ったデータを格納
var data = JSON.parse(json); // encodeされたデータをdecodeで戻します
</script>
{/literal}
■構文上の注意点
テンプレートファイルのデフォルトのデリミタは{ }なので、
CSSやJavascriptを使う時には構文解析を回避するために、{literal}を使う必要があります。
{literal}に囲まれた部分はそのままで出力されます。
■総括
状況により適切な実装方法を選ぶことはエンジニアに限らず、
どのような仕事でも効率が上がりやすいやり方と思います。
作業状況を常に把握し、自分のためだけではなくて、
一緒に仕事する人に優しい作業環境を作りましょう。
入社してから新しいプログラム言語を勉強することになりました。
そして、一人で一つのプログラム言語で全ての仕事を済むことが難しくなりました。
複数の人と制作に関わる時、言語間でお互いフォローすることも多くなりました。
その中でロジックとデザインを分離して、それぞれ処理能力が高い部分を使うプログラムもあります。
自分は最初に触ったのはPHP言語向けのテンプレートエンジンのSmartyになります。
そんなSmartyについて紹介したいと思います。
■テンプレートファイル
テンプレートファイルはHTMLにロジックを記述するものなので、
デザイン部分だけでなく、ロジック部分の実現も可能になります。
例：
<html>
<head>
<title>Smarty</title>
</head>
<body>
<h3>HTMLで記述</h3>
</body>
</html>
■Smarty
HTMLでは変数や関数の扱いができませんが、
Smartyに限らず、テンプレートエンジンが計算結果やデータを入れるものなので、
動的にWebページの生成が実現可能となります。
■Smartyで変数の渡しと受け取る
PHPで宣言された変数はdisplay('パス')でパスを指定し、
assign('変数名'又は'配列名', '変数'又は'配列')により指定先のテンプレートファイルに送ることができます。
受け取ったテンプレートファイルには、{$変数名}又は{配列名.要素}という形で直接に使えることが可能となります。
例：
「sample.php」
<?php
$smarty = new Smarty();
// 渡したいデータ
$data = 'サンプル';
// テンプレートファイルに渡します
$smarty->assign('data', $data);
// ページを表示する
$smarty->display('sample.tpl');
?>
「sample.tpl」
<h2>{$data}</h2> // このままで使います
■テンプレートの拡張性
テンプレートファイル内ではJavascriptが直接に使えて複雑な処理や関数を作ることが可能となります。
その上で、CSSファイルの読み込みも可能、画面のデザインが豊富になります。
Smartyで渡された変数はテンプレートファイルだけではなく、Javascriptにも使えます。
Javascriptで使う場合はそのまま使えませんが、PHPから渡す時には一時JSONコードに変換する必要があるので、
受け取ってからまたJSONコードから一般な変数に戻ることで使えるようになりました。
例：
「sample.php」
<?php
$smarty = new Smarty();
// データ（連想配列）
$data = array('a' => 1, 'b' => 2);
// JSONコードに変換
$data = json_encode($data);
// テンプレートファイルに渡します
$smarty->assign('data', $data);
// ページを表示
$smarty->display('sample.tpl');
?>
「sample.tpl」
{literal}
<script type="text/javascript">
var json = '{{$data}}'; // 受け取ったデータを格納
var data = JSON.parse(json); // encodeされたデータをdecodeで戻します
</script>
{/literal}
■構文上の注意点
テンプレートファイルのデフォルトのデリミタは{ }なので、
CSSやJavascriptを使う時には構文解析を回避するために、{literal}を使う必要があります。
{literal}に囲まれた部分はそのままで出力されます。
■総括
状況により適切な実装方法を選ぶことはエンジニアに限らず、
どのような仕事でも効率が上がりやすいやり方と思います。
作業状況を常に把握し、自分のためだけではなくて、
一緒に仕事する人に優しい作業環境を作りましょう。
採用情報
クラウドクリエイティブスタジオではプログラマを募集しております。
面白いことが好きな方、ぜひ一緒にゲームを作りましょう！
コメント
コメントを投稿