Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt
•
9 likes•15,223 views
こんにちわ、RODEOの大平かづみです。 今回は、Phalcon のテンプレートエンジン Volt をご紹介致します。 MVCのビュー周りを作る際に、とても活躍してくれます。 是非ご覧頂ければ幸いです！ それから、本日の「第71回 PHP勉強会@東京」にて発表する資料でもあります。よろしくお願い致します！ (http://atnd.org/events/42528) RODEO: http://www.rodeo.jp.net/
Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt
- 2. Index Volt ! ビューの構造 コントローラからビューへ パーツ化 エディタを使いやすく！
- 3. Volt ! Phalcon PHP Framework のテンプレートエンジン
- 4. Volt とは Phalcon 謹製のテンプレートエンジン もちろん Phalcon と、とてもよく馴染みます 参考: Volt: Template Engine 参考: Using Views – Template Engines PHP でよく使われる某エンジンとよく似ています 導入しやすい！
- 6. Phalcon のビューの仕組み いわゆる、MVC フレームワークのビューです 参考: Using View Volt のほかに、plain PHP (phtml) や他のエンジンも使えます 基本的には、コントローラのアクションと対になっています 例えば、 コントローラ : MusicController の indexAction ビュー : app¥views¥music¥index.volt
- 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
- 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ファイル）を指定します ロードしたパーシャルでも変数を参照できます 引数も渡せます 引数はリネームもできます
- 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 に基づき、使用しています。
- 34. See you, again! :)