LoginSignup
13
14

More than 5 years have passed since last update.

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

Posted at

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


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

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

13
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
14