CakePHP3でbodyタグ閉じ直前にJavaScriptを読み込むようにしてみた。
datatablesを多用する自分はJQueryやらdatatablesやらのモジュールはheadタグの中で読み込みます。
bodyタグ閉じの直前がセオリーだというのはかろうじて知っているのですが、datatablesモジュール読み込みをbodyタグ閉じ直前に配置すると、デフォルトソート条件なんかが効かないのです。例えばpageLengthとか、orderとかああいうやつです。
いや、自分が書くと効かないだけかもしれませんが、とにかく効かないのです。
で。
datatablesはJQueryやらのモジュールを読み込んだ後じゃないと有効になりませんので、その辺はまとめてheadタグの中にブチ込みます。
良い子の皆様は真似しない方がいいかと思いますが、どうしても動かない時は試しにやってみるといいかもしれません。
とりあえず動かすって大事です。
とは言え、使うJavaScriptを全部headの中で読み込むのは何かモニョっとします。
ですのでView単位で使うJavaScriptはbodyタグ閉じ直前で読み込みたい。
さて、どうしたものか。
普通の方々はCakePHPでプロジェクトを作る方ってレイアウトファイルはどんな風にしてるんでしょう。
自分は至ってシンプルな書き方をしています。
<!-- Layouts/default.ctpだと思って下さい --> <?php <!DOCTYPE html> <html> <head> <?php echo $this->Html->charset(); ?> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title> <?php echo isset($viewTitle) ? $viewTitle : ''; ?> </title> <!-- metaタグとかが必要ならこの辺りで --> <?php echo "CSS読み込んでfetch" ?> <?php echo "仕方ないのでJavaScript読み込んでfetch"; ?> </head> <body> <div id="wrap"> <!-- Elementでヘッダーっぽいのを読み込み --> <?php echo $this->Element('Layout/header'); ?> <div class="row"> <div id="contents" class="container-fluid"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div id="loading"> <!-- ローディング画像 --> <?php echo $this->Html->image('loader.gif'); ?> </div> <!-- Viewの内容 --> <?php echo $this->fetch('content'); ?> </div> </div> </div> </div> <div id="footer"> <!-- Elementでフッターっぽいのを読み込み --> <?php echo $this->Element('Layout/footer'); ?> </div> <!-- これを予め書いておく --> <?php echo $this->fetch('scriptBottom'); ?> <script> // ローディング画像ごにょごにょ $(function() { $("#loading").fadeOut(800); }); </script> </body> </html>
Elementで色々分けるのが好きなのです。
それはどうでもいいのですが、「scriptBottom」というfetchを自分はレイアウトファイルに書いてしまいます。
他の上手いやり方あるのかもしれませんが、まぁこの際いいです。
それでViewの方にはこんな風に書きます。
<?php <?php echo $this->Html->script('search', ['block' => 'scriptBottom']); ?> <!-- 以下はごにょごにょとViewを構成する何かのコード -->
と書くと、上記の例で言うと「js/search.js」がレイアウトファイルで指定したbodyタグ閉じ直前で読み込まれます。
CakePHP2であったinlineみたいなのはなくなってしまっている模様です。よく調べてませんが。
とにかく、HTMLソースを見ると上のレイアウトで言うところの、ローディング画像ごにょごにょ部分の上にsearch.jsが読み込まれていると思います。
今回もまた雑なコードです。