CakePHP2を美味しく食べたい:$scripts_for_layoutの使い方

この記事は2012年2月14日にアップしたものを復活させました。

画面を作り込んでくると、<head>内で別ファイルのcssやscriptを読み込んで、見栄えや動きをつけてゆくもの。
でも、画面テンプレートを共通化しておくと、「この画面ではこのcssとかjsは不要なんだけど…」でも制作上の都合でそのままにしておきがちかもしれません。小さいファイルであればいいのでしょうが、昨今のJavascriptはJQueryや色々なプラグインなど大きなファイルを読み込ませて動作が重くなりがち。

これを、画面表示で必要な部品(ビュー)を読み込む場合のみ、ヘッダー側で出力してもらうというのがこの$scripts_for_layoutの仕組みです。

使えるようにしておくため、レイアウトファイルの<head>部に
<php? echo $scripts_for_layout;?>
があるか確認。無ければ書き加えましょう。

そして表示させる予定のviewファイルに次のように記述します。

CSSファイルの場合


<?php $this->Html->css(array('hoge/fuga',"fuga",'/hoge'), null, array('inline'=>false)); ?>

この記述の意味を説明すると、味噌は
array('inline'=>false)
この値を指定してあれば、画面出力時に$scripts_for_layoutのある箇所に、cssを読み込むエレメントが出力されるようになっています。

array('hoge/fuga',"fuga",'/hoge')
この記述では3つのcssファイルを読み込ませるためファイルのありかを指定しています
‘hoge/fuga’は/css直下にある/hoge/fuga.cssを指定
‘fuga’は/css直下のfuga.cssを指定
‘/hoge’はルート直下のhoge.cssを指定
しています。
読み込むファイルが1つの場合は

<?php $this->Html->css('hoge', null, array('inline'=>false)); ?>

でもOKです。
ちなみにnullの箇所に文字列を入れるとエレメント出力の際の”rel”値がその文字列になります。ただし、’import’を指定すると<link>ではなく<style>エレメントに変化し読み込み形式が変わります。
※なぜかtrueを指定するとimportと同じ挙動を取るようです。2.0.6で確認しました。

JavaScriptファイルの場合


<?php $this->Html->script(array('script1', 'script2'), array('inline'=>false)); ?>

この記述の意味も上記cssに準じます。

こうしてレイアウトは共通だけれど、表示させるビューによって読み込ませるcssやjsをダイナミックに変更できるため、ページ表現時にいろんなことができそうです。