phalcon 謹製テンプレートエンジン volt - meet phalcon volt
DESCRIPTION
こんにちわ、RODEOの大平かづみです。 今回は、Phalcon のテンプレートエンジン Volt をご紹介致します。 MVCのビュー周りを作る際に、とても活躍してくれます。 是非ご覧頂ければ幸いです! それから、本日の「第71回 PHP勉強会@東京」にて発表する資料でもあります。よろしくお願い致します! (http://atnd.org/events/42528) RODEO: http://www.rodeo.jp.net/TRANSCRIPT
![Page 1: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/1.jpg)
Meet ♡ Volt
大平かづみ
![Page 2: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/2.jpg)
Index
Volt !
ビューの構造
コントローラからビューへ
パーツ化
エディタを使いやすく!
![Page 3: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/3.jpg)
Volt !Phalcon PHP Framework のテンプレートエンジン
![Page 4: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/4.jpg)
Volt とは
Phalcon 謹製のテンプレートエンジン
もちろん Phalcon と、とてもよく馴染みます
参考: Volt: Template Engine
参考: Using Views – Template Engines
PHP でよく使われる某エンジンとよく似ています
導入しやすい!
![Page 5: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/5.jpg)
Phalcon のビューここで、Phalcon のビュー周りについて少し触れてみます
![Page 6: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/6.jpg)
Phalcon のビューの仕組み
いわゆる、MVC フレームワークのビューです
参考: Using View
Volt のほかに、plain PHP (phtml) や他のエンジンも使えます
基本的には、コントローラのアクションと対になっています
例えば、
コントローラ : MusicController の indexAction
ビュー : app¥views¥music¥index.volt
![Page 7: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/7.jpg)
ビューの構造階層的にレンダリングされます
![Page 8: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/8.jpg)
ビューの階層構造
全体では階層構造になっており、シンプルなビューを構成できます
1. ベースになるビュー
2. コントローラに紐づいた レイアウトの ビュー
3. コントローラのアクションに紐づいた ビュー
![Page 9: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/9.jpg)
ビューのレンダリング順ベース→コントローラのビュー→アクションのビュー
![Page 10: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/10.jpg)
ビューのレンダリング順 (1)
まず、レンダリングされるのは、
views¥index.voltapp
views
layouts
music.volt
music
index.volt
index.volt
![Page 11: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/11.jpg)
ビューのレンダリング順 (2)
次に、コントローラに紐づく、レイアウトのビュー
views¥layouts¥music.volt
app
views
layouts
music.volt
music
index.volt
index.volt
![Page 12: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/12.jpg)
ビューのレンダリング順 (3)
そして、コントローラのアクションに紐づくビュー
views¥music¥index.volt
app
views
layouts
music.volt
music
index.volt
index.volt
![Page 13: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/13.jpg)
実際にはこんな感じです
app
views
layouts
music.volt
music
index.volt
index.volt
![Page 14: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/14.jpg)
views/index.volt
views/layout/music.volt
views/music/index.volt
![Page 15: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/15.jpg)
コントローラからビューへコントローラから渡す / ビューで表示する /
コントローラとビューの紐づけ
![Page 16: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/16.jpg)
コントローラから渡す
コントローラでは、このように設定します
$this->view->variable = …
配列もOK
![Page 17: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/17.jpg)
ビューで表示する
コントローラから渡された変数は、”$” なしで参照できます
そのまま表示できるものは、
{{ variable }}
![Page 18: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/18.jpg)
ビューで表示する (分岐、ループなど)
分岐
{% if variable … %}
{% else %}
{% endif %}
配列の各要素を
{% for variable in variables %}
{% endfor %}
他にもあります→ List of Control Structures
![Page 19: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/19.jpg)
パーツ化画面のパーツ化 / partial() を使ってみよう
![Page 20: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/20.jpg)
画面のパーツ化
画面の一部を切り出して、必要な時、必要な場所で、ロードできます!
参考: Using Views - Using Paritals
Volt では、ビルトイン関数として提供されています
partial()
ロードしたいパーシャル(voltファイル)を指定します
ロードしたパーシャルでも変数を参照できます
引数も渡せます
引数はリネームもできます
![Page 21: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/21.jpg)
partial() を使ってみよう
例えば、こんな曲のリストを作りたいとき
![Page 22: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/22.jpg)
partial() を使ってみよう
例えば、こんな曲のリストを作りたいとき
曲データの部分をパーシャルにしてみましょう
![Page 23: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/23.jpg)
partial() : パーシャルを作ってみる
曲データ部分だけを、1つのファイルに書きます
app/views 配下のどこかに置きます
変数をあてるところは、いつも通り
パーシャルで使う変数構造が決まります
例では、以下のデータをもったsong という変数を使います
title, artsist, released_on
![Page 24: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/24.jpg)
partial() : パーシャルを作ってみる
こんな感じです
![Page 25: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/25.jpg)
partial() : ビューですること
パーシャルをロードします
views 以下のディレクトリ階層を含むパスを指定します
例 : “songs/partial_song”
パーシャル内でも、同じ変数を使えます
例 : patial_song.volt 内で、song を参照できます
パーシャルに、変数をリネームして渡せます
例 : favorite_song を、song にリネームして、patial_song.volt に渡しています
![Page 26: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/26.jpg)
partial() :コントローラですること
パーシャルを使うかどうかは、何も意識しません
表示したいデータをビューに渡すだけです
例えば、
$this->view->songs に、曲データの配列を設定して、view へ渡します
$this->view->favorite_song に、好きな曲の情報を設定して、view へ渡します
![Page 27: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/27.jpg)
コードがすっきりしますね!
![Page 28: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/28.jpg)
使いやすく!Sublime Text / Netbeans でシンタックスハイライト
![Page 29: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/29.jpg)
Sublime Text で使いやすく
チュートリアルムービーでも使われている Sublime Text
Sublime Text は、Mac / Linux / Windows どれでも利用可
Emmet や hayaku など、便利なパッケージが多数
公式に、シンタックスハイライトのパッケージがあります
Volt Syntax Highlight
黒基調の Sublime Text によく映えます
TextMate でも使えます
![Page 30: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/30.jpg)
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” をインストール
![Page 31: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/31.jpg)
Netbeans で使いやすく
公式のシンタックスハイライトはないのですが…
よく似たシンタックスの Twig ファイルとして扱うと、シンタックスがきれいに出ます
![Page 32: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/32.jpg)
さいごに
Phalcon PHP Framework は、new BSD license に基づきリリースされています。
尚、本資料における Phalcon からの引用、および画像については、Creative Commons Attribution 3.0 License に基づき、使用しています。
![Page 33: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/33.jpg)
このフレームワークを使ってお仕事したい方は!
お待ちしております ヾ(・ω・)ノ
で一緒に作りませんか!
http://www.rodeo.jp.net
![Page 34: Phalcon 謹製テンプレートエンジン Volt - Meet phalcon Volt](https://reader034.vdocuments.mx/reader034/viewer/2022042518/55878247d8b42a8f7d8b458c/html5/thumbnails/34.jpg)
See you, again! :)