【htmlとcssで渡されたデザインをCakePHPに反映】

前々回くらいの
http://tatsushim.blogspot.com/2010/12/blog-post.html
のエントリーでちょっと触れた友達と作りたいと思っていたサービス構築の続き。

友達はadobeやcss,htmlができるデザイナーなのだが、CakePHPのことはよくわかっていない。
なので、htmlとcss等でデザイン案をもらっても、それをCakePHPのわかる人が書き換えなくてはならない。
これ結構二度手間で世の中こういう人多いのではないかと思ったので、自分の苦闘ぶりをまとめて公開します。

【cssファイル】
<?php echo $html->css('hoge'); ?>
webrootのcssフォルダ内の「hoge.css」を読みこんでくれます。

【.jpg,pngなどの画像ファイル】
<?php echo $html->image("hoge.png") ?>

上記で
webrootのimgフォルダ内の「hoge.png」を読みこんでくれます。

リンクを貼りたいときは
<?php echo $html->link($html->image("test.png"), '/',null,null,false);?>

【.aiファイルなどのadobe系ファイル】
「CakePHP aiデータ」とかでググってもaiファイルの扱いとかを書いた記事ってほとんどない。
これはなんでかなーと思って考えてみたのだけど、aiファイルってサイズがものすごく大きいから、実際にサイトに使うときには画像の形式にして使用するのが一般的なのかもしれない。
重くて読み込めなかったり、レンタルサーバーの容量が小さいと困るしね。

ちなみに?php echo $html->image("hoge.ai") ?>
でaiファイルを指定しても表示されなかった。

と、ここまで書いて気付いたのだけど、aiファイルって大きさを自分で指定するので、そりゃ表示もしないし、最後に画像にして出来上がりだけを使用するのは当たり前だよね。

やっぱり、何かを扱うときにはその扱うもの自体の知識がなくて困ることがほとんどだと思うので、扱う前にある程度は調査したり勉強しておくことは重要ですね。そうやって知識も広がっていく。

【.jsファイル】
コントローラーに
var $helpers = array('Javascript');
を記述。

ビューに
<?php echo $javascript->link('hoge'); ?>
でOK.hogeにjavascriptのファイル名を記述

javascriptファイルは
/app/webroot/js

に配置。


【その他、自分用軌跡メモ】

もらった画像、css、jsをCakeの指定されたディレクトリに入れた。
早速テンプレートをいじろうとして、もらったソースを確認。

画像のリンクを貼る部分で、デザイナーから
<a href="#"><img src="images/menu_03.gif" alt="" width="120" height="32" id="Image3" onmouseover="MM_swapImage('Image3','','images//menu_over_03.gif',1)" onmouseout="MM_swapImgRestore()" /></a>

といった感じで

ソースが渡されていた。

これを一つ一つ変えるの面倒だなーと思ったので、どうにか短時間でできる方法を考えてみた。
別にCakeを使わなくてもいいなら、パスを指定すれば良いと思ったので、

images　→　/img

という置換をしたところすべてパスが通った。
自分の場合はルートはデフォルト設定なので、webrootになっているようだ。

これ以外にもし現状で良い方法があれば教えてください。

ところどころ指定されている変数名などの意味がわからないので、デザイナーと相談しながら反映していこう。

ひとまずここまで。