PCでファイル保存と同時にスマホなどでリロードされるJSを書いてみた

: 1
: 0
: 0
: 0
Total:: 1

2011年4月14日戯言

概要

エディタで保存して、いちいちブラウザに切り替えてリロード。

この作業ってコーディングしていると腐るほどするので面倒くさくなりますよね。

PCだけで完結するなら昔書いたエントリー（これは便利！エディタで保存と同時に3ブラウザを更新）に書いてあるようにWindowsならどうにかできます。

ですがスマホとかになるとリロードとか非常に大変！
というわけで作ってみました。詳細は↓の動画を見てみてください。

スマートフォンで自動リロード

PCで自動リロード

特徴

使い方は簡単。編集しているファイルにJavaScriptを1～2行挿入するだけ。

1 2	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script src="http://kzms2.com/lab/realtimeReload/master.js"></script>

※jQueryを既に使っている場合は1行ですね。

実際に埋め込んであるページはこちらになります。
※沢山見られてそうでしたこっそりリアルタイム更新してみたいと思います。

とりあえず使ってみたいという方はこちらからファイルを保存、もしくは以下のソースをコピペして、実際に編集してブラウザでひらいてみてください。

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
< meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>無題ドキュメント</title>
<style type="text/css">
 
</style>
</head>
<body>
 
<!-- [jQueryとhttp://kzms2.com/lab/realtimeReload/master.jsが必須です。 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://kzms2.com/lab/realtimeReload/master.js"></script>
<!-- ここまで必須] -->
</body>
</html>

編集しているファイルにJavascriptを1～2行挿入するだけ
エディターを問わずファイルを保存するだけ
相対で記載している外部ファイルの保存でもリロードされる
※linkタグで参照しているCSSや、scriptタグで参照しているJavaScriptなど

ただ、スマホは前提としてサーバーにアップしないとなので、Dreamweaverのサイト機能を使って保存と同時にサーバーにアップしたりしないと恩恵を受けづらいかもしれません。
→詳しくない方は「サイトの定義とサーバーへアップロードする方法」などをご参照ください。

注意点など

JavaScriptを記述してエラーにしてしまうと、リロードが行われなくなります。
→HTML、CSSの編集に留めるのが安全です。
サーバーにアップせずにローカルで作業して、PCでリロードを自動にさせたいという方は相対パスでCSSやJavaScriptなどを書いているとリロードされないので注意してください。
→link・scriptタグの参照先が相対だとリロードされません。
リリースするときなどに、「<script src="http://kzms2.com/lab/realtimeReload/js/master.js"></script>」の指定をはずし忘れないようにしてください。

使っている技術や仕様など

仕様言語

JavaScript（jQuery）
※今話題のnodejsは用いていません…なんかすみません…

仕組みなど

jQueryの$.ajaxを用いて、setIntervalでひたすら関連ファイルをGETして、ファイルに変更がなければそのまま。変更があればリロードという処理をしています。
↓にスクリプトを一部抜粋。

//500msごとに関数を実行
o.ARsetInterval = setInterval(function(){
	var i = 0;
	for(i;i<o .targetPath.length;i++){
		o.getSrc(i);
	}
},500);
//setIntervalで実行される関数
getSrc:function(i){
	var o = this;
	$.ajax({
		url : o.targetPath[i],
		cache : false,
		error : function(){
			clearInterval(o.ARsetInterval);
			return false;
		},
		success : function(html){
			//ここにファイルに変更があったかをチェックするスクリプトを記載。
		}
	});
}

ご意見ご要望などは

@kzms2などに気軽にご連絡くださいませ。
バグなどもあれば出来れば教えてください。

完璧なスクリプトではないですが、マークアップ時の負担が減ると嬉しいです。

kzms2 – html,css,javascript