play frameworkでscalaテンプレートを使用して画面を構築していたのですが、JavaScriptの実行順についてうまく指定ができなかったのでそのときのメモを残します。
やろうとしていることは、scalaテンプレートで共通部分のレイアウトを切り出し、そこにjQueryなどの共通の参照定義も設定し、必要に応じて各画面から参照設定などを追加すると言うことを行っています。ところが、JavaScriptの参照が読み込まれる順序が正しくないためうまく動作しないという現象に直面しました。この事自体は、Webアプリケーションの開発を行っていればごくごく普通に起こることでしょう。
このような場合、原因は参照しているJavaScriptファイルの読み込み順が問題なわけですからその順序を変更してあげればよいと言うことになるので、早速こちらを参考に修正を行ったわけです。
Documentation: ScalaTemplateUseCases — Playframework ※「moreScripts と moreStyles 相当の変数」のセクションを参照
ところが、どうにもこうにもうまくHTMLが生成されませんでした。そのときの内容の抜粋は以下の通りです。
[scala] @scripts = { <script src="@routes.Assets.at("javascripts/models/ledger_create.js")" type="text/javascript" /> } [/scala]
一見してもごくごく普通のscript定義です。特に間違えているところもないし、おかしなところもない。けれども、これだとscriptタグがbodyタグの終わりを超えて設定されてしまい構築されるHTMLは正しくない状態になってしまうのです。
[html] <html> ... <head> <script ...> <body> ... </body> </script> </head> ... </html> [/html]
とこんな感じで、えらくおかしな状態になってしまうのです。
で、生成されるHTMLを眺めてみたところどうもscriptタグの終わりが自動的に生成されることにより正しくないHTMLが生成されているように思えましたので、試しに次のように修正してみました。
[scala] @scripts = { <script src="@routes.Assets.at("javascripts/models/ledger_create.js")" type="text/javascript"></script> } [/scala]
すると、全く問題なく動作しました。本当に問題はタグの書き方だけだったようです。
とまぁ、つまらない内容ではありますが備忘録としてメモしておきます。
