1. dz_

    Posted

    dz_
Changes in title
+Meet Volt ! Phalcon 謹製テンプレートエンジン Volt - from 第71回 PHP勉強会
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,195 @@
+*※ この記事は、[弊社 技術ブログ](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>