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

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

: CakePHP5でヘルパーから他のヘルパーを読み込む方法・CakePHP4からの変更点

CakePHP5のヘルパーで他のヘルパーを読み込む方法を解説。公式の日本語CookbookはCakePHP4のソースのままで間違っているため注意が必要。CakePHP4からの移行の際も同じ点に注意が必要。

: CakePHP 2.3　Search Pluginで検索処理　その３入力エリア一つで複数の項目を同時に検索する方法

CakePHPの検索プラグイン Search Pluginの検索処理の中で入力エリア一つで複数の項目を同時に検索する方法を解説。

: CakePHP3のメール送信の処理・テンプレート使用・添付ファイル送信も解説

CakePHP3からメールを送信する方法解説。基本的な記述方法を基にして、テンプレートを使う方法、ファイルを添付する方法へと拡張しながら解説。

: CakePHP5系でDeprecatedを回避しfindListでキーと値のカラムを指定して取得する方法

CakePHP4のfindListでキーと値のカラムを指定してテーブルにアクセスする方法がCakePHP5では「Deprecated（非推奨）」となった。推奨の記述方法を解説。

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

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

: CakePHP3の検索プラグイン「friendsofcake/search」の設置方法・CakePHP3.6対応

CakePHP3で検索を担うプラグイン「friendsofcake/search」の紹介。基本的な設置方法の紹介のほか、処理の記述方法のバリエーション、エラーの解説など。CakeDC/searchより導入は簡単！

: CakePHP5系で認証機能のAuthenticationプラグインをインストール・エラー発生注意

CakePHPのユーザ認証に使用するオフィシャルなプラグインAuthenticationだが、CakePHP5系では Authentication Ver.3系を使う必要があるが、公式ChiffonBookが間違えている。

: CakePHP3、CakePHP4、CakePHP5のバージョンを指定してインストールする詳細な手順を解説

CakePHP3のバージョンを指定してインストールする方法を詳細解説。CakePHP3のインストールはComposerを使うため設定もほぼ自動で完了。データベースの接続情報を記載すればアプリ開発のベースが整う。