MVCのVを極めしWebデザイナーになる - CakePHP勉強会

MVCのVを極めしWebデザイナーになる

デザイナー向けCakePHP勉強会

twitter tag : #cakephp4d

グレーティブ代表原一浩 @kara_d

twitter id : @kara_d tag : #cakephp4d

➡昨日LionとMacBook Air発売‣ 生き急ぐ人のためにブックマークレットリリース


➡トレンド、統計、デザイン、システム持続可能な自動化されたデザインシステムの追求をテーマに活動をはじめました

何してる人？



➡本日のお話‣ CMSベースのWebサイトと、Webアプリケーションとの考えの違い

‣ Webアプリケーションのデザインのワークフローについて考えてみる

‣ Webデザイナーは、どこまで担当するとより良いものが生み出せるか？

‣ そのためにWebプログラマー、Webデザイナーができること

‣ CakePHPアプリケーションでの学習のステップとツール


➡CakePHPの個人的事例‣ 某省庁向けリポジトリCMS‣ 某社向けビジネスマッチングサービス‣ ファッションブランドのコンテストサイト‣ 某携帯キャリアのスマートフォン向けキャンペーンサイト

‣ 出版社向けキャプチャ機能つき許諾管理システム‣ etc...


➡WebサイトとWebアプリ?


➡Webサイト‣ ここではいわゆるコーポレートサイト狭義の定義としています

‣ 比較的小規模なサイトを仮定‣ CMSで構築‣ 慣れているCMSであれば、デザインからテンプレートの作成まで行なえる

‣ システムはあらかじめ用意されたものを使用。拡張は主にプラグイン

‣ 主な目的は情報提供


➡Webアプリケーション‣ 同じく比較的小規模と仮定‣ データベースの使用が前提‣ 複数の画面遷移を含んでおり、情報よりも機能が価値を生むもの

‣ ページごとに独立した存在ではなく、全体で1つのサービスとして提供される- もちろん現実ではWebサイトの中にWebアプリケーションがあるなど構成は複雑

‣ 主な目的はサービスの利用‣ Ajaxなど動的な要素も多い


➡情報構造設計が主体なサイトと、インタラクションやUXが主体のアプリケーション‣ もちろん、相互ともそれぞれの要素が入る‣ 設計してみただけではわからないことがある

‣ FlashをはじめRIA界隈では、トライ&エラーが頻繁に行なわれている

アジャイルなアプリケーションのデザイン


➡制作におけるタスク


➡ディレクションのタスク‣ IA、要件定義、要求仕様のまとめ、進行管理

➡フロントエンドのタスク‣ グラフィック・UIデザイン‣ コーディング（HTML/CSS）‣ スクリプティング

➡バックエンドのタスク‣ テンプレート化‣ システム構築‣ データベース構築





CMSベースのWebサイト制作





Webアプリケーションの構築





Webアプリケーションの構築

ここに踏み込むのがむつかしい


➡システム側からタスクを分解


➡MVCの設計を振り返ってみる

モデル部分コントローラービュー

モデルコントローラービュー

フォーム PC向け

携帯向けデータベース


➡CakePHP上での構成


➡CakePHPの基本構造‣ モデルとビヘイビア‣ コントローラーとコンポーネント‣ ビューとヘルパー

- エレメント- テンプレート- レイアウト- ヘルパー

専門用語が満載...




ここを把握しよう!!




ここを把握しよう!!

特にここ


➡ビューは3つでだいたい出来てるページ全体レイアウト

共通の部品エレメント

共通の部品エレメント

コンテンツテンプレート


➡何故デザイナーがビューをまるっと担当できると良いのか？‣ インタラクションのデザインで試行錯誤‣ 修正対応の切り分け‣ モデルおよびコントローラーのことを踏まえていながら、ユーザー寄りからの提案

‣ 作業の同時進行による工期の短縮‣ ウォーターフォール型以外の進め方が可能


➡学習ステップ:その0‣ CakePHPの知識を学習しないという選択肢‣ CakePHPに組み込みやすいコーディング

- ブロックでコメント- 繰り返し要素でコメント- idとclass、命名規則をプログラマーサイドで統一

‣ Dreamweaverで確認できる方法とは？- なんかいい方法はないだろうか？- 絶対パスを相対パスで書き出すヘルパーなど作ってみたものの...


➡学習ステップ:その1‣ まず、CakePHPをダウンロード

‣ ダウンロードしたものを解凍

‣ CakePHPのディレクトリ構造を見て把握


➡学習ステップ:その2‣ webroot内だけでページを作ってみる‣ パスは絶対パス(/img/hoge.png)で

index.html


➡学習ステップ:その3‣ pages内でページを作ってみる‣ レイアウト、pages内

default.ctp

hoge.ctp

http://インストールした場所/pages/hoge/

レイアウト

コンテンツ


➡学習ステップ:その4‣ pages内で作ったページを、エレメント、ヘルパーを使ったものに置き換えてみる

ここまで来ればほぼビューの基本はマスター


➡CakePHPは様々な方法でViewを書く事ができる‣ Smarty

- PHPで有名なテンプレート形式- {$blogTitle}みたいに書く

‣ PHPTAL‣ MTCake

- MovableTypeと同様の記法‣ PHP

- 素のPHP


➡MTCake‣ @junnama さんによるプラグイン

- http://powercms.alfasado.net/blog/2011/06/cakephpviewmtmtcake.html

‣ こんな風に書ける

<h1><mt:var name="page_title" escape="html"></h1> <mt:cake:loop model="Post"> <mt:ignore> HOGE </mt:ignore> <mt:if name="__first__"> <table> <tr>


➡それぞれが出来ること


➡プログラマーに出来ること‣ 命名規則の設定 ‣ 基本的にビューが持っている情報をまとめる‣ 画面ごとの使用可能タグ（変数）をまとめる‣ テンプレートシステムの組み込み‣ ファンクショナルタグ（制御機能付きタグの発行）- 使いやすいヘルパーの用意 - 制御構文のひながた

‣ テンプレートの配置ディレクトリの仕様


➡デザイナーも出来る事‣ フレームワークの概念、世界観を把握する‣ バージョン管理システムを扱えるようになる

- Git(ぎっと)など‣ バグ管理システムに参加する

- Redmine(れっどまいん)など‣ テンプレートの記述スタイルを学ぶ


➡ソースの管理とドキュメントの管理‣ ソースもドキュメントもバージョン管理システムを使う

‣ ドキュメントは、ワイヤーフレーム、サイトマップ、仕様書、データベース設計など

‣ テンプレート化する前のHTMLファイルはドキュメントとみなす

‣ ソースとドキュメントを分けることで、バージョン管理でミスが起きない

Git勉強会 for デザイナーやりましょう！


➡共同で、タグ辞典を作ろう‣ WordPressでは、こんな風に用意されている‣ 共同で作ることで、設計力も身に付く


➡ありがとうございました‣ ご質問などありましたら是非!!

‣ mail : [email protected]

CSS Nite in Ginza, Vol.582011年8月18日（木）18:30-20:00アップルストア銀座 3Fシアター

Technology

MVCのVを極めしWebデザイナーになる - CakePHP勉強会