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で確認画面付きのお問い合わせフォームの作り方

CakePHPで確認画面付きのお問い合わせフォーム、メールフォームの作り方をサンプルを提示しながら解説。

: CakePHP 2.3　ID以外のカラムでアソシエーション（連携）をさせる場合の詳細ページの注意点

ID以外のカラムでアソシエーション（連携）させて詳細ページを表示させる際の考え方と注意点をサンプルソースを用いて解説しています。

: CakePHP3で環境変数を設定して本番環境と開発環境を分けて処理をする場合

CakePHP3で開発環境と本番環境とで違う設定ファイルを読み込ませて環境ごとに定数を切り替える方法を解説。Apacheのhttpd.confに環境変数を設定し、それを読み込み判別する。

: CakePHP3のデバッグキット（DebugKit）を強制的に有効、無効に変更する方法

CakePHP3に付属しているデバッグのためのツール、デバッグキットを強制的に有効化、無効化する方法を解説。初期設定では開発環境としてありそうなドメインの場合のみ有効になるように設定されている。

: CakePHP3で他のテーブルのマスタテーブルからセレクトボックス（プルダウンリスト）を作る

他のテーブルのマスタのレコードからプルダウンリストを作成し、選択できるようにするサンプルプログラムと解説。ORMの設定によりデータベースの値を取得し、配列を作成し optionsに与える。

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

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

: CakePHP3でDocumentRootやwebroot、imgフォルダのURLやドメイン、パスを取得

URLやドメイン、フォルダへのパスの取得は、ビューではUrlHelperを使い、コントローラーではRouterクラスを使います。第2引数の指定でURLを取得することも可能。

: CakePHP3でQRコードを作成、表示するライブラリ「cakePHP-QR-Code-Helper」

CakePHPでQRコードを生成するライブラリ「cakePHP-QR-Code-Helper」の紹介。GDライブラリのインストールも必要ないHelperとして提供されているため、ファイルを設置すればすぐに使用可能。

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

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

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

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

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で確認画面付きのお問い合わせフォームの作り方

CakePHP 2.3　ID以外のカラムでアソシエーション（連携）をさせる場合の詳細ページの注意点

CakePHP3で環境変数を設定して本番環境と開発環境を分けて処理をする場合

CakePHP3のデバッグキット（DebugKit）を強制的に有効、無効に変更する方法

CakePHP3で他のテーブルのマスタテーブルからセレクトボックス（プルダウンリスト）を作る

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

CakePHP3でDocumentRootやwebroot、imgフォルダのURLやドメイン、パスを取得

CakePHP3でQRコードを作成、表示するライブラリ「cakePHP-QR-Code-Helper」

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

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

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