PHP
framework
Phalcon
Volt

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

More than 4 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 にも参加予定です。
どうぞよろしくお願い致します!