Designer friendly framework: Pinoco with PHPTAL
自己紹介 田中 久輝(タナカヒサテル) (株) LOOP.incでPinocoという OSSプロジェクトはじめました
時間も限られていることなので
デザイナーの声 「え、PHPって難しいんでしょう? MVCとかぜんぜんわかんないですよ」
「...でも、できたらいいなぁ」(ここ重要)
Pinoco =  P HP  I s  N ot for  O bject  C oders  O nly. (PHP はオブジェクト指向プログラマだけものじゃないよ ) うごく「Webサイト」を作るための PHPのフレームワーク テンプレー...
PHPTAL
_layout.html <body  metal:define-macro=&quot;body&quot; > <div id=&quot;header&quot;>...</div> <!--!  超かっこいいヘッダ  --> <div ...
content.html <body  metal:use-macro=&quot;_layout.html/body&quot; > <!--  メイン  --> <div id=&quot;main&quot;  metal:fill-sl...
出力結果 <body> <div id=&quot;header&quot;>...</div> <div id=&quot;container&quot;> <div id=&quot;sidebar&quot;> サイドバーコンテンツ </...
+ ↓
プロジェクト初期化 スタティックサイトに .htaccess _gateway.php をコピー。 (必要に応じてファイルパス調整) 以上
スタティックページとしてHTMLにアクセス ↓ 自動的にPHPTALが動く ↓ プログラムなしでfill-slot
Dreamweaverで自然にWYSIWYG編集できる。 「デザインテンプレート変更->全ファイル書き換え」が必要ない。 バージョン管理したくなる。 ->じゃんじゃん教えてあげましょう
基本、静的サイトと同じ作業フロー =静的コンテンツはファイルを足すだけ 「よくわかんないけどアップロードしただけじゃだめなの?」 ->「いいよ、Pinocoだからね」
こんな感じだったのが デザイナー ーーーーーーーーーーーー Dreamweaver Template ーーーーーーーーーーーー 超えられない壁 バージョン管理
こうなる デザイナー ♥ バージョン管理
「でもプログラミングは難しいんでしょう...」
<ul> <li><a href=&quot;note/_default.html&quot;> 仮タイトル </a></li> <li> ダミー行 </li> <li> ダミー行 </li> </ul> こんなデザインしてみたんだけど htd...
じゃあ対応するファイルを作って
フックスクリプトを書く app/hooks/hoge.html.php <?php $this->notes = array( array('link'=>'/note/1.html', title=>'ノート1'), array('link'...
デザインを壊さないよう アトリビュートを挿入 htdos/hoge.html <ul> <li  tal:repeat=&quot;note this/notes&quot; ><a href=&quot;note/_default.html&...
出力 http://localhost/hoge.html <ul> <li><a href=&quot;/note/1.html&quot;>ノート1</a></li> <li><a href=&quot;/note/2.html&quot;...
こんな感じだったのが デザイナー ーーーーーーーーーーーー プレーンPHP危険 オブジェクト指向 シンタックスエラー ーーーーーーーーーーーー 絶対防壁 プログラミング
こうなる デザイナー ♥ プログラミング
Pinocoを使ってデザイナーと一緒に作業する ↓ PHPerはモテる!
↓ PHP界にWebデザイン方面からIT女子流入! ↓ 「WordPressより自由に作れる」 ↓ PHPer先生モテすぎ
将来 PHP の勉強会の展望
いまんとここんな感じ
Pinocoはどこで手に入りますか?
時間も限られていることなので
Upcoming SlideShare
Loading in...5
×

Pinoco phptal-phpcon-kansai

1,948

Published on

PHPカンファレンス関西 LT
Pinoco PHPTAL

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,948
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Pinoco phptal-phpcon-kansai

  1. 1. Designer friendly framework: Pinoco with PHPTAL
  2. 2. 自己紹介 田中 久輝(タナカヒサテル) (株) LOOP.incでPinocoという OSSプロジェクトはじめました
  3. 3. 時間も限られていることなので
  4. 4. デザイナーの声 「え、PHPって難しいんでしょう? MVCとかぜんぜんわかんないですよ」
  5. 5. 「...でも、できたらいいなぁ」(ここ重要)
  6. 6. Pinoco = P HP I s N ot for O bject C oders O nly. (PHP はオブジェクト指向プログラマだけものじゃないよ ) うごく「Webサイト」を作るための PHPのフレームワーク テンプレートエンジン:PHPTAL推奨
  7. 7. PHPTAL
  8. 8. _layout.html <body metal:define-macro=&quot;body&quot; > <div id=&quot;header&quot;>...</div> <!--! 超かっこいいヘッダ --> <div id=&quot;container&quot;> <div id=&quot;sidebar&quot; metal:define-slot=&quot;sidebar&quot; > ダミー </div> <div id=&quot;main&quot; metal:define-slot=&quot;main&quot; > ダミー </div> </div> <div id=&quot;footer&quot;>...</div> <!--! 超かっこいいフッタ --> </body> define-macro と define-slot
  9. 9. content.html <body metal:use-macro=&quot;_layout.html/body&quot; > <!-- メイン --> <div id=&quot;main&quot; metal:fill-slot=&quot;main&quot; > <h2> メインコンテンツ </h2> <p> ほんとのメインコンテンツ内容 </p> </div> <!-- サイド --> <div id=&quot;sidebar&quot; metal:fill-slot=&quot;sidebar&quot; > サイドバーコンテンツ </div> </body> use-macro と fill-slot
  10. 10. 出力結果 <body> <div id=&quot;header&quot;>...</div> <div id=&quot;container&quot;> <div id=&quot;sidebar&quot;> サイドバーコンテンツ </div> <div id=&quot;main&quot;> <h2> メインコンテンツ </h2> <p> ほんとのメインコンテンツ内容 </p> </div> </div> <div id=&quot;footer&quot;>...</div> </body>
  11. 11. + ↓
  12. 12. プロジェクト初期化 スタティックサイトに .htaccess _gateway.php をコピー。 (必要に応じてファイルパス調整) 以上
  13. 13. スタティックページとしてHTMLにアクセス ↓ 自動的にPHPTALが動く ↓ プログラムなしでfill-slot
  14. 14. Dreamweaverで自然にWYSIWYG編集できる。 「デザインテンプレート変更->全ファイル書き換え」が必要ない。 バージョン管理したくなる。 ->じゃんじゃん教えてあげましょう
  15. 15. 基本、静的サイトと同じ作業フロー =静的コンテンツはファイルを足すだけ 「よくわかんないけどアップロードしただけじゃだめなの?」 ->「いいよ、Pinocoだからね」
  16. 16. こんな感じだったのが デザイナー ーーーーーーーーーーーー Dreamweaver Template ーーーーーーーーーーーー 超えられない壁 バージョン管理
  17. 17. こうなる デザイナー ♥ バージョン管理
  18. 18. 「でもプログラミングは難しいんでしょう...」
  19. 19. <ul> <li><a href=&quot;note/_default.html&quot;> 仮タイトル </a></li> <li> ダミー行 </li> <li> ダミー行 </li> </ul> こんなデザインしてみたんだけど htdos/hoge.html
  20. 20. じゃあ対応するファイルを作って
  21. 21. フックスクリプトを書く app/hooks/hoge.html.php <?php $this->notes = array( array('link'=>'/note/1.html', title=>'ノート1'), array('link'=>'/note/2.html', title=>'ノート2'), array('link'=>'/note/3.html', title=>'ノート3'), ); class がないのに $this がある いきなりインデントレベル 0 からロジック これでこのコードは動きます。 ※ ローカル変数のスコープはファイルで閉じています。ご安心ください。
  22. 22. デザインを壊さないよう アトリビュートを挿入 htdos/hoge.html <ul> <li tal:repeat=&quot;note this/notes&quot; ><a href=&quot;note/_default.html&quot; tal:attributes=&quot;href note/link&quot; tal:content=&quot;note/title&quot; > 仮タイトル </a></li> <li tal:replace=&quot;&quot; > ダミー行 </li> <li tal:replace=&quot;&quot; > ダミー行 </li> </ul> repeat attributes content
  23. 23. 出力 http://localhost/hoge.html <ul> <li><a href=&quot;/note/1.html&quot;>ノート1</a></li> <li><a href=&quot;/note/2.html&quot;>ノート2</a></li> <li><a href=&quot;/note/3.html&quot;>ノート3</a></li> </ul>
  24. 24. こんな感じだったのが デザイナー ーーーーーーーーーーーー プレーンPHP危険 オブジェクト指向 シンタックスエラー ーーーーーーーーーーーー 絶対防壁 プログラミング
  25. 25. こうなる デザイナー ♥ プログラミング
  26. 26. Pinocoを使ってデザイナーと一緒に作業する ↓ PHPerはモテる!
  27. 27. ↓ PHP界にWebデザイン方面からIT女子流入! ↓ 「WordPressより自由に作れる」 ↓ PHPer先生モテすぎ
  28. 28. 将来 PHP の勉強会の展望
  29. 29. いまんとここんな感じ
  30. 30. Pinocoはどこで手に入りますか?
  31. 31. 時間も限られていることなので
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×