Zend Framework2.5でJQuery,Bootstrap,その拡張を読み込ませて使う場合の注意

More than 1 year has passed since last update.

ZendFramework2.5を極めたいと思いがんばってますが、挫けそうな要素いっぱい。
「あ〜CakePHP3にすりゃよかった。日本語充実してるし、なんかいいし。」と、関わった案件の方々からの親身のサポートを受け『Cakeやっているひとってみんな優しかったなぁ思い出すなぁ(遠い目』と、Cakeへの望郷の念を醸すが、やっぱり未来を見据えて英語頑張る....orz....
ちなみにPHP7界隈ではZF2.5が最速です。でもRapid開発ってことなら話は別です↑cake美味しそう

<head>エレメント内に読み込ませたいファイルの順番にハマル

Bootstrapで日時を入力させて、そこに向けてカウントダウンさせようと思いまして、いろいろ漁ってみましたら素敵なのが結構あるんですね。

それで活用させて頂こうと下のように記述。
「ふんふふん♪こういうの順番大事なんだよね〜。間違えるとハマルんだよね〜」と鼻歌交じりに記述。

<head>エレメント内
<!-- Scripts -->
<?php echo $this->headScript()
    ->prependFile($this->basePath('js/jquery.min.js'))
    ->prependFile($this->basePath('js/bootstrap.min.js'))
    ->prependFile($this->basePath('js/jquery.plugin.min.js'))
    ->prependFile($this->basePath('js/jquery.countdown.min.js'))
    ->prependFile($this->basePath('js/jquery.countdown-ja.js'))
    ->prependFile($this->basePath('js/bootstrap-datetimepicker.min.js'))
    ->prependFile($this->basePath('js/bootstrap-datetimepicker.ja.js'))
    ->prependFile($this->basePath('js/respond.min.js'), 'text/javascript', array('conditional' => 'lt IE 9',))
    ->prependFile($this->basePath('js/html5shiv.min.js'), 'text/javascript', array('conditional' => 'lt IE 9',))
;?><?=PHP_EOL?>

はい。動きません。エラーが出されてハマってしまいました。

実は記述の順番が逆だったんです

上記の順番だとこのように出力されます。

出力結果「こいつ動かないぞ」
<!--[if lt IE 9]><script type="text/javascript" src="/js/html5shiv.min.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="/js/respond.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/bootstrap-datetimepicker.ja.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/js/jquery.countdown-ja.js"></script>
<script type="text/javascript" src="/js/jquery.countdown.min.js"></script>
<script type="text/javascript" src="/js/jquery.plugin.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>

普通、上から下に解釈して出力すると思いますよ。いったいどうなってるんだ、ぶつぶつ。
ということで、順番を逆にしました。

<head>エレメント内
<!-- Scripts -->
<?php echo $this->headScript()
    ->prependFile($this->basePath('js/jquery.countdown.min.js'))
    ->prependFile($this->basePath('js/jquery.countdown-ja.js'))
    ->prependFile($this->basePath('js/jquery.plugin.min.js'))
    ->prependFile($this->basePath('js/bootstrap-datetimepicker.ja.js'))
    ->prependFile($this->basePath('js/bootstrap-datetimepicker.min.js'))
    ->prependFile($this->basePath('js/bootstrap.min.js'))
    ->prependFile($this->basePath('js/jquery.min.js'))
    ->prependFile($this->basePath('js/respond.min.js'), 'text/javascript', array('conditional' => 'lt IE 9',))
    ->prependFile($this->basePath('js/html5shiv.min.js'), 'text/javascript', array('conditional' => 'lt IE 9',))
;?>
<?=PHP_EOL?>

これをhtml出力してみると、

出力結果「こいつ動くぞ」
<!--[if lt IE 9]><script type="text/javascript" src="/js/html5shiv.min.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="/js/respond.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.ja.js"></script>
<script type="text/javascript" src="/js/jquery.plugin.min.js"></script>
<script type="text/javascript" src="/js/jquery.countdown-ja.js"></script>
<script type="text/javascript" src="/js/jquery.countdown.min.js"></script>

これで期待通りの順番に並んで出力され、画面上でも動き始めました。

まぁこれが仕様というならしようがないですが、じゃぁどこかに書いておいてよ!(いやどこかにかいているかもしれないけど。しらっと英語で)と思いましたので、日本語でここにメモっときます。
ハマったときはこれを頼りに抜け出てくださいませ。

PS. CSS読み込み部も同様の仕様で出力されるので、適用の順番にそって厳密にPHPは下から上に記述しましょう。そうすればHTML出力時に上から下に吐き出してくれます。

僕はこれで抜けられました(感謝)

Bootstrap参照エラーの対応

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.