Wazap! Blog - ワザップ!ブログ

僕はIEのdebugツールにCompanion.JSを使っています。

■公式サイトから

Firebugまでではないが、どこにエラーがあるかは分かるので助かります。

インストールするにはMicrosoft Script Debuggerが必要です。

ちょっと手間がかかるけど、ないより全然良いと思います。

インストール方法（公式サイト）

windowサイズを取得して透過背景を表示させる。

■DEMO
透過背景を表示させる

■CSS

#overlay {
	position: fixed;top: 0px;left: 0px;
	width:100%;height:100%;
	z-index:100;
}
* html #overlay { /* ie6 ハック */
	 position: absolute;
}
#overlayIn{
	background:url(http://blog.jp.wazap.com/wordpress/wp-content/uploads/2008/07/overlay.png);
}
* html #overlayIn{ /* ie6 ハック */
	background-color:#666;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

下記Javascriptで生成されたelementに対してstyleを指定。
*Javascriptで要素を作成する。
ポイントは、IE6で透過pngが使えないので、filter:alphaでカラー#666のアルファ値をさげている事。

■Javascript

function overlay() {
	if (document.documentElement.clientWidth) {
		var div = document.createElement("div");
		div.id = "overlay";
		var divIn = document.createElement("div");
		divIn.id = "overlayIn";
		var width = document.documentElement.clientWidth;
		var height = document.documentElement.clientHeight;
		var divInwidth = divIn.offsetWidth;
		var divInheight = divIn.offsetHeight;
		divIn.style.width = width + "px";
		divIn.style.height = height + "px";
		div.appendChild(divIn);
		var objBody = document.getElementsByTagName("body").item(0);
		objBody.appendChild(div);
	}
	Event.observe('overlay', 'click', function(){
		objBody.removeChild(div);
	});
}

Javascriptはこんな感じ。
windowサイズを取得して、要素を生成して、クリックしたら透過背景が消えるという事をやっています。

後は、ここにコンテンツを生成すれば、簡易型Lightboxの出来上がりです。

その2は、表示させるコンテンツ等をJavascriptで生成するやり方。
完成図はこれ。↓

ちょーシンプルなレイアウト。
Javascriptはこちら↓

<script type="text/javascript">
window.onload = function(){
var div = document.createElement("div");
div.id = "dialog";
div.style.width = '200px';
div.style.height = '200px';
div.style.borderWidth = '1px';
div.style.borderStyle = 'solid';
div.style.borderColor = '#000';
var img = document.createElement("img");
img.setAttribute('src' ,'http://img.jp.wazap.com/images/blog/logo.png');
img.style.marginTop = '57px';
div.appendChild(img);
var objBody = $("dialogSample2");
objBody.appendChild(div);
}
</script>

このスクリプトは単純にdivにborderを指定して、画像をその中に入れただけ。

今回はブログ用にvar objBody = $(”dialogSample2″);としたが、var objBody = document.getElementsByTagName(”body”).item(0);としてbodyの直下に指定する事もできる。

今回はここまで。

そうなんです。これが初代ワザップ!のスクリーンショット。

2代目ワザップ!のロゴは

ワザップ!はもうすぐ7歳になります!

コンビニの弁当、ファーストフードに飽きて、最近は暑くて外にも出る気がしないが、週一度は必ずココでという中華がある。

http://www.cyukaryouri-tokyo.or.jp/23ku/shibuya/tenpo/tenhou_shibuyaten.htm

マイメニューは3年前からシオヤサイアンカケヤキソバ。でも最近は暑いから冷やしパーコー麺に結構ハマっている。

ここの売りは「スピード」、ランチタイム20分で終了、後はオフィスでゆっくりとニュースを読む。

サーバの負荷が分散される様子。凸が続けば問題が無い証。

グラフはmunin、

分散はkeepalived、

サーバはresin！

サイトはワザップ!

ワザップ!ウェブ版リニューアルの為、大忙しの毎日だったけど、ようやく少し時間ができたので、以前から試してみようと思っていたxenでwindowsXPの仮想化に挑戦しました。

OSはgentoo、既にワザップ!のサイトは部分的にxen上のLinux仮想サーバで動いているので、あまり負荷がかかっていないサーバを悪用して実験開始。

xenのホストを初めて設定したときは痛い失敗をいっぱいして、すごく面倒だった記憶があるので、今回も大掛かりな作業になるかなと思ったけど、以外と簡単にWindowsを動かすことができた。もちろん、すでに設定済みのdom0を利用したからだけど．．．

xenの実験以外、今回のWindowsの仮想化の目的はワザップ!を各種ブラウザでテスト検証したいからである、各プログラマがそれぞれあらゆるブラウザを各自のPCにインストールするよりは仮想サーバにリモートでログインしてテストをするほうがいいのではと思ったからである。

まずはWindowsXPのインストールCDをイメージファイルに落とすことに：

dd if=/dev/cdrom of=WindowsXP.iso

次にVMが使用する「ディスク」を作成する。今回は１０GBを確保（1024 * 10）：

dd if=/dev/zero of=windows01.img bs=1024k seek=10240 count=0

次に設定ファイルを作成(windows01.cfg)：

import os, re
arch = os.uname()[4]
if re.search(’64′, arch):
arch_libdir = ‘lib64′
else:
arch_libdir = ‘lib’

kernel = “/usr/lib/xen/boot/hvmloader”

builder=’hvm’

# 今回利用しているホストサーバはパワフルなのでメモリは４GB（自宅のPCだと無理です）
memory = 4096
# 最大メモリを指定（これを忘れて痛い目にあったことがある）
maxmem = 4096
shadow_memory = 16
# ワークステーションとしても使いたいのでCPUは4個（１から4番を使用）
vcpus = ‘4′
cpus = ‘1,2,3,4′
name = ‘windows01′
# ネットワークブリッジ
vif = [ 'type=ioemu, bridge=xenbr0' ]
#vif = [ '' ]
# VMのディスクとXPのインストールCDをマウント
disk = [ 'file:/xen/windows/windows01.img,hda,w', 'file:/xen/windows/WindowsXP.iso,hdc:cdrom,r' ]

device_model = ‘/usr/’ + arch_libdir + ‘/xen/bin/qemu-dm’
# ブートデバイスの順番
# hard disk, cd-rom
boot=”dc”

#vnc=1
#vncviewer=1
#vncconsole=1
#vncpasswd=”
# これがないとブートをしても何も見えない
vfb = [ 'type=vnc' ]
stdvga=0
serial=’pty’
usbdevice=’tablet’
# 日本語キーボード
keymap=’ja’

これでできあがり！

xm create windows01.cfgでdomUを起動、早速ブート画面が見たいのでVNCを利用して接続しようとしたが、なにも出てこないじゃないか．．．

今回利用しているサーバはリモート（データセンター）にあるので接続を拒否されてしまった。

ホストの/etc/xen/xend-config.sxp内でVNCがローカルホスト以外のIPの接続を許可するよう設定、VPN内なのでとりあえず0.0.0.0でおけー

# The interface for VNC servers to listen on. Defaults
# to 127.0.0.1  To restore old ‘listen everywhere’ behaviour
# set this to 0.0.0.0
(vnc-listen ‘0.0.0.0′)

/etc/init.d/xend restart

でxenを再起動。やったぞ!VNCで接続できた!!懐かしのWindowsの青いインストールスクリーンが映っていた！

とりあえず通常通りにセットアップを行い、Windowsが普通に動くようになった。VNCが遅いからLinuxでも利用しているnomachineを使おうかな～と思ったらWindows版がないじゃないかTT

リモートデスクトップを設定してリモート接続、キモチいーなーと思ったのも束の間。Windowsがヒジョーに重い．．．

これだとワークステーションどころじゃない。結局CPU、ディスクのパフォーマンステストツールを動かした結果、CPUｘ４、４GBメモリも与えているのにパフォーマンスの悪さにガッカリ．．．特にDiskのIOが．．．

xen上で動いているLinuxはメチャ早いんだけどな～、自宅のPCを捨ててEC2上にxen+ウィンドウズを動かしてマイPCを建てようと夢見ていたのに～

結局、使い物にならないので今回の実験の結果は「時間を無駄にした」、使わなくなったPCにXPを入れるほうがまだマシかもしれない。