JavaScriptを使ってJavaScriptやCSSファイルを読み込む
以前作った1.0はJavaScriptに環境依存的なコードを書かなければならなかった。これは運用上きついと思ったので、この依存から脱却するためにバージョン2.0を作ってみた。
問題なのは本番と制作環境のパスが1段違ってたりとか、そもそもドメインが違ってたりとかするから、読み込むパスが変わってしまうということ。
これを解決するために、JavaScriptが自分自身のファイルのフルパスを取得できるといいなってのがあった。いわゆるPHPとかで言うところのdirname(__FILE__)みたいなのができないかということ。
でいろいろ調べてみたら、固定値になってはしまうが、自身のJSファイルを読み込んでいるSCRIPTタグのsrc情報を使って、パスを求めることができるという情報があったので、これを組み合わせて、パスの定義を自動化する仕組みを入れてみた。
参考： JavaScript :: 自分自身が設置されているURLを取得する
実際には上記のLoader2.0.jsをダウンロードしていただき、以下の11行目を変更する。
var SELF_TOP_DIR = 'assets/';
ここに指定するパスはLoader2.0.jsが設置されているディレクトリのパスをサイトのルートから記述する。ただし、先頭に「/（スラッシュ）」をつけてはいけないし、最後は「/（スラッシュ）」をつけなければならない。
たとえば、Loader2.0.jsが設置されているパスが、「http://www.example.com/common/js.Loader2.0.js」なら上記パスの指定は以下のようになる。
var SELF_TOP_DIR = 'common/js/';
さらに、サブディレクトリに設置したサイトの場合はサイトのルートからのパスなので、たとえば「http://www.example.com/mysite/common/js.Loader2.0.js」のように一段ディレクトリ階層が下がっていても上記の指定でOK。
それ以外の指定はLoader1.0.jsと変わらない。これは何かと便利だ。もともとタグをたくさん書くのが面倒くさかったから用意したもので、なんらかのユーザビリティを提供するものではないのでパッとしないが、地味に使ってみてはいかかだろうか。