CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説

2017/12/02 2019/09/28

CakePHP3で JavaScriptを読み込む処理

　
CakePHP3で JavaScriptを読み込む処理の基本形から、JavaScriptの処理をブロック化してバッファリングする方法を解説していきます。
　
また、JavaScriptだけではなく、CSSも含めて、特定のページに特定の JavaScript、CSSを呼び出す方法を解説しています。
　
　
この記事は、下記のオフィシャルサイトを参考に書いています。
https://book.cakephp.org/3.0/ja/views/helpers/html.html#javascript
https://book.cakephp.org/3.0/ja/views.html#view-blocks
　
　

CakePHP3で JavaScriptを読み込む処理の基本形

CakePHP3で JavaScriptを読み込む処理の基本形・その１

　
CakePHP3で JavaScriptを読み込む処理の基本形として、アプリ内に JavaScriptのファイルが置いてある場合の処理方法です。
　
標準的に JavaScriptを置く場所は「/webroot/js」です。
JavaScriptのファイル名は「script-file.js」とします。
　
記述する対象ファイルは、以下です。
　/src/Template/Layout/default.ctp
　
記述する内容は、以下の通りです。

<?= $this->Html->script('script-file') ?>

1	<?= $this->Html->script('script-file') ?>

　
上記のように記述すると、下記の様に出力されます。

<script src="/js/script-file.js"></script>

1	<script src="/js/script-file.js"></script>

　
HtmlHelperを使って呼び出す場合は、拡張子の「.js」の部分は記述しません。
　
また、HtmlHelperを使って記述するメリットは、環境が変わった時にも柔軟に対応できることです。
そのため、開発段階で「まずは動作させたい」と考えているときは、HtmlHelperを使わなくても問題ありません。
　
　

CakePHP3で JavaScriptを読み込む処理の基本形・その２

　
その１では、標準的な場所である「/webroot/js」にある場合の記述方法でしたが、それ以外の場所にある場合は、ファイルまでのパスを含めて記述します。
　
「/otherdir/script-file.js」を呼び出す場合は、以下のようになります。
　

<?= $this->Html->script('/otherdir/script-file') ?>

1	<?= $this->Html->script('/otherdir/script-file') ?>

CakePHP3で JavaScriptを読み込む処理の基本形・その３

　
その３では、外部のサイトにある JavaScriptを読み込む場合の処理の解説です。
　
実際によく使うであろう「jquery.com」にある「jquery-1.12.4.js」の JavaScriptを読み込む方法は下記の様になります。
　

<?= $this->Html->script('//code.jquery.com/jquery-1.12.4.js') ?>

1	<?= $this->Html->script('//code.jquery.com/jquery-1.12.4.js') ?>

CakePHP3で JavaScriptを読み込む処理の基本形・その４

　
HtmlHelperでは複数の JavaScriptをまとめて読み込む方法も提供されています。
　
　
複数の JavaScriptをまとめて読み込む場合は、下記の様に配列で JavaScriptを指定します。

<?= $this->Html->script(['script-file1','script-file2','script-file3']) ?>

1	<?= $this->Html->script(['script-file1','script-file2','script-file3']) ?>

　
上記のように記述すると、下記の様に出力されます。

<script src="/js/script-file1.js"></script>
<script src="/js/script-file2.js"></script>
<script src="/js/script-file3.js"></script>

CakePHP3で JavaScriptをブロック化しバッファリングする

　
「CakePHP3で JavaScriptをブロック化しバッファリングする」と書いてしまうと、私のように、何を言っているのか分からない方もあるかと思います。
　
書き換えると「JavaScriptを、特定のページだけに、特定の JavaScriptを読み込めるようにしたいときに使える仕組み」です。
　
もっと平たく言うと、「この JavaScriptは、このページだけで読み込みたい。」「ページごとに読み込む JavaScriptを振り分けたい。」というときに使える仕組みです。
　
　
例えば「CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説」「jQuery UI DatePickerの導入の方法。および、カスタマイズ方法の解説」「jQuery UI DatePickerに時間を入力できる機能を追加する方法解説」の解説の中で利用していますが、「DatePicker」の JavaScriptは、「DatePicker」を使うページが表示されるときだけ読み込まれるようにしています。
　
そのため、ここでのサンプルもその「DatePicker」を元に解説していきます。
　
　
また、「DatePicker」と同じくらい入力フォームに導入する場面があると思われる WYSIWYGエディタの導入方法については下記に記事を書いていますので、あわせて参考にしてください。
WYSIWYGエディタのCKEditor 4を設置、カスタマイズ、日本語化の方法を解説
 WYSIWYGエディタのCKEditor 5を設置、カスタマイズ、日本語化の方法を解説
 CakePHP3にWYSIWYGエディタのCKEditor4を設置、カスタマイズ方法を解説
　
　

ブロック化してバッファリングする JavaScriptを記述する

　
まずは、処理に必要な JavaScriptを記述します。
　
記述する対象ファイルは、以下です。
　/src/Template/*****/add.ctp
　/src/Template/*****/edit.ctp
　
下記のソースコードを追記します。
追記する箇所は、ファイルのどこでも OKですが、個人的には分かりやすさを優先して、ファイルの先頭に追記しています。
　

<?= $this->Html->scriptStart(['block' => true]) ?>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
<?= $this->Html->scriptEnd() ?>

<?= $this->Html->scriptStart(['block' => true]) ?>

$( function() {

$( "#datepicker" ).datepicker();

} );

<?= $this->Html->scriptEnd() ?>

　
「scriptStart」「scriptEnd」と書かれていますので、分かると思いますが、1行目がスクリプトのスタートの記述で、最後の行が終了の記述です。
　
この中に記述されたスクリプトをブロック化してバッファリングするための処理になります。
　
上記のように記述すると、下記の内容がバッファリングされます。

<script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
</script>

$( function() {

$( "#datepicker" ).datepicker();

} );

</script>

バッファリングした JavaScriptを編集する処理を記述

　
前項でバッファリングした JavaScriptを HTMLに編集する処理は以下の通りです。
　
記述する対象ファイルは、以下です。
　/src/Template/Layout/default.ctp
　
記述するソースコードは以下になります。

<?= $this->fetch('script') ?>

1	<?= $this->fetch('script') ?>

　
これを記述した場所に、先にバッファリングした JavaScriptのソースコードが記述されます。
　
そのため、「<head>～</head>」の間に記述するのか、「</body>」の直前に記述するのかは、適宜決めてください。
（表示スピードを高速化するため、一般的には「</body>」の直前に置くことが多いです。）
　
　
こうすることにより、バッファリングした JavaScriptがあるテンプレート（ここでは、「add.ctp」「edit.ctp」）が呼ばれたときのみ、「DatePicker」の JavaScriptが読み込まれることになり、テンプレートごとに必要となる JavaScriptを個別に読み込むことができるようになります。
　
　
ちなみに、「$this->fetch('script')」は、デフォルトのテンプレートにはあらかじめ記述がありますので、わざわざ追加する必要はなさそうです。
　
　

CakePHP3で JavaScriptをブロック化しバッファリングする・その２

　
先の項目は、JavaScriptの処理を下記の様に「scriptStart()」「scriptEnd()」を使って、JavaScriptをブロック化して、JavaScriptを書く場所と、編集する場所の自由度を増やす、という仕組みでした。

<?= $this->Html->scriptStart(['block' => true]) ?>
        ：
<?= $this->Html->scriptEnd() ?>

<?= $this->Html->scriptStart(['block' => true]) ?>

：

<?= $this->Html->scriptEnd() ?>

　
　
じゃぁ、外部のファイルを読み込むときはどうするの？
という場合の対処方法がこの項の解説です。
　
外部ファイルを読み込むときはもっと簡単で、下記の様に、JavaScriptを読み込む処理に「,[‘block’ => true]」を追加するだけです。

<?= $this->Html->script('script-file',['block' => true]) ?>

1	<?= $this->Html->script('script-file',['block' => true]) ?>

　
これで、「script-file.js」はブロック化されますので、下記の「fetch()」が記述されているところに編集されます。

<?= $this->fetch('script') ?>

1	<?= $this->fetch('script') ?>

CakePHP3で CSSをブロック化しバッファリングする

　
先の項目は、JavaScriptを読み込む処理に「,[‘block’ => true]」を追加することで、JavaScriptをブロック化する処理の説明でした。
　
これと同じ方法で CSSもブロック化することが可能です。
　
CSSの標準的な読み込みの方法は、下記の通り JavaScriptとほぼ同じで、「script」を「CSS」に置き換えるだけです。

<?= $this->Html->css('teststyle') ?>

1	<?= $this->Html->css('teststyle') ?>

　
これに、「,[‘block’ => true]」を追加することで、CSSをブロック化することができます。

<?= $this->Html->css('teststyle',['block' => true]) ?>

1	<?= $this->Html->css('teststyle',['block' => true]) ?>

　
呼び出す方法も「fetch()」の「script」を「CSS」に置き換えるだけです。
　

<?= $this->fetch('css') ?>

1	<?= $this->fetch('css') ?>

CakePHP3でなんでもブロック化して編集する

　
先の項目では、JavaScriptと CSSを呼び出す HtmlHelperを利用してブロック化する処理を解説してきました。
　
ですが、CakePHP3では、JavaScriptや CSSだけではなく、何でもブロック化することができて、それを自由に望む場所に編集することができる仕組みが用意されています。
　
　

JavaScriptをブロック化する方法・CakePHP3.4

　
下記を「add.ctp」「edit.ctp」に記述します。
これで、「start()」「end()」で囲まれた記述がブロック化されます。

<?= $this->start('testscript') ?>
<script>
  $( function() {
    $( "#datepicker2" ).datepicker();
  } );
</script>
<?= $this->end() ?>

<?= $this->start('testscript') ?>

$( function() {

$( "#datepicker2" ).datepicker();

} );

</script>

<?= $this->end() ?>

　
「start()」のパラメーターとして記述してある「testscript」が、ブロックの名前として指定したものです。
　
そして、それを下記の通り「default.ctp」に記述します。

<?= $this->fetch('testscript') ?>

1	<?= $this->fetch('testscript') ?>

　
これで、前項で説明した JavaScriptと同じ内容が編集されます。
　
　

JavaScriptをブロック化する方法・CakePHP3.6　2018.05.09　追記

　
CakePHP 3.4では上記の記述方法でも問題ありませんでしたが、CakePHP3.6では「Warning (4096): Object of class App\View\AppView could not be converted to string [APP/Template\Topics\add.ctp, line **]」のエラーが出る場合があるようです。
　
その場合は、下記の様に記述を変更します。
　

<?php $this->start('testscript') ?>
<script>
  $( function() {
    $( "#datepicker2" ).datepicker();
  } );
</script>
<?php $this->end() ?>

<?php $this->start('testscript') ?>

$( function() {

$( "#datepicker2" ).datepicker();

} );

</script>

<?php $this->end() ?>

　
何が違うかというと、1行目と最後の行の「<?=」となっていたところが「<?php」となっている点です。
　
CakePHP3.4で上記の記述方法をしてもエラーは出ませんので、常に上記の記述方法を採っても問題なさそうです。
　
　

テンプレートファイル（エレメント）をブロック化する方法

　
上記の例は JavaScriptなので紛らわしいですが、下記の様に、テンプレートファイル（エレメント）を読み込む場合にも使えます。
　

<?= $this->start('sidebar') ?>
<?= $this->element('sidebar/recent_topics'); ?>
<?= $this->end() ?>

<?= $this->start('sidebar') ?>

<?= $this->element('sidebar/recent_topics'); ?>

<?= $this->end() ?>

　
下記を「default.ctp」に記述することでその場所に読み込んだテンプレートファイルが編集されます。

<?= $this->fetch('sidebar') ?>

1	<?= $this->fetch('sidebar') ?>

　
これを利用することで、特定の画面にだけ表示するサイドバーの処理を簡単に実装することができるようになります。
　
　

ブロック化を利用して OGPやパンくずを設定する方法・CakePHP3.6　2019.09.28　追記

　
ここで紹介したブロック化の処理を利用することで OGPを設定することもできるようになります。
　
レイアウトファイルに OGPを編集する箇所に「fetch」を記述し、テンプレートファイル側で OGPに記載する内容を編集する、という仕組みです。
詳しくは下記の記事を参考にしてください。
CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する
 CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定
 CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
 CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説
　
　

- CakePHP 3.x 4.x CakePHP3

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: CakePHP3のルーティング（routes.php）の変更が反映されない時はキャッシュのクリアを

CakePHP3でルーティングの設定変更をしたけど反映されない！そんなときは慌てず騒がずキャッシュをクリアしよう！ルーティングの設定もキャッシュされることがあるらしい。

: CakePHP3のCakeDC/Usersのログイン後のリダイレクトとユーザ権限管理の設定解説

CakeDC謹製Usersプラグインの紹介。ログイン認証後にリダイレクトする先の設定方法についての解説と実運用するために必要なコツを解説。便利な仕組みも仕様の理解があって初めてうまく使いこなせる。

: CakePHPのバリデーションを入力値・項目の条件によって変える方法を解説

入力された値によってバリデーション（入力チェック）の内容を切り替える。その処理をCakePHPで実装する方法を解説。条件ごとに unset関数を使ってバリデーションを削除する、という方法を採る。

: CakePHP3で保存前にバリデーション結果を取得する2つの方法

CakePHP3でデータベースに値を保存する前にバリデーションを行い、その結果によって処理を振り分ける方法について解説。「$topic->errors()」と「$topic->hasErrors()」の2つの方法がある。

: CakePHP3のForm Helperの使い方のまとめ

CakePHP3になりフォームヘルパーの使い方も大きく変わりましたので、使い方をまとめました。基本的な使い方からプラスアルファの便利な使い方まで紹介。

: CakePHP 2.3でファイルのアップロード処理を作る

CakePHPでプラグインを使わないファイルアップロード処理を解説します。簡単です。DBにファイルを格納する方法も。

: CakePHP3でassociatedを使って関連データをまとめて保存する方法（hasOne、hasMany、belongsTo）

CakePHP3で関連データをまとめて保存する方法。hasOne、hasMany、belongsTo等の関連データはassociatedを追加することでまとめて保存することができます。

: CakePHP3でシェルを作成しコマンドラインから実行・CakePHP2との違い

CakePHP3のシェルスクリプトを作成し、コマンドラインから実行する方法を解説。複数単語をつなげる場合の対応方法がCakePHP2より制限が厳しくなったのでCakePHP3の命名規則の確認が必要だ。

: CakePHP3チュートリアルで日付と時刻のDateTimeでエラーが出たときの対処方法

CakePHP3のブックマークチュートリアルには記載ミスもあり、そのまま動かない個所もある。CakePHP3では namespaceを使うようになったので、classを呼び出すときに￥を追加する必要が！

: CakePHP 2.3でファイルをアップロード・その2　ファイル名を乱数で設定

CakePHPのアップロードするファイル名を乱数で変更しセキュリティを高める方法を解説。

PREV: CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
NEXT: jQuery UI DatePickerの導入の方法。および、カスタマイズ方法の解説

日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説

CakePHP3で JavaScriptを読み込む処理

CakePHP3で JavaScriptを読み込む処理の基本形

CakePHP3で JavaScriptを読み込む処理の基本形・その１

CakePHP3で JavaScriptを読み込む処理の基本形・その２

CakePHP3で JavaScriptを読み込む処理の基本形・その３

CakePHP3で JavaScriptを読み込む処理の基本形・その４

CakePHP3で JavaScriptをブロック化しバッファリングする

ブロック化してバッファリングする JavaScriptを記述する

バッファリングした JavaScriptを編集する処理を記述

CakePHP3で JavaScriptをブロック化しバッファリングする・その２

CakePHP3で CSSをブロック化しバッファリングする

CakePHP3でなんでもブロック化して編集する

JavaScriptをブロック化する方法・CakePHP3.4

JavaScriptをブロック化する方法・CakePHP3.6　2018.05.09　追記

テンプレートファイル（エレメント）をブロック化する方法

ブロック化を利用して OGPやパンくずを設定する方法・CakePHP3.6　2019.09.28　追記

CakePHP3の関連記事

GoogleAdwords

GoogleAdwords

Message コメントをキャンセル

関連記事

CakePHP3のルーティング（routes.php）の変更が反映されない時はキャッシュのクリアを

CakePHP3のCakeDC/Usersのログイン後のリダイレクトとユーザ権限管理の設定解説

CakePHPのバリデーションを入力値・項目の条件によって変える方法を解説

CakePHP3で保存前にバリデーション結果を取得する2つの方法

CakePHP3のForm Helperの使い方のまとめ

CakePHP 2.3でファイルのアップロード処理を作る

CakePHP3でassociatedを使って関連データをまとめて保存する方法（hasOne、hasMany、belongsTo）

CakePHP3でシェルを作成しコマンドラインから実行・CakePHP2との違い

CakePHP3チュートリアルで日付と時刻のDateTimeでエラーが出たときの対処方法

CakePHP 2.3でファイルをアップロード・その2　ファイル名を乱数で設定

WordPress投稿にPHPを記述するショートコードの使い方add_shortcode

コピーコンテンツ対策.htaccessで直リンク禁止しリダイレクトで対応

評価点投票プラグイン10個を比較！WordPressで口コミサイトを構築

BackWPupでバックアップ・リストア（復元）の具体的手順

コンパクトキーボード・KEK-EA9AU・FKB1420の魅力

CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説

CakePHP3で JavaScriptを読み込む処理

CakePHP3で JavaScriptを読み込む処理の基本形

CakePHP3で JavaScriptを読み込む処理の基本形・その１

CakePHP3で JavaScriptを読み込む処理の基本形・その２

CakePHP3で JavaScriptを読み込む処理の基本形・その３

CakePHP3で JavaScriptを読み込む処理の基本形・その４

CakePHP3で JavaScriptをブロック化しバッファリングする

ブロック化してバッファリングする JavaScriptを記述する

バッファリングした JavaScriptを編集する処理を記述

CakePHP3で JavaScriptをブロック化しバッファリングする・その２

CakePHP3で CSSをブロック化しバッファリングする

CakePHP3でなんでもブロック化して編集する

JavaScriptをブロック化する方法・CakePHP3.4

JavaScriptをブロック化する方法・CakePHP3.6 2018.05.09 追記

テンプレートファイル（エレメント）をブロック化する方法

ブロック化を利用して OGPやパンくずを設定する方法・CakePHP3.6 2019.09.28 追記

CakePHP3の関連記事

GoogleAdwords

GoogleAdwords

Message コメントをキャンセル

関連記事

JavaScriptをブロック化する方法・CakePHP3.6　2018.05.09　追記

ブロック化を利用して OGPやパンくずを設定する方法・CakePHP3.6　2019.09.28　追記