ローカル環境でルートパスを読み込むJavascript

投稿日時: 2009/12/06 20:54
カテゴリー: 記事
タグ: javascript, workflow
記事のURL: http://tshinobu.com/blog/archives/221

1年前に自分用に考えたのですが、かなり役立っているのでシェアします。自分のパソコンの環境下において、以下のJavascriptを埋め込むだけで、ルートパスで指定されたファイルを読むこむように補完します。

スクリプト

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(document).ready( function(){
	if(!location.protocol.match("http")){
		var ref = "file:///C:/Documents and Settings/username/デスクトップ/project/html/";
		if( ref.match(/\/$/) ){
			ref = ref.replace(/\/$/, "");
		}
		$("[src^='/']","html").each(function(){
			result = ref + $(this).attr("src");
			$(this).attr("src", result);
		});
		$("[href^='/']","html").each(function(){
			result = ref + $(this).attr("href");
			$(this).attr("href", result);
		});
	}
});
</script>

使い方

上記スクリプトを確認したいページの<head>もしくは<body>内に貼り付け
上記スクリプトの6行目、ref = “”; のなかに補完するサイトルートパスを記述。ルートパスとして扱うローカルのフォルダ名を入力してください。確認したいファイルをFirefoxやOperaで開いたときのパスを入力いただくと確実です。
- Windowsの場合の例
  var ref = "file:///C:/Documents and Settings/username/デスクトップ/project/html/";
- Macの場合の例
  var ref = "file://localhost/Users/username/Desktop/project/html/";
- 共通ファイルがサーバ上にある場合の例
  var ref = "http://yahoo.co.jp/";

共通ファイル（画像、CSS、Javascriptなど）をルートパスで読み込んでいるサイトを開発する際、困るのがブラウザ上で制作物を確認できないこと。サイト定義していたらDreamweaver上では見れますがクロスブラウザチェックができません。そこでJavascriptでDreamweaverのサイト定義と同様のことを実現させました。ルートパスをJavaScript実行時に指定のパスに置換します。

OS X Leopard以降ではApache2が標準でバンドルされていますし、WindowsでもApacheやXAMPPを入れられれば、ローカルでサーバを立てるのも難しくないのですが、ネットワーク上で共同開発をしていると難しかったり、事情があって環境を用意できなかったり、そこまでエネルギーをかけるほどでもない… かといってテスト環境に都度アップするのも面倒です。

そういうときこのJavascriptを使えばちょっとだけ制作が楽になるかもしれません。簡単なスクリプトですが、僕はサイトやページ作成時にはほぼ必ず使用していますので、アイデアとしてブログで発信してみます。