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

こんにちわ、RODEOの大平かづみです。

今回は、Phalcon のテンプレートエンジン Volt をご紹介致します。
MVCのビュー周りを作る際に、とても活躍してくれます。
是非ご覧頂ければ幸いです！

それから、本日の「第71回 PHP勉強会@東京」にて発表する資料でもあります。よろしくお願い致します！
(http://atnd.org/events/42528)

RODEO: http://www.rodeo.jp.net/

Transcript

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! :)