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

13,355 views
13,234 views

Published on

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

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

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

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

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,355
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
11
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

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

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

×