Smarty 知らなかった…capture関数

11月です。だいぶ放置状態のこのブログ…季節同様冷えてまいりました。

さてさて、先日発見した超便利Smarty組み込み関数、”{capture}“。 3年ほど使っていて知らなかった悔しさと、発見した嬉しさでご紹介!

{capture}って何??

先ずはSmartyのドキュメントの説明から!

{capture} は、タグの間のテンプレートの出力を集め、 それをブラウザに表示する代わりに変数に受け渡します。 {capture name=‘foo’} と {/capture} の間のあらゆるコンテンツは、name 属性で指定した変数に格納されます。 キャプチャされたコンテンツは、特別な変数 $smarty.capture.foo (“foo” は name 属性で指定した変数) によって利用できます。 name 属性を指定しない場合は “default” が使われ、$smarty.capture.default のようになります。

何が便利なのか

Smartyを使う際、テンプレートを「ヘッダー」「ボディ」「フッター」などなど分ける事が多々あると思います。 そういった場合、テンプレートはボディ部分のみを編集していきますよね。

そんな時に『この画面でだけこのJSを使いたい!』と思った時、ヘッダー用テンプレートを変更する訳にはいかないのでボディ用テンプレートに、つまり<body>タグ内に直接<script>を書いていました。。

こんな感じ↓

{% codeblock html header.html %} すっしっくいっねー♪ {% endcodeblock %}

{% codeblock html body.html %} {include file=“header.html”}

おいしいお寿司が食べたい!

焼肉でも…いいんだぞっ!

{include file=“footer.html”} {% endcodeblock %}

動作としては問題ないのですが、非常に気持ち悪いです。 やはり<script><style><head>に書きたいのです!! “{capture}“を使えばそれが簡単にできる。

使い方

”{capture}“を使った場合はこんな感じのコードになります。

<html>
  <head>
  <title>すっしっくいっねー♪</title>
  <link type="text/css" rel="stylesheet" href="/css/sushi.css" />
  <script src="/css/sushi.css"></script>
    {$smarty.capture.header}
  </head>
  <body>
{capture name="header"}
<script type="text">
  $(function(){
    console.log('Hi,SUSHI!');
  });
</script>
{/capture}
{include file="header.html"}
<div id="wrapper">
  <h1>おいしいお寿司が食べたい!</h1>
  <p>
  焼肉でも…いいんだぞっ!
  </p>
</div>
{include file="footer.html"}

そして、生成されるコードはこちら。

<html>
  <head>
  <title>すっしっくいっねー♪</title>
  <link type="text/css" rel="stylesheet" href="/css/sushi.css" />
  <script src="/css/sushi.css"></script>
  <script type="text">
    $(function(){
      console.log('Hi,SUSHI!');
    });
  </script>
  </head>
  <body>
  <div id="wrapper">
    <h1>おいしいお寿司が食べたい!</h1>
    <p>
    焼肉でも…いいんだぞっ!
    </p>
  </div>

{capture name=“hoge”}〜{/capture}で囲まれたコードが{$smarty.capture.hoge}に格納されるのです! かゆいところに手が届くとは正にこの事!

注意点

”{capture}“をこの様な目的で使う場合、一点注意が必要です。 PHPはあくまでも上から順に実行されて行くので、header.html と body.html の読み込み順を考えなくてはいけません。。 フレームワークなどで「ヘッダー」「ボディ」「フッター」を全て読み込む様なテンプレートを利用している場合は下記のようにする必要があります。

{capture name="body"}
{include file="body.tpl"}
{/capture}
{include file="header.tpl"}
{$smarty.capture.body}
{include file="footer.tpl"}

”{capture}“を使う為に”{capture}“をかます…。 なんともダサイですが、こうする事で利用できます。。。

# もっとスマートな書き方、教えて!えろい人!!

でわでわ、ちょっと便利な”{capture}“の紹介でした!

SHOTA

I'm WEB developer

Tokyo, Japan http://senta.me/