Tweet
Tweet

Slide 1

Slide 1 text

Meet ♡ Volt 大平かづみ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

See you, again! :)