こんにちわ、RODEOの大平かづみです。 今回は、Phalcon のテンプレートエンジン Volt をご紹介致します。 MVCのビュー周りを作る際に、とても活躍してくれます。 是非ご覧頂ければ幸いです！ それから、本日の「第71回 PHP勉強会@東京」にて発表する資料でもあります。よろしくお願い致します！ (http://atnd.org/events/42528) RODEO: http://www.rodeo.jp.net/

1. Meet ♡ Volt
大平かづみ

2. Index
 Volt !
 ビューの構造
 コントローラからビューへ
 パーツ化
 エディタを使いやすく！

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

4. Volt とは
 Phalcon 謹製のテンプレートエンジン
 もちろん Phalcon と、とてもよく馴染みます
 参考: Volt: Template Engine
 参考: Using Views – Template Engines
 PHP でよく使われる某エンジンとよく似ています
 導入しやすい！

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

6. Phalcon のビューの仕組み
 いわゆる、MVC フレームワークのビューです
 参考: Using View
 Volt のほかに、plain PHP (phtml) や他のエンジンも使えます
 基本的には、コントローラのアクションと対になっています
 例えば、
 コントローラ : MusicController の indexAction
 ビュー : app¥views¥music¥index.volt

7. ビューの構造
階層的にレンダリングされます

8. ビューの階層構造
 全体では階層構造になっており、シンプルなビューを構成できます
1. ベースになるビュー
2. コントローラに紐づいた レイアウトの ビュー
3. コントローラのアクションに紐づいた ビュー

9. ビューのレンダリング順
ベース → コントローラのビュー → アクションのビュー

10. ビューのレンダリング順 (1)
 まず、レンダリングされるのは、
views¥index.volt
app
views
layouts
 music.volt
music
 index.volt
 index.volt

11. ビューのレンダリング順 (2)
 次に、コントローラに紐づく、
レイアウトのビュー
views¥layouts¥music.volt
app
views
layouts
 music.volt
music
 index.volt
 index.volt

12. ビューのレンダリング順 (3)
 そして、コントローラのアク
ションに紐づくビュー
views¥music¥index.volt
app
views
layouts
 music.volt
music
 index.volt
 index.volt

13. 実際にはこんな感じです
app
views
layouts
 music.volt
music
 index.volt
 index.volt

14. views/index.volt
views/layout/music.volt
views/music/index.volt

15. コントローラからビューへ
コントローラから渡す / ビューで表示する /
コントローラとビューの紐づけ

16. コントローラから渡す
 コントローラでは、
このように設定します
 $this->view->variable = …
 配列もOK

17. ビューで表示する
 コントローラから渡された変数
は、”$” なしで参照できます
 そのまま表示できるものは、
 {{ variable }}

18. ビューで表示する (分岐、ループなど)
 分岐
 {% if variable … %}
{% else %}
{% endif %}
 配列の各要素を
 {% for variable in variables %}
{% endfor %}
 他にもあります → List of Control Structures

19. パーツ化
画面のパーツ化 / partial() を使ってみよう

20. 画面のパーツ化
 画面の一部を切り出して、
必要な時、必要な場所で、ロードできます！
 参考: Using Views - Using Paritals
 Volt では、ビルトイン関数として提供されています
 partial()
 ロードしたいパーシャル（voltファイル）を指定します
 ロードしたパーシャルでも変数を参照できます
 引数も渡せます
 引数はリネームもできます

21. partial() を使ってみよう
 例えば、こんな
曲のリストを作りたいとき

22. partial() を使ってみよう
 例えば、こんな
曲のリストを作りたいとき
 曲データの部分を
パーシャルにしてみましょう

23. partial() : パーシャルを作ってみる
 曲データ部分だけを、1つのファイルに書きます
 app/views 配下のどこかに置きます
 変数をあてるところは、いつも通り
 パーシャルで使う変数構造が決まります
 例では、以下のデータをもった
song という変数を使います
 title, artsist, released_on

24. partial() : パーシャルを作ってみる
 こんな感じです

25. partial() : ビューですること
 パーシャルをロードします
 views 以下のディレクトリ階層を含むパスを指定します
 例 : “songs/partial_song”
 パーシャル内でも、同じ変数を使えます
 例 : patial_song.volt 内で、song を参照できます
 パーシャルに、変数をリネームして渡せます
 例 : favorite_song を、song にリネームして、
patial_song.volt に渡しています

26. partial() :コントローラですること
 パーシャルを使うかどうかは、何も意識しません
 表示したいデータをビューに渡すだけです
 例えば、
 $this->view->songs に、
曲データの配列を設定して、view へ渡します
 $this->view->favorite_song に、
好きな曲の情報を設定して、view へ渡します

27. コードがすっきり
しますね！

28. 使いやすく！
Sublime Text / Netbeans でシンタックスハイライト

29. Sublime Text で使いやすく
 チュートリアルムービーでも使われている Sublime Text
 Sublime Text は、Mac / Linux / Windows どれでも利用可
 Emmet や hayaku など、便利なパッケージが多数
 公式に、シンタックスハイライトのパッケージがあります
 Volt Syntax Highlight
 黒基調の Sublime Text によく映えます
 TextMate でも使えます

30. Sublime Text with Volt Syntax Highlight
 利用方法
 Sublime Text の Package Control を利用します
Installation に従い、Console にコードを入力し、
Package Control をインストール
 Package Control にリポジトリを登録します
 リポジトリ: https://github.com/phalcon/volt-sublime-
textmate
 Package Control の Install Package から “Volt syntax
Highlight” をインストール

31. Netbeans で使いやすく
 公式のシンタックスハイライトはないのですが…
 よく似たシンタックスの Twig ファイルとして扱うと、
シンタックスがきれいに出ます

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

33. このフレームワークを使って
お仕事したい方は！
お待ちしております ヾ(・ω・)ﾉ
で 一緒に作りませんか！
http://www.rodeo.jp.net

34. See you, again! :)