「女の子の服が透けて見える不思議なウィンドウ」がおもしろい！

女の子の服が透けて見える不思議なウィンドウ

※スマートフォンやタブレット端末ではウィンドウの表示が異なるため正しく動作しません。閲覧にはPC用ブラウザ推奨となります。また、もしウィンドウ内の表示位置がずれるときは、ウィンドウの中でマウスを動かしてみてくださいとのこと。

ページにアクセスしたら「Push」ボタン押すと、新しいウィンドウが表示されます。

これを移動させて女の子の方へ移動させてあげると服が透けます。

透けるウィンドウはサイズも変更可能です。

さらにもう一度「Push」ボタンを押して、ウィンドウを2枚重ねると・・・！？

なにげにウィンドウの枚数で表情も変わります。

Internet Explorer

「おい、おれが見たら服が透けないぞ！」というそこのあなた。残念ながらInternet Explorerでは女の子の服が透けません。Internet Explorerでは動作しない仕様なのでInternet Explorerの方は他のブラウザに変えてから出直してください。

Google Chrome - ブラウザのダウンロード https://www.google.com/intl/ja/chrome/l

ちなみにInternet Explorer以外のGoogle ChromeとFirefoxとOperaでは動作を確認できました。「女の子の服が透けないInternet Explorerなんか使ってられるか！」とこれを機にブラウザ変更に意欲的な人にはGoogle Chromeをお勧めしておきます。Google Chromeだったらこういう系は大抵動きますし。

ソースコード

こういうおもしろいページを見るとソースコードを見たくなるのが、コーダーというものです。非常に興味深いのでさっそくソースコードを見てみると実装の仕方は2通りに分かれて書かれていました。やっていること自体は非常にシンプルです。

function timer1()
{
	//	閉じられたウィンドウを削除
	for ( var i=0; i<wnd.length; i++ )
		if ( wnd[i].closed )
			wnd.splice(i,1);
	
	ix = document.getElementById("img").offsetLeft;
	iy = document.getElementById("img").offsetTop;
	
	for ( var i=0; i<wnd.length; i++ )
	{
		var w = wnd[i];
		
		//	親ウィンドウに合わせてスクロール
		w.scrollTo(w.screenX-screenX+scrollX+w.cx-cx,
			       w.screenY-screenY+scrollY+w.cy-cy);
	}
}

１つ目の手法は、PUSHボタンを押すと新たなウィンドウが表示され、子ウィンドウの中にはスクール水着の画像が表示されてウィンドウの動きに合わせてそれをスクロールするというものです。要はウィンドウ内にスクール水着の画像があり、元の画像の上にちょうどコンテンツが被る様に表示させています。

function timer2()
{
	//	閉じられたウィンドウを削除
	for ( var i=0; i<wnd.length; i++ )
		if ( wnd[i].closed )
			wnd.splice(i,1);
	
	ix = document.getElementById("img").offsetLeft;
	iy = document.getElementById("img").offsetTop;
	
	for ( var i=0; i<wnd.length; i++ )
	{
		var w = wnd[i];
		
		//	子ウィンドウ同士の重なっている部分に裸画像
		for ( var j=0; j<N; j++ )
		{
			d = w.document.getElementById("img"+j);
			if ( d )
				d.style.clip = "rect(0px,0px,0px,0px)";
		}
		
		for ( var j=0; j<Math.min(N,wnd.length); j++ )
		if ( i!=j )
		{
			d = w.document.getElementById("img"+j);
			if ( d )
			{
				d.style.clip = "rect("
					+ Math.max(wnd[j].screenY+event.scrollY+wnd[j].cy-(screenY+cy+iy),0) + "px,"
					+ Math.max(wnd[j].screenX+event.scrollX+wnd[j].cx+wnd[j].innerWidth-(screenX+cx+ix),0) + "px,"
					+ Math.max(wnd[j].screenY+event.scrollY+wnd[j].cy+wnd[j].innerHeight-(screenY+cy+iy),0) + "px,"
					+ Math.max(wnd[j].screenX+event.scrollX+wnd[j].cx-(screenX+cx+ix),0) + "px)";
			}
		}
	}
}

２つ目は子ウィンドウ同士の重なっている部分を計算してCSSのclipプロパティを用いて透けた画像の表示を行っています。rect(上,右,下,左)でボックスを切り抜きで表示することができます。これをjavascriptで動的に表示領域やスクロール幅を計算して表示しているようです。

これらはonloadでsetInterval(timer2,300);とsetInterval(timer1,30);として呼び出している訳です。子ウィンドウをこういう風に使って遊ぶページは見たことがなかったので非常に興味深かったです。

赤コーダーになりたい http://d.hatena.ne.jp/kusano_prog/

製作者の@kusano_kさんは赤コーダーになりたいというブログをやっているようなので興味のある方はそちらもご覧ください。

今回の個人的感想＆まとめ

最近はあまりこういうhtml+css+javascript関連の記事は書いていなかったのですが、久しぶりに紹介したくなり急遽記事を書きました。この技術デモのページを見つけたときは正直驚きました。このページは技術云々よりも、まさにアイデアの勝利というような感じ。いや、もちろん技術もありますが、ウィンドウをこのように使うという発想が何よりもすばらしい。こういう新しい発想ができる人がいるからWebはおもしろいです。

中を開いて見てるとやっていること自体はそんなに難しいことはないのですが、こういうものに応用するという発想とかアイデアがすごいと思います。完成されたものの中の仕組みを見てみれば簡単に見えますが、こういう発想に至りそれを実際に実装してみようと思うところまではなかなかいかないものです。そういった意味でも@kusano_kさんはすごい。