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 5.x CakePHP3

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

Message コメントをキャンセル

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

: CakePHP3のCakeDC/Usersでログインユーザの所有レコードのみ更新、削除する権限管理の設定方法

CakePHP3のユーザ管理、ログイン認証プラグイン「CakeDC/Users」の権限管理を行う方法やアクセスできるコントローラー、アクションを設定、所有権を持つレコードのみ更新できる設定方法を解説。

: CakePHP4の数値項目は「like %10%」の部分一致検索（find select）はできない

CakePHP4でテーブルの数値項目に対してlike句を使用した部分一致検索を実行するとエラーが発生する。クリエービルダーの不具合だと思われ対処方法が分からない。

: CakePHP3のfriendsofcake/searchでツリーカテゴリーの子階層も含めて検索する方法

CakePHP3のツリービヘイビアを使ったツリーカテゴリーの子階層も含めての検索を検索プラグイン「friendsofcake/search」を使って実現する方法を解説しました。

: CakePHP3で現在処理しているコントローラー名、アクション名を取得する方法

CakePHP3で現在処理しているコントローラー名、アクション名を取得する方法を解説。複数の方法があるが、getParam()メソッドを使う方法が汎用性があって便利かも。

: CakePHP4、5で$_SERVERと同じようにURIを取得する「getUri()」の紹介

PHPでサーバ情報、環境情報を取得する際は「$_SERVER」を利用するが、似たような情報をCakePHPの関数で取得する際は「getUri()」を使用する。取得出来る値は一致するものもあるが、違うものもあり便利な使い方もある。

: CakePHP3でファイルのアップロード処理を自作・解説付き・その１

CakePHP3でファイルをアップロードする処理を、php.netにある「エラーを起こさない」と説明がある処理を参考に作成。サンプルソースとその解説付きで、コピペでも動くし、カスタマイズも簡単！

: CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する

CakePHP3のkeywordsとdescriptionを設定する方法の解説。CakePHP3にはmetaタグを編集するHTMLヘルパーが用意されているためそれを利用すればOK！ポイントはブロック化を有効にすること。

: CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法

CakePHP3でtitleタグ、h1タグのテキストをデフォルトから変更する方法を解説。テンプレートファイルに「$this->assign()」でテキストを指定して「/Layout/defult.ctp」で受け取る。

: CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定

CakePHP3でOGPを設定する方法を解説。metaタグを編集するHTMLヘルパーを利用してOGPのタグを編集する。また、エレメントとして分割することでメンテナンス性も向上させる。

: CakePHPで favicon.icoやapple-touch-icon-144-precomposed.pngが could not be foundのエラーが出るときの対処方法

CakePHPで「CakeDC/Users」などルーティングを行うプラグインを利用するときに、favicon.icoやapple-touch-icon-144-precomposed.pngがNotFoundエラーになることがある。その対処方法の解説。

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のCakeDC/Usersでログインユーザの所有レコードのみ更新、削除する権限管理の設定方法

CakePHP4の数値項目は「like %10%」の部分一致検索（find select）はできない

CakePHP3のfriendsofcake/searchでツリーカテゴリーの子階層も含めて検索する方法

CakePHP3で現在処理しているコントローラー名、アクション名を取得する方法

CakePHP4、5で$_SERVERと同じようにURIを取得する「getUri()」の紹介

CakePHP3でファイルのアップロード処理を自作・解説付き・その１

CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する

CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法

CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定

CakePHPで favicon.icoやapple-touch-icon-144-precomposed.pngが could not be foundのエラーが出るときの対処方法

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　追記