Posted at

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

More than 5 years have passed since last update.

※ この記事は、弊社 技術ブログ からの転載です


こんにちわ、エンジニアの大平かづみです。

今回は、Phalcon 謹製のテンプレートエンジン Volt をご紹介致します。

そして、この内容は、先日の 第71回 PHP勉強会 のセッションでご紹介させて頂いたものです。
参加して下さった皆様、本当にありがとうございました!

第71回 PHP勉強会 の様子

まずは、PHP勉強会での様子をご報告致します。

前回の記事と併せて、Volt をご紹介させて頂きました。

発表の途中で、Phalcon のサイトで、日本語訳の登場に気付いたり、

さらに、言語リストの表記が 「日本人」 となっており、会場内に笑顔がこぼれました(笑)

そんな和やかな雰囲気で、会場の皆様も楽しく Phalcon を知って頂けたかと思います。

phalcon-japanese

質問タイムや懇親会にて、双方で情報交換でき、私としても、とても良い機会となりました。
これからも精進して参りますので、どうぞよろしくお願い致します。

尚、本資料は、Slideshare や Speaker Deck にもアップロードしております。
併せてご覧頂けると幸いです。

Slideshare



Speaker Deck



Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt by dzeyelid

----

さて、本題の Volt について、見て参りましょう!

Index

Volt !

ビューの構造

コントローラからビューへ

パーツ化

エディタを使いやすく!おすすめ です!

----



Volt ! - Phalcon PHP Framework のテンプレートエンジン



Volt とは



Phalcon 謹製のテンプレートエンジン です。





PHPのテンプレートエンジンといえば、Symfony の Twig が挙げられると思いますが、これとよく似ています。






  • 導入しやすい!





Phalcon のビュー



ここで、Phalcon のビュー周りについて少し触れてみます。



Phalcon のビューの仕組み



いわゆる、MVC フレームワークのビューです。





ビューのテンプレートエンジンとしては、Volt のほかに、plain PHP (phtml) や他のエンジンも使えます。



基本的には、コントローラのアクションと対になっています









  • 例えば、




    • コントローラ : MusicController の indexAction



    • ビュー : app\views\ music \ index.volt









----



ビューの構造



Phalcon のビューは、階層的にレンダリングされます。



ビューの階層構造



全体では階層構造になっており、シンプルなビューを構成できます。






  1. ベースになるビュー



  2. コントローラに紐づいた レイアウトの ビュー



  3. コントローラのアクションに紐づいた ビュー





ビューのレンダリング順



ビューのレンダリング順は、



ベースのビュー → コントローラのビュー → アクションのビュー



となります。



文章では書きにくいので、スライド資料の 「ビューのレンダリング順」 の項をご覧頂くとわかりやすいかと思います。

----



コントローラからビューへ



コントローラから渡す



コントローラからデータを渡すには、以下のように設定します。



$this->view->variable = …



配列もOKです。



$this->view->variables = array("apple", "banana");



ビューで表示する



コントローラから渡された変数は、”$” なしで参照できます。



そのまま表示できるものは、以下のように書きます。


エンジンでの変換時に、 <? echo $variable ; ?> に置き換わります。



{{ variable }}



ビューで表示する (分岐、ループなど)



公式サイトの情報を見て頂ければ一目瞭然なのですが、いくつかピックアップしてみます。



参考: List of Control Structures



分岐は、if ... else ... endif と書きます。



{% if variable … %}


{% else %}


{% endif %}



配列の各要素をループで回すには、for ... in ... endfor と書きます。



{% for variable in variables %}


{% endfor %}



このような感じで、特に迷うことなく書けると思います。

----



パーツ化



これが、とっても便利なんです!



画面のパーツ化



画面の一部を切り出して、必要な時必要な場所で、ロードできます!



参考: Using Views - Using Paritals



Volt では、partial() ビルトイン関数として提供されています。



partial()






  • ロードしたいパーシャル(voltファイル)を指定します



  • ロードしたパーシャルでも変数を参照できます



  • 引数も渡せます



  • 引数はリネームもできます





partial は、恐らく パーシャル と読むようです。


(もし、正しい読み方をご存知の方は教えて頂けると大変助かります!)



partial() を使ってみよう



こちらも、文章では書きにくいので、スライド資料の 「paritl()を使ってみよう」 の項をご覧頂くとわかりやすいかと思います。



ポイントをいくつかピックアップしておきます。






  • パーシャルにするvolt ファイルは、app/views 配下のどこかに配置します。



  • パーシャル内でも変数を使えます。






  • パーシャル内では、コントローラから私された変数を参照することができます。










  • パーシャルをロードするときは、 partial("...") と書きます。







  • parital("...", ["var": variable]) このように書くことで、パーシャル内で、variable を var として参照できます。





パーシャル便利!

----



使いやすく!



Sublime Text で使いやすく



チュートリアルムービーでも使われている Sublime Text






  • Sublime Text は、Mac / Linux / Windows どれでも利用可




  • Emmethayaku など、便利なパッケージが多数





なんとありがたいことに、公式に、シンタックスハイライトのパッケージがあります!



Volt Syntax Highlight






  • 黒基調の Sublime Text によく映えます



  • TextMate でも使えます





Sublime Text with Volt Syntax Highlight (利用方法)









  1. Sublime Text の Package Control を利用します




    • Installation に従い、Console にコードを入力し、Package Control をインストール












  2. Package Control にリポジトリを登録します







  3. Package Control の Install Package から “Volt syntax Highlight” をインストール





参考スライド: Sublime Text with Volt Syntax Highlight



Netbeans で使いやすく



公式のシンタックスハイライトはないのですが…

よく似たシンタックスの Twig ファイル として扱うと、シンタックスがきれいに出ます。



参考スライド: Netbeans で使いやすく

ライセンス

Phalcon PHP Framework は、new BSD license に基づきリリースされています。
尚、本資料における Phalcon からの引用、および画像については、 Creative Commons Attribution 3.0 License に基づき、使用しています。

----

さいごに

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

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

一同、お待ちしております!

また、PHPカンファレンス 2013 にも参加予定です。

どうぞよろしくお願い致します!