phalcon 謹製テンプレートエンジン volt - meet phalcon volt

Meet ♡ Volt

大平かづみ

Index

Volt !

ビューの構造

コントローラからビューへ

パーツ化

エディタを使いやすく！

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

Volt とは

Phalcon 謹製のテンプレートエンジン

もちろん Phalcon と、とてもよく馴染みます

参考: Volt: Template Engine

参考: Using Views – Template Engines

PHP でよく使われる某エンジンとよく似ています

導入しやすい！

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

Phalcon のビューの仕組み

いわゆる、MVC フレームワークのビューです

参考: Using View

Volt のほかに、plain PHP (phtml) や他のエンジンも使えます

基本的には、コントローラのアクションと対になっています

例えば、

コントローラ : MusicController の indexAction

ビュー : app¥views¥music¥index.volt

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

ビューの階層構造

全体では階層構造になっており、シンプルなビューを構成できます

1. ベースになるビュー

2. コントローラに紐づいた レイアウトの ビュー

3. コントローラのアクションに紐づいた ビュー

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

ビューのレンダリング順 (1)

まず、レンダリングされるのは、

views¥index.voltapp

views

layouts

music.volt

music

index.volt

index.volt

ビューのレンダリング順 (2)

次に、コントローラに紐づく、レイアウトのビュー

views¥layouts¥music.volt

app

views

layouts

music.volt

music

index.volt

index.volt

ビューのレンダリング順 (3)

そして、コントローラのアクションに紐づくビュー

views¥music¥index.volt

app

views

layouts

music.volt

music

index.volt

index.volt

実際にはこんな感じです

app

views

layouts

music.volt

music

index.volt

index.volt

views/index.volt

views/layout/music.volt

views/music/index.volt

コントローラからビューへコントローラから渡す / ビューで表示する /

コントローラとビューの紐づけ

コントローラから渡す

コントローラでは、このように設定します

$this->view->variable = …

配列もOK

ビューで表示する

コントローラから渡された変数は、”$” なしで参照できます

そのまま表示できるものは、

{{ variable }}

ビューで表示する (分岐、ループなど)

分岐

{% if variable … %}

{% else %}

{% endif %}

配列の各要素を

{% for variable in variables %}

{% endfor %}

他にもあります→ List of Control Structures

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

画面のパーツ化

画面の一部を切り出して、必要な時、必要な場所で、ロードできます！

参考: Using Views - Using Paritals

Volt では、ビルトイン関数として提供されています

partial()

ロードしたいパーシャル（voltファイル）を指定します

ロードしたパーシャルでも変数を参照できます

引数も渡せます

引数はリネームもできます

partial() を使ってみよう

例えば、こんな曲のリストを作りたいとき

partial() を使ってみよう

例えば、こんな曲のリストを作りたいとき

曲データの部分をパーシャルにしてみましょう

partial() : パーシャルを作ってみる

曲データ部分だけを、1つのファイルに書きます

app/views 配下のどこかに置きます

変数をあてるところは、いつも通り

パーシャルで使う変数構造が決まります

例では、以下のデータをもったsong という変数を使います

title, artsist, released_on

partial() : パーシャルを作ってみる

こんな感じです

partial() : ビューですること

パーシャルをロードします

views 以下のディレクトリ階層を含むパスを指定します

例 : “songs/partial_song”

パーシャル内でも、同じ変数を使えます

例 : patial_song.volt 内で、song を参照できます

パーシャルに、変数をリネームして渡せます

例 : favorite_song を、song にリネームして、patial_song.volt に渡しています

partial() :コントローラですること

パーシャルを使うかどうかは、何も意識しません

表示したいデータをビューに渡すだけです

例えば、

$this->view->songs に、曲データの配列を設定して、view へ渡します

$this->view->favorite_song に、好きな曲の情報を設定して、view へ渡します

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

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

Sublime Text で使いやすく

チュートリアルムービーでも使われている Sublime Text

Sublime Text は、Mac / Linux / Windows どれでも利用可

Emmet や hayaku など、便利なパッケージが多数

公式に、シンタックスハイライトのパッケージがあります

Volt Syntax Highlight

黒基調の Sublime Text によく映えます

TextMate でも使えます

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” をインストール

Netbeans で使いやすく

公式のシンタックスハイライトはないのですが…

よく似たシンタックスの Twig ファイルとして扱うと、シンタックスがきれいに出ます

さいごに

Phalcon PHP Framework は、new BSD license に基づきリリースされています。

尚、本資料における Phalcon からの引用、および画像については、Creative Commons Attribution 3.0 License に基づき、使用しています。

このフレームワークを使ってお仕事したい方は！

お待ちしております ヾ(・ω・)ﾉ

で一緒に作りませんか！

http://www.rodeo.jp.net

See you, again! :)