Js/Cssファイルの読み込みや出力する方法

CakePHPのHTMLヘルパーにはjsファイルやcssファイルを読み込むためのメソッドが用意されています。ファイルを読み込むのに加えて、出力先を複数指定できるようになっています。
また、インラインに出力する関数も用意されており、動的に出力する際にも便利なようにつくられているようです。

javascriptファイルの読み込み

javascriptファイルの読み込みを行うには以下のようにHtmlヘルパーのscriptにパスを指定します。

echo $this->Html->script( 'jsファイル(パス)');
// パスに//が含まれている場合は、CDNから取得される。
echo $this->Html->script( '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
// App.jsBaseUrl(JS_URL)以下のパスを指定。標準では、app/webroot/js
echo $this->Html->script( 'jquery.min.js');

出力する場所を指定

inline指定なしの場合は、scriptメソッドを記述した場所に出力されます。(デフォルトでtrue)
falseにした場合は、デフォルトで$this->fetch('script')に出力されます。

blockを指定することで出力場所を複数分割指定することも可能でhead/body内などそれぞれ指定が可能になります。('block' => 'script'がデフォルト)

// 記述場所に出力する
echo $this->Html->script( 'jquery.min.js', array( 'inline' => true));

// 出力場所を指定
// /app/View/Layouts/default.ctpの$this->fetch('script')に出力される
echo $this->Html->script( 'jquery.min.js', array( 'inline' => false));

// $this->fetch('script')以外に出力
echo $this->Html->script( 'jquery.min.js', array( 'inline' => false, 'block' => 'footer'));
// 出力させたい場所に記述
echo $this->fetch( 'footer')

インラインで出力する「scriptBlock」「scriptStart」「scriptEnd」

以下のようにするとHTML内に直接出力することができます。

<?php echo $this->Html->scriptBlock( 'alert( "alert");', array( 'inline' => false)); ?>

<?php echo $this->Html->scriptStart( array( 'inline' => false)); ?>
alert( "alert");
<?php echo $this->Html->scriptEnd(); ?>

Cssファイルの読み込み

CSSファイルの読み込みもJSファイルとほぼ同じです。

echo $this->Html->css( 'cssファイル');
// パスに//が含まれている場合は、URL(CDNなど)から取得される。
echo $this->Html->css( '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
// App.cssBaseUrl(CSS_URL)以下のパスを指定。標準では、app/webroot/css
echo $this->Html->css( 'bootstrap.min.css');

出力する場所を指定

inline/blockオプションの使用方法はscriptと同じです。inlineをfalseに指定した場合は、デフォルトで$this->fetch('css')に出力されます。
('block' => 'css'がデフォルト)

インラインで出力する「style」

以下のようにキーと値で配列の組み合わせによりスタイルを出力することができます。必要なところでstyleタグは囲って下さい。
動的にスタイルを変えたい場合などに便利です。


<?php echo $this->Html->style(array(
    'background' => '#633',
    'border-bottom' => '1px solid #000',
    'padding' => '10px'
    ),
//  'oneline' => true  // 1行で出力される(デフォルト)
);
  • このエントリーをはてなブックマークに追加

関連記事

コントローラ内でバリデーション処理を呼び出す

CakePHPでは、saveメソッドの際にバリデーション処理も自動で行われますが、save処理と切り離してバリデーションを行うこともできます。このときは、save時と若干異なる処理体系になります。

多言語サイト向けに翻訳ファイルを使って翻訳を行う

CakePHPには、翻訳をビヘイビアを使用する方法と翻訳ファイルを使用する方法の2つがあるそうです。(他にもあるのかな?) 今回は、翻訳ファイルを使用して言語の切り替えを行い、その言語設定をCook

CakeEmailでメール送信(@gmail)

CakePHP 2になって追加されたクラスCakeEmailがシンプルに使えます。これを使用してメール送信を行う処理を実装してみました。 CakeEmailクラスの読み込み /app/Config

CakePHP 2.x インストール

現在まで私が商用・非商用にリリースしているCakePHPアプリケーションは全て1.3.xベースで作成しています。 まだまだロードマップ的には大丈夫そうですが、お客さん向けに納品しているアプリケーショ

ハッシュ関数の選択とハッシュ化処理

CakePHPでは、ログイン時にはpasswordを自動的にハッシュ化して認証を行ってくれますが、そのパスワードを登録する際は、明示的にハッシュ化する必要があります。 ハッシュ関数の選択 ハッ

selectボックスを実装

今まで、selectボックスのgroupを作成するのにSet::Combineを使用していましたが、意外と簡単にできることに気付いてしまったので、ご紹介。(自分だけ知らなかったことに気付いた と言った

Formヘルパーのinputタグのdiv/labelなどの設定

Formヘルパーのinputではデフォルトでは以下のようにdivで囲われて、labelが付与されて出力されます。 CSSのフレームワークなどであらかじめ決まったスタイルがある場合に便利に作られていま

テーブルからランダムにデータを取り出す(find)

CakePHPでテーブルから特定件数のレコードをランダムに取得するには以下のように指定するとできます。 $this->data = $this->Bulkdata->find( 'all',

アップロードファイルのバリデーションルール

CakePHP 2.2や2.3になってファイルアップロードに対するルールがコアバリデーションに追加されているようで、まとめてみました。 コアバリデーション 関連しそうなルールは以下の4つの

バリデーション前後に処理を追加できる「beforeValidate」「afterValidate」

CakePHPでは、「beforeValidate」「afterValidate」というバリデーション処理の前後で追加の処理を実装できるコールバック関数が用意されています。 beforeVali

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑