田代砲

2008-03-12
たぶん、Brainfuckインタプリタ並に「一度は自分で作ってみたい」シリーズに
入るかもシレン。というわけで作ってみます。完成品はゴミ箱に入れておきます。

田代砲には２タイプがあって、
　i)　ウィンドウ･オープン型
　ii) インフレーム型

簡単な(i)から。
ID = window.open(url, name, option);
を使う方法です。
open()は「ウィンドウを開く」関数で、
　・IDは、開いたウィンドウの制御に使う(後から、ID.document.write("～～");とかできる。省略可！)
　・windowは今開いてるウィンドウから開くという
　・urlは開くウィンドウのURL
　・nameは開くときに名前をつけます。("_blank"など、初めから存在するnameを指定すると特殊)
　・optionはウィンドウのオプション。("width=200;height=150;"等)
この手法をポップアップと言います
ただし、広告等によく使われていてブラウザの設定でこれを禁止してる場合
が結構あります。そのページだけを例外にするか、(ii)を使いませ于。

(i)型のコードをざっと書くと
<script>
function f(){//	変数urlをURIとしてウィンドウ開く
	window.open(url,"tashiro_a","");
/* ----------------------------------------------------
　ウィンドウの名前を"tashiro_a"で開く。ウィンドウ
　を既に開いた状態で、また"tashiro_a"という名前で
　ウィンドウを開くと、同じウィンドウの中で開くので
　いくつもウィンドウが開いたりしない。便利。
---------------------------------------------------- */
}
url="http://keronotubuyaki.shinobiashi.com/";//目標URI
int=500;	//ウィンドウを開く間隔(ﾐﾘ秒)
function start(){	//ボタンを押して起動
	url=document.F.uri.value;//ここでurlとintを入力
	int=document.F.int.value;//ここではformタグを使ってる
	ID=setInterval("f()",int);
}
function stop(){	//ボタンを押して停止
	clearInterval(ID);
}
</script>

<body>
<form name="F">
URL: <input type="text" name="uri"><br />
間隔: <input type="text" name="int">(ﾐﾘ秒)<br />
<input type="button" value="開始" onClick="start()">　
<input type="button" value="停止" onClick="stop()">　
</form>
</body>
urlとintの入力は<form>タグを用いるのが一番楽だと思う。
この例ではそうしてる。一応できた。

(ii)型
さっきのは、ポップアップだから、ブラウザによっては開かない
ようになってるかもしれないので、次はインフレームを用いる。
このサイト自体にインフレームを使ってるので、心配ないと思う
が、インフレームに対応してない古いブラウザでは使えない。
<iframe src="http://google.co.jp" width=600 height=150>
	対応してないブラウザではこの文章だけが表示されます。
</iframe>
というHTMLタグ
実際に用いてみる
対応してないブラウザではこの文章だけが表示されます。
　　　な感じです。
Googleが表示されないようなら、ブラウザのアップデートを推奨します。
<iframe src="http://google.co.jp" id="tas"></iframe>
と、タグの中にidを指定します。ここでは名前はtasと指定しときます。
idを指定することでJavaScriptで扱いやすくなります。
具体的には
obj = document.getElementById("tas")
がインフレームのオブジェクトです。
obj.src
にインフレームのソース(URL)が入ってます。
変数objを用いずに
document.getElementById("tas").src
と出来ます。ここにURLを代入してインフレームの中身を
入れ替えることができます。

(ii)型のコードをざっくり書いてみる
<script>
function f(){
	obj.src = url;
}
url="http://keronotubuyaki.shinobiashi.com/";
int=500;
function start(){
	obj=document.getElementById("tas");
	url=document.F.uri.value;//前と同じ
	int=document.F.int.value;
	ID=setInterval("f()",int);
}
function stop(){
	clearInterval(ID);
}
</script>

<body>
<form name="F">
URL: <input type="text" name="uri"><br />
間隔: <input type="text" name="int">(ﾐﾘ秒)<br />
<input type="button" value="開始" onClick="start()">　
<input type="button" value="停止" onClick="stop()">　
</form>
<iframe src="" id="tas"></iframe>
</body>

こっちは実際にアクセスしてる様子が目で分かるので
なんかいいです。
ウィンドウを別に開く必要が無いのも見た目がすっきりだし。

あ、自分の作ったプログラムの使用は自己責任ですぜ。
onclick="history.back(-1);"