ZendFramework2.5を極めたいと思いがんばってますが、挫けそうな要素いっぱい。
「あ〜CakePHP3にすりゃよかった。日本語充実してるし、なんかいいし。」と、関わった案件の方々からの親身のサポートを受け『Cakeやっているひとってみんな優しかったなぁ思い出すなぁ(遠い目』と、Cakeへの望郷の念を醸すが、やっぱり未来を見据えて英語頑張る....orz....
ちなみにPHP7界隈ではZF2.5が最速です。でもRapid開発ってことなら話は別です↑cake美味しそう
<head>エレメント内に読み込ませたいファイルの順番にハマル
Bootstrapで日時を入力させて、そこに向けてカウントダウンさせようと思いまして、いろいろ漁ってみましたら素敵なのが結構あるんですね。
それで活用させて頂こうと下のように記述。
「ふんふふん♪こういうの順番大事なんだよね〜。間違えるとハマルんだよね〜」と鼻歌交じりに記述。
<!-- 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>
普通、上から下に解釈して出力すると思いますよ。いったいどうなってるんだ、ぶつぶつ。
ということで、順番を逆にしました。
<!-- 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出力時に上から下に吐き出してくれます。