デザイナー向けCakePHP勉強会１
CakePHPのデザイン周辺
ECWorks
滝下 真玄(MASA-P)
http://www.ecworks.jp/ [email protected] @ecworks_masapこのセッションの着地点
○○○と△△△内を
編集すればCakePHPに
デザインが適用できる
【CakePHPの仕組み】
HTMLの場合
リクエスト サーバ処理 レスポンス
HTMLファイルが 呼び出されるのみ
【CakePHPの仕組み】
PHPの場合
リクエスト サーバ処理 レスポンス 処理 A 処理 B 処理 C ・・・ 各処理の役割は任意 DBアクセス・計算・表示などは 好きなところに実装【CakePHPの仕組み】
PHPの場合
<?php ほにゃらららららららら～～～～～～ ?>
皆さんが苦手な部分
<?php ほにゃらららららららら～～～～～～ ?>
<?php ほにゃらららららららら～～～～～～ ?>
<html> </html>キライ
【CakePHPの仕組み】
WordPressの場合
リクエスト サーバ処理 レスポンス Index .php テーマ ここを編集して デザインを適用【CakePHPの仕組み】
WordPressの場合
index.php single.php archives.php header.php sidebar.php footer.php ・ ・ ・ ・ ・ ・<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>
<?php the_post(); ?>
index.php【CakePHPの仕組み】
WordPressの場合
header.php index.php footer.php キリトリセン キリトリセン sidebar.php キ リ ト リ セ ン <html> </html>【CakePHPの仕組み】
CakePHP
の場合
リクエスト サーバ処理 レスポンス コ ン ト ロ ー ラ モデル(M) ビュー(V) (C) ここを編集して デザインを適用【CakePHPの仕組み】
Q：モデル・ビュー・コントローラ(MVC)ってなに？
モデル ビュー コントローラ モデルやビュー、あるいは 各処理間でデータを 受け流したり、処理の制御 を行う 処理結果やデータを表示 する。つまり動的にHTML 等を出力する データベースなどのデータ ソースと連携し、データを 入出力したり、加工をした りする。ビジネスロジック×
渡【CakePHPの仕組み】
CakePHPなどフレームワークの処理の基本単位
→
コントローラ
と
アクション
■ブログシステムのコメント投稿機能を実現する
→Postsコントローラ
・投稿データを編集する
→editアクション
・投稿データを削除する
→deleteアクション
・投稿データを追加する
→addアクション
【CakePHPの仕組み】
URLとコントローラ・アクションの関係
http://www.example.com
/
controllers
/
action
/params/…
• コントローラ名は複数形・小文字で名前を定義する
• アクションは小文字なら何でもOK
• 上記はデフォルトのもので、定義することでURLを変更
【CakePHPの仕組み】
コントローラとビューの関係
PostsController add edit delete add edit_member delete edit 基本はアクションに対して 一対一の関係 しかし処理によって別のものを 呼ぶことも可能 or【CakePHPの仕組み】
CakePHPのビュー
コントローラーで共通の、ビューを構成するもっとも外枠の部分。
WordPressで言えばindex, header, footerを足しあわせたもの
●レイアウト
各アクションに一対一でひもづけるファイル。
一般的に「ビュー」という場合はこのファイルのことを指す
●ビューテンプレート(ファイル)
●エレメント
各ビュー共通で使えるパーツ的なもの。なくてもOK
レイアウト
【CakePHPの仕組み】
ビューテンプレート (ファイル) キリトリセン エレメント <html> </html>CakePHPのビュー
エレメント【デザイン関連ファイルの配置】
一般的に、CakePHPのファイルは サーバにもこの通りに展開される
【デザイン関連ファイルの配置】
エレメントファイルを 格納する場所 エラー表示ビューを 格納する場所(今回は省略) カスタムヘルパーを 格納する場所(今回は省略) レイアウトファイルを 格納する場所 (今回は省略) (今回は省略) postsコントローラに対する ビューを格納する場所【デザイン関連ファイルの配置】
制御によって異なるビューを 呼び出したい場合も、同 コントローラ内にファイルを 配置する 各アクションに対する ビューファイル【デザイン関連ファイルの配置】
そのほかに使用したい レイアウトがあれば配置する デフォルトのレイアウト コントローラで特に指定しなければ この名前のファイルが適用される (今回は省略) (今回は省略) (今回は省略) (今回は省略)【デザイン関連ファイルの配置】
エレメントファイル
(今回は省略) 空のファイル
【デザイン関連ファイルの配置】
CSSファイルを格納する場所 .htaccessファイル (今回は省略) (今回は省略) リクエスト時に必ず呼ばれるindex.php その他ファイルを格納する場所 画像ファイルを格納する場所 JavaScriptファイルを格納する場所 ファビコン(favorite iconファイル)【デザイン関連ファイルの配置】
パス指定・サイト内リンクに関する注意点
views/ posts/ index.ctp webroot/ img/ picture.png例えばビュー内で画像を表示したい
場合、webrootがdocument rootに
なるため、
相対パスで表現する
ことは出来ない
../../webroot/img/picture.php
/img/picture.php
△
×
【デザイン関連ファイルの配置】
パス指定・サイト内リンクに関する注意点
デフォルトのコントローラ・アクションに対するURLは、デ
フォルトでは「http://~/controller名/アクション名」だが
設計仕様によってはこのルールにならない場合がある
→リンク切れの可能性も！！
これらを解決するために「ヘルパーを活用する」
【ビューの記述】
レイアウト ビュー(ファイル) キリトリセン エレメント <html> </html>CakePHPのビュー
エレメントレイアウト
【ビューの記述】
<html> </html>レイアウト
<?php echo $content_for_layout; ?>
ビューを表示する場所 最低限これがないと ビューが反映されないビュー(もしくはエレメント)
