Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

14,116 views

Published on

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

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

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

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

  • Be the first to comment

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! :)

×