Meet Volt ! Phalcon 謹製テンプレートエンジン Volt - from 第71回 PHP勉強会

*※ この記事は、[弊社 技術ブログ](http://www.rodeo.jp.net/tech/meet-phalcon-volt/) からの転載です*

----

<p>こんにちわ、エンジニアの大平かづみです。</p>
<p>今回は、Phalcon 謹製のテンプレートエンジン <strong>Volt</strong> をご紹介致します。</p>
<p>そして、この内容は、先日の <a href="http://atnd.org/events/42528">第71回 PHP勉強会</a> のセッションでご紹介させて頂いたものです。
参加して下さった皆様、本当にありがとうございました！</p>
<h2>第71回 PHP勉強会 の様子</h2>
<p>まずは、PHP勉強会での様子をご報告致します。<br>
前回の記事と併せて、Volt をご紹介させて頂きました。</p>
<p>発表の途中で、Phalcon のサイトで、日本語訳の登場に気付いたり、<br>
さらに、言語リストの表記が 「<strong>日本人</strong>」 となっており、会場内に笑顔がこぼれました（笑）<br>
そんな和やかな雰囲気で、会場の皆様も楽しく Phalcon を知って頂けたかと思います。</p>
<p><a href="http://www.rodeo.jp.net/wp-content/uploads/2013/08/phalcon-japanese.png"><img src="http://www.rodeo.jp.net/wp-content/uploads/2013/08/phalcon-japanese-300x164.png" alt="phalcon-japanese" width="300" height="164" class="alignnone size-medium wp-image-128" /></a></p>
<p>質問タイムや懇親会にて、双方で情報交換でき、私としても、とても良い機会となりました。
これからも精進して参りますので、どうぞよろしくお願い致します。</p>
<p>尚、本資料は、Slideshare や Speaker Deck にもアップロードしております。
併せてご覧頂けると幸いです。</p>
<h3>Slideshare</h3>
<iframe src="http://www.slideshare.net/slideshow/embed_code/25578907" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="https://www.slideshare.net/dzeyelid/meet-phalcons-volt" title="Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt" target="_blank">Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt</a> </strong> from <strong><a href="http://www.slideshare.net/dzeyelid" target="_blank">Kadumi Oohira</a></strong> </div>
<h3>Speaker Deck</h3>
<p><a href="https://speakerdeck.com/dzeyelid/phalcon-jin-zhi-tenpuretoenzin-volt-meet-phalcon-volt">Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt by dzeyelid</a></p>

<p>----</p>

<p>さて、本題の Volt について、見て参りましょう！</p>

<h1>Index</h1>
<p><a href="#description">Volt !</a><br>
<a href="#constructure">ビューの構造</a><br>
<a href="#controller-to-view">コントローラからビューへ</a><br>
<a href="#partial">パーツ化</a><br>
<a href="#be-useful">エディタを使いやすく！</a> ← <b>おすすめ</b> です！<br></p>

<p>----</p>
<a name="description"></a>
<h1>Volt ! - Phalcon PHP Framework のテンプレートエンジン</h1>
<h2>Volt とは</h2>
<p>Phalcon 謹製のテンプレートエンジン です。</p>
<ul>
<li>ですので、もちろん Phalcon と、とてもよく馴染みます。</li>
<li>参考: <a href="http://docs.phalconphp.com/en/latest/reference/volt.html">Volt: Template Engine</a></li>
<li>参考: <a href="http://docs.phalconphp.com/en/latest/reference/views.html#template-engines">Using Views – Template Engines</a></li>
</ul>
<p>PHPのテンプレートエンジンといえば、Symfony の Twig が挙げられると思いますが、これとよく似ています。</p>
<ul>
<li>導入しやすい！</li>
</ul>
<h1>Phalcon のビュー</h1>
<p>ここで、Phalcon のビュー周りについて少し触れてみます。</p>
<h2>Phalcon のビューの仕組み</h2>
<p>いわゆる、MVC フレームワークのビューです。</p>
<ul>
<li>参考: <a href="http://docs.phalconphp.com/en/latest/reference/views.html">Using View</a></li>
</ul>
<p>ビューのテンプレートエンジンとしては、Volt のほかに、plain PHP (phtml) や他のエンジンも使えます。</p>
<p>基本的には、コントローラのアクションと対になっています</p>
<ul>
<li>
例えば、
<ul>
<li>コントローラ : <strong>Music</strong>Controller の <strong>index</strong>Action</li>
<li>ビュー : app\views\ <strong>music</strong> \ <strong>index</strong>.volt</li>
</ul>
</li>
</ul>

<p>----</p>
<a name="constructure"></a>
<h1>ビューの構造</h1>
<p>Phalcon のビューは、階層的にレンダリングされます。</p>
<h2>ビューの階層構造</h2>
<p>全体では階層構造になっており、シンプルなビューを構成できます。</p>
<ol>
<li>ベースになるビュー</li>
<li>コントローラに紐づいた レイアウトの ビュー</li>
<li>コントローラのアクションに紐づいた ビュー</li>
</ol>
<h2>ビューのレンダリング順</h2>
<p>ビューのレンダリング順は、</p>
<p><em>ベースのビュー → コントローラのビュー → アクションのビュー</em></p>
<p>となります。</p>
<p>文章では書きにくいので、スライド資料の <a href="http://www.slideshare.net/slideshow/embed_code/25578907?startSlide=9" title="Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt">「ビューのレンダリング順」</a> の項をご覧頂くとわかりやすいかと思います。</p>

<p>----</p>
<a name="controller-to-view"></a>
<h1>コントローラからビューへ</h1>
<h2>コントローラから渡す</h2>
<p>コントローラからデータを渡すには、以下のように設定します。</p>
<p><em>$this-&gt;view-&gt;<strong>variable</strong> = …</em></p>
<p>配列もOKです。</p>
<p><em>$this-&gt;view-&gt;<strong>variables</strong> = array(&quot;apple&quot;, &quot;banana&quot;);</em></p>
<h2>ビューで表示する</h2>
<p>コントローラから渡された変数は、”$” なしで参照できます。</p>
<p>そのまま表示できるものは、以下のように書きます。<br>
エンジンでの変換時に、 <em>&lt;? echo $variable ; ?&gt;</em> に置き換わります。</p>
<p><em><strong>{{</strong> variable <strong>}}</strong></em></p>
<h2>ビューで表示する (分岐、ループなど)</h2>
<p>公式サイトの情報を見て頂ければ一目瞭然なのですが、いくつかピックアップしてみます。</p>
<p>参考: <a href="http://docs.phalconphp.com/en/latest/reference/volt.html#list-of-control-structures">List of Control Structures</a></p>
<p>分岐は、if ... else ... endif と書きます。 </p>
<p><em><strong>{% if</strong> variable … <strong>%}</strong><br>
<strong>{% else %}</strong><br>
<strong>{% endif %}</strong></em></p>
<p>配列の各要素をループで回すには、for ... in ... endfor と書きます。</p>
<p><em><strong>{% for</strong> variable <strong>in</strong> variables <strong>%}</strong><br>
<strong>{% endfor %}</strong></em></p>
<p>このような感じで、特に迷うことなく書けると思います。</p>

<p>----</p>
<a name="partial"></a>
<h1>パーツ化</h1>
<p>これが、とっても便利なんです！</p>
<h2>画面のパーツ化</h2>
<p>画面の<strong>一部</strong>を切り出して、<strong>必要な時<strong>、</strong>必要な場所</strong>で、ロードできます！</p>
<p>参考: <a href="http://docs.phalconphp.com/en/latest/reference/views.html#using-partials">Using Views - Using Paritals</a></p>
<p>Volt では、partial() ビルトイン関数として提供されています。</p>
<p><strong>partial()</strong></p>
<ul>
<li>ロードしたいパーシャル（voltファイル）を指定します</li>
<li>ロードしたパーシャルでも変数を参照できます</li>
<li>引数も渡せます</li>
<li>引数はリネームもできます</li>
</ul>
<p>partial は、恐らく パーシャル と読むようです。<br>
（もし、正しい読み方をご存知の方は教えて頂けると大変助かります！）</p>
<h2>partial() を使ってみよう</h2>
<p>こちらも、文章では書きにくいので、スライド資料の <a href="http://www.slideshare.net/slideshow/embed_code/25578907?startSlide=21" title="Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt">「paritl()を使ってみよう」</a> の項をご覧頂くとわかりやすいかと思います。</p>
<p>ポイントをいくつかピックアップしておきます。</p>
<ul>
<li>パーシャルにするvolt ファイルは、app/views 配下のどこかに配置します。</li>
<li>パーシャル内でも変数を使えます。</li>
<li>
<p>パーシャル内では、コントローラから私された変数を参照することができます。</p>
</li>
<li>
<p>パーシャルをロードするときは、 partial(&quot;...&quot;) と書きます。</p>
</li>
<li>parital(&quot;...&quot;, [&quot;var&quot;: variable]) このように書くことで、パーシャル内で、variable を var として参照できます。</li>
</ul>
<p><strong>パーシャル便利！</strong></p>

<p>----</p>
<a name="be-useful"></a>
<h1>使いやすく！</h1>
<h2>Sublime Text で使いやすく</h2>
<p>チュートリアルムービーでも使われている <a href="http://www.sublimetext.com/">Sublime Text</a></p>
<ul>
<li>Sublime Text は、Mac / Linux / Windows どれでも利用可</li>
<li><a href="https://github.com/sergeche/emmet-sublime">Emmet</a> や <a href="http://hayakubundle.com/">hayaku</a> など、便利なパッケージが多数</li>
</ul>
<p>なんとありがたいことに、公式に、シンタックスハイライトのパッケージがあります！</p>
<p><strong><a href="https://github.com/phalcon/volt-sublime-textmate">Volt Syntax Highlight</a></strong></p>
<ul>
<li>黒基調の Sublime Text によく映えます</li>
<li>TextMate でも使えます</li>
</ul>
<h3>Sublime Text with Volt Syntax Highlight (利用方法)</h3>
<ol>
<li>
Sublime Text の Package Control を利用します
<ul>
<li>Installation に従い、Console にコードを入力し、Package Control をインストール</li>
</ul>
</li>
<li>
Package Control にリポジトリを登録します
<ul>
<li>リポジトリ: https://github.com/phalcon/volt-sublime-textmate</li>
</ul>
</li>
<li>Package Control の Install Package から “Volt syntax Highlight” をインストール</li>
</ol>
<p>参考スライド: <a href="http://www.slideshare.net/slideshow/embed_code/25578907?startSlide=30">Sublime Text with Volt Syntax Highlight</a></p>
<h2>Netbeans で使いやすく</h2>
<p>公式のシンタックスハイライトはないのですが…
よく似たシンタックスの <strong>Twig ファイル</strong> として扱うと、シンタックスがきれいに出ます。</p>
<p>参考スライド: <a href="http://www.slideshare.net/slideshow/embed_code/25578907?startSlide=31">Netbeans で使いやすく</a></p>

<h1>ライセンス</h1>
<p>Phalcon PHP Framework は、<a href="https://github.com/phalcon/cphalcon/blob/master/docs/LICENSE.md">new BSD license</a> に基づきリリースされています。
尚、本資料における <a href="http://phalconphp.com/">Phalcon</a> からの引用、および画像については、<a href="http://creativecommons.org/licenses/by/3.0/"> Creative Commons Attribution 3.0 License</a> に基づき、使用しています。</p>

<p>----</p>
<h1>さいごに</h1>
<p>このフレームワークを使ってお仕事したい方は！
[RODEO](http://www.rodeo.jp.net/) で一緒にお仕事しませんか！</p>

<p>弊社では、笑顔とユーモアあふれる仲間と、共にお仕事したい方を募集しています。</p>

<p>一同、お待ちしております！</p>

<p>また、<a href="http://phpcon.php.gr.jp/w/2013/">PHPカンファレンス 2013</a> にも参加予定です。<br>
どうぞよろしくお願い致します！</p>