Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

A94db26f7231ab767136bac53a308143?s=47 dzeyelid
August 26, 2013

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

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

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

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

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

A94db26f7231ab767136bac53a308143?s=128

dzeyelid

August 26, 2013
Tweet

Transcript

  1. Meet ♡ Volt 大平かづみ

  2. Index  Volt !  ビューの構造  コントローラからビューへ  パーツ化

     エディタを使いやすく!
  3. Volt ! Phalcon PHP Framework のテンプレートエンジン

  4. Volt とは  Phalcon 謹製のテンプレートエンジン  もちろん Phalcon と、とてもよく馴染みます 

    参考: Volt: Template Engine  参考: Using Views – Template Engines  PHP でよく使われる某エンジンとよく似ています  導入しやすい!
  5. Phalcon のビュー ここで、Phalcon のビュー周りについて少し触れてみます

  6. Phalcon のビューの仕組み  いわゆる、MVC フレームワークのビューです  参考: Using View 

    Volt のほかに、plain PHP (phtml) や他のエンジンも使えます  基本的には、コントローラのアクションと対になっています  例えば、  コントローラ : MusicController の indexAction  ビュー : app¥views¥music¥index.volt
  7. ビューの構造 階層的にレンダリングされます

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

    コントローラのアクションに紐づいた ビュー
  9. ビューのレンダリング順 ベース → コントローラのビュー → アクションのビュー

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

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

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

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

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

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

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

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

    }}
  18. ビューで表示する (分岐、ループなど)  分岐  {% if variable … %}

    {% else %} {% endif %}  配列の各要素を  {% for variable in variables %} {% endfor %}  他にもあります → List of Control Structures
  19. パーツ化 画面のパーツ化 / partial() を使ってみよう

  20. 画面のパーツ化  画面の一部を切り出して、 必要な時、必要な場所で、ロードできます!  参考: Using Views - Using

    Paritals  Volt では、ビルトイン関数として提供されています  partial()  ロードしたいパーシャル(voltファイル)を指定します  ロードしたパーシャルでも変数を参照できます  引数も渡せます  引数はリネームもできます
  21. partial() を使ってみよう  例えば、こんな 曲のリストを作りたいとき

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

  23. partial() : パーシャルを作ってみる  曲データ部分だけを、1つのファイルに書きます  app/views 配下のどこかに置きます  変数をあてるところは、いつも通り

     パーシャルで使う変数構造が決まります  例では、以下のデータをもった song という変数を使います  title, artsist, released_on
  24. partial() : パーシャルを作ってみる  こんな感じです

  25. partial() : ビューですること  パーシャルをロードします  views 以下のディレクトリ階層を含むパスを指定します  例

    : “songs/partial_song”  パーシャル内でも、同じ変数を使えます  例 : patial_song.volt 内で、song を参照できます  パーシャルに、変数をリネームして渡せます  例 : favorite_song を、song にリネームして、 patial_song.volt に渡しています
  26. partial() :コントローラですること  パーシャルを使うかどうかは、何も意識しません  表示したいデータをビューに渡すだけです  例えば、  $this->view->songs

    に、 曲データの配列を設定して、view へ渡します  $this->view->favorite_song に、 好きな曲の情報を設定して、view へ渡します
  27. コードがすっきり しますね!

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

  29. Sublime Text で使いやすく  チュートリアルムービーでも使われている Sublime Text  Sublime Text

    は、Mac / Linux / Windows どれでも利用可  Emmet や hayaku など、便利なパッケージが多数  公式に、シンタックスハイライトのパッケージがあります  Volt Syntax Highlight  黒基調の Sublime Text によく映えます  TextMate でも使えます
  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. Netbeans で使いやすく  公式のシンタックスハイライトはないのですが…  よく似たシンタックスの Twig ファイルとして扱うと、 シンタックスがきれいに出ます

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

     尚、本資料における Phalcon からの引用、および画像については、 Creative Commons Attribution 3.0 License に基づき、使用しています。
  33. このフレームワークを使って お仕事したい方は! お待ちしております ヾ(・ω・)ノ で 一緒に作りませんか! http://www.rodeo.jp.net

  34. See you, again! :)