エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

      2018/05/13

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を読み込む処理の基本形・その1

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

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

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

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

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

 
 

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

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

 
 

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

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

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

 
 

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ですが、個人的には分かりやすさを優先して、ファイルの先頭に追記しています。
 

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

 
 

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

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

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

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

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

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

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

 
 

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

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

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

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

 
 

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

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

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

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

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

 
これで、前項で説明した 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 **]」のエラーが出る場合があるようです。
 
その場合は、下記の様に記述を変更します。
 

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

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

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

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

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

CakePHP3の関連記事

CakePHP3で「SQLSTATE[23000]: Integrity constraint violation」「SQLSTATE[42S22]: Column not found」などのエラーが出たときの確認するポイント
CakePHP3のfriendsofcake/searchでツリーカテゴリーの子階層も含めて検索する方法
CakePHP3のfriendsofcake/searchでブックマークチュートリアルのタグ検索を実装
CakePHP3の検索プラグイン「friendsofcake/search」の様々な検索の仕方の実装方法
CakePHP3の検索プラグイン「friendsofcake/search」の設置方法・CakePHP3.6対応
CakePHP3でテーブルにカラム(項目)を追加したときに変更するポイントのまとめ
cakephp3 カスタムバリデーションを簡易的に実装する方法
CakePHP3のプラグイン「CakeDC/Users」を日本語化・翻訳ファイルもダウンロード可
CakePHP3のメッセージ日本語化の設定(国際化と地域化の機能の使い方の解説)
CakePHP3でQRコードを作成、表示するライブラリ「cakePHP-QR-Code-Helper」
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 2.x 3.x

GoogleAdwords

GoogleAdwords

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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

  関連記事

CakePHP3でWarning Error: SplFileInfo::openFile()エラーが発生した場合の対処方法
CakePHP3でWarning Error: SplFileInfo::openFile()エラーが発生した場合の対処方法

CakePHP3のキャッシュファイルのパーミッションエラー Error: SplFileInfo::openFile()が発生した場合の対応方法解説。app.phpにキャッシュファイルのパーミッション設定を行い、既存のファイルは削除。

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

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

CakePHP3の検索プラグイン「friendsofcake/search」の様々な検索の仕方の実装方法
CakePHP3の検索プラグイン「friendsofcake/search」の様々な検索の仕方の実装方法

CakePHP3で検索をするプラグイン「friendsofcake/search」の検索条件のカスタマイズ方法の解説。検索項目を増やしたり、以上、以下での検索や、チェックボックスによる検索の方法などを解説。

CakePHP 2.3 主キー(ID)以外のキーで更新方法 updateAll

主キー(ID)以外のカラムをキーとして更新する方法、updateAllの使い方をサンプルを用いて解説します。

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

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

CakePHP3のメッセージ日本語化の設定(国際化と地域化の機能の使い方の解説)
CakePHP3のメッセージ日本語化の設定(国際化と地域化の機能の使い方の解説)

CakePHP3の英語のメッセージを日本語化(多言語化)する手順を解説。オリジナルのメッセージを作成する方法やプログラムで文言を追加する場合の対応なども解説。

CakePHP3のCakeDC/Usersのバリデーションのカスタマイズ方法解説
CakePHP3のCakeDC/Usersのバリデーションのカスタマイズ方法解説

CakeDC謹製Usersプラグインの紹介。Usersのカスタマイズとして入力項目のバリデーションの変更を、プラグインのファイルは触らずオーバーライドにより実装する方法を解説する。

CakePHP3でユーザ定義の定数、変数を設定し、読み込む方法解説
CakePHP3でユーザ定義の定数、変数を設定し、読み込む方法解説

CakePHP3で定数や共通で使う変数をまとめて設定し、プログラム内で読み込む方法を、bootstrap.phpに直接記述する方法と定数ファイルを分ける方法の3つの方法で解説。

CakePHP3で静的ページの作成は webrootか pagesを使う。トップページを参考に解説
CakePHP3で静的ページの作成は webrootか pagesを使う。トップページを参考に解説

CakePHP3で静的なページを設置する場合の方法(webrootとpagesとを活用する方法)を解説。pagesの解説はデフォルトのトップページがどう表示されているかを参考に解説。ルーティングの機能も。

CakePHP3でcomposerを利用してライブラリ・プラグインをインストールする方法

CakePHP3でcomposerを使ってパッケージ(ライブラリ、プラグイン)をインストールする方法の解説。PHPを使うのはCakePHP3が初めてというような方への使い方から解説。