デザイナー 向 けCakePHP 勉 強 会 1 CakePHPのデザイン 周 辺 ECWorks 滝 下 真 玄 (MASA-P) http://www.ecworks.jp/ info@ecworks.jp @ecworks_masap
自 己 紹 介 CakePHPのデザイン 周 辺 1
自 己 紹 介 CakePHPのデザイン 周 辺 2
このセッションの 着 地 点 と 内 を 編 集 すればCakePHPに デザインが 適 用 できる CakePHPのデザイン 周 辺 3
CakePHPの 仕 組 み CakePHPのデザイン 周 辺 4
CakePHPの仕組み HTMLの場合 HTMLファイルが 呼び出されるのみ リクエスト サーバ処理 レスポンス 5
CakePHPの仕組み PHPの場合 各処理の役割は任意 DBアクセス 計算 表示などは 好きなところに実装 処理 A リクエスト 処理 B 処理 C サーバ処理 レスポンス 6
CakePHPの仕組み PHPの場合 キライ 皆さんが苦手な部分 <html> <?php ほにゃらららららららら?> <?php ほにゃらららららららら?> <?php ほにゃらららららららら?> </html> 7
CakePHPの仕組み WordPressの場合 ここを編集して デザインを適用 Index.php リクエスト テーマ サーバ処理 レスポンス 8
CakePHPの仕組み WordPressの場合 <?php get_header();?> index.php header.php single.php sidebar.php archives.php footer.php <?php the_post();?> <?php get_sidebar();?> <?php get_footer();?> index.php 9
CakePHPの仕組み WordPressの場合 キリトリセン キリトリセン <html> header.php index.php sidebar.php キリトリセン footer.php </html> 10
CakePHPの仕組み CakePHPの場合 ここを編集して デザインを適用 コントローラ モデル(M) (C) リクエスト ビュー(V) サーバ処理 レスポンス 11
CakePHPの仕組み Q モデル ビュー コントローラ(MVC)ってなに モデル ビュー コントローラ データベースなどのデータ ソースと連携し データを 入出力したり 加工をした りする ビジネスロジック 処理結果やデータを表示 する つまり動的にHTML 等を出力する モデルやビュー あるいは 各処理間でデータを 受け流したり 処理の制御 を行う 渡 12
CakePHPの仕組み CakePHPなどフレームワークの処理の基本単位 コントローラとアクション ブログシステムのコメント投稿機能を実現する Postsコントローラ 投稿データを追加する 投稿データを編集する 投稿データを削除する addアクション editアクション deleteアクション 13
CakePHPの仕組み URLとコントローラ アクションの関係 http://www.example.com /controllers/action/params/ コントローラ名は複数形 小文字で名前を定義する アクションは小文字なら何でもOK 上記はデフォルトのもので 定義することでURLを変更 することが出来る(つまりこのようになるとは限らない) 14
CakePHPの仕組み コントローラとビューの関係 PostsController 基本はアクションに対して 一対一の関係 しかし処理によって別のものを 呼ぶことも可能 add add edit delete edit or edit_member delete 15
CakePHPの仕組み CakePHPのビュー ビューテンプレート(ファイル) 各アクションに一対一でひもづけるファイル 一般的に ビュー という場合はこのファイルのことを指す レイアウト コントローラーで共通の ビューを構成するもっとも外枠の部分 WordPressで言えばindex, header, footerを足しあわせたもの エレメント 各ビュー共通で使えるパーツ的なもの なくてもOK 16
CakePHPの仕組み <html> レイアウト CakePHPのビュー キリトリセン エレメント ビューテンプレート (ファイル) エレメント </html> 17
デザイン関連ファイルの配置 18
デザイン関連ファイルの配置 一般的に CakePHPのファイルは サーバにもこの通りに展開される で囲ったところが重要な場所 19
デザイン関連ファイルの配置 エレメントファイルを 格納する場所 エラー表示ビューを 格納する場所(今回は省略) カスタムヘルパーを 格納する場所(今回は省略) レイアウトファイルを 格納する場所 (今回は省略) postsコントローラに対する ビューを格納する場所 (今回は省略) 20
デザイン関連ファイルの配置 各アクションに対する ビューファイル 制御によって異なるビューを 呼び出したい場合も 同 コントローラ内にファイルを 配置する 21
デザイン関連ファイルの配置 (今回は省略) (今回は省略) (今回は省略) (今回は省略) デフォルトのレイアウト コントローラで特に指定しなければ この名前のファイルが適用される そのほかに使用したい レイアウトがあれば配置する 22
デザイン関連ファイルの配置 (今回は省略) 空のファイル エレメントファイル 23
デザイン関連ファイルの配置 CSSファイルを格納する場所 その他ファイルを格納する場所 画像ファイルを格納する場所 JavaScriptファイルを格納する場所.htaccessファイル (今回は省略) ファビコン(favorite iconファイル) リクエスト時に必ず呼ばれるindex.php (今回は省略) 24
デザイン関連ファイルの配置 パス指定 サイト内リンクに関する注意点 views/ posts/ index.ctp webroot/ img/ picture.png 例えばビュー内で画像を表示したい 場合 webrootがdocument rootに なるため 相対パスで表現する ことは出来ない../../webroot/img/picture.php /img/picture.php 25
デザイン関連ファイルの配置 パス指定 サイト内リンクに関する注意点 デフォルトのコントローラ アクションに対するURLは デ フォルトでは http://~/controller名/アクション名 だが 設計仕様によってはこのルールにならない場合がある リンク切れの可能性も これらを解決するために ヘルパーを活用する 26
ビューの記述 27
ビューの記述 <html> レイアウト CakePHPのビュー キリトリセン エレメント ビュー(ファイル) エレメント </html> 28
ビューの記述 レイアウト <html> レイアウト <?php echo $content_for_layout;?> </html> ビューを表示する場所 最低限これがないと ビューが反映されない 29
ビューの記述 ビュー(ファイル) エレメント ビュー(もしくはエレメント) <?php echo $this->html->image( picture.png );?> <?php echo $this->html->link( カートを見る, array( controller => carts, action => viewcart ));?> <?php echo $this->element( example );?> 30
ビューの記述 ヘルパーについて Htmlヘルパー リンクやimage CSSやJavaScriptのインポートなど Formヘルパー フォームタグの生成全般 Paginateヘルパー ページング処理(ページ番号リンクやソーティングなど) などなど 31
このセッションのまとめ viewsとwebroot内を 編集すればCakePHPに デザインが適用できる 32
ご静聴ありがとう ございました 33