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 コメントをキャンセル

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

: CakePHP 2.3　Search Pluginで検索処理　その４前方一致検索、後方一致検索、不等号による検索、between句による範囲検索

CakePHPの検索プラグイン Search Pluginの検索処理の中で前方一致検索、後方一致検索、不等号による検索、between句による範囲検索の解説です。

: CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説

CakePHP3でOGPを設定する方法を解説。fetch、assignを使用しレイアウトファイルに編集した変数にテンプレートファイルから値を指定する。これを利用してOGPを編集する。

: CakePHP3でレコードを保存（追加、更新、Insert、Update）する複数の方法を紹介

CakePHP3でレコードを追加、更新（Insert、Update）する記述方法を解説。1件ずつ処理、全件をまとめて処理、条件に該当する複数件のレコードを処理方法をサンプルコードを用いて解説。

: CakePHP3で値を入力直後にバリデーションする方法解説

CakePHP3でバリデーションの実行を保存する時から入力情報を受け取るときに変更する処理の解説。CakePHP3ではnewEntity()の処理でバリデートするため1行追加で対応可能。

: Windows環境の XAMPPを利用して CakePHPの開発する際の注意点

WindowsベースにXAMPPで環境を構築しCakePHP4を利用したWebシステムを構築する際は、大文字と小文字の違いを意識する必要がある。LinuxベースのWebサーバに移動させたときに不具合で動作しないこともある。

: Windows上のXAMPP環境のCakePHPのコマンド実行時に環境変数を指定する方法

CakePHP4のコマンド（シェル）に対して、環境変数を指定して実行する方法を解説。LinuxとWindows上のXAMPPとでは記述方法が異なるため、Windowsのsetコマンドについても詳細解説。

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

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

: CakePHP 2.x系　Viewでのコメントの記述方法など

CakePHPにおいて View、ctpファイルでコメントを記述する方法を解説。

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

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

: CakePHP 2.3　デバッグキット（DebugKit）超初心者向けフォロー講座

CakePHP初心者に向けてデバッグキット（DebugKit）のインストール方法、はまりポイントを解説。

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 コメントをキャンセル

関連記事

CakePHP 2.3　Search Pluginで検索処理　その４前方一致検索、後方一致検索、不等号による検索、between句による範囲検索

CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説

CakePHP3でレコードを保存（追加、更新、Insert、Update）する複数の方法を紹介

CakePHP3で値を入力直後にバリデーションする方法解説

Windows環境の XAMPPを利用して CakePHPの開発する際の注意点

Windows上のXAMPP環境のCakePHPのコマンド実行時に環境変数を指定する方法

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

CakePHP 2.x系　Viewでのコメントの記述方法など

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

CakePHP 2.3　デバッグキット（DebugKit）超初心者向けフォロー講座

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