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

ワザップ!に新サービスが追加されました。名称は「Wazap! Open API」です！

Wazap! Open APIとは

Wazap! Open API とは、ワザップ!のコンテンツを特殊なURLを呼び出すことによって、提携先サイトにワザップ!のコンテンツを自社ブランドなどで掲載することが可 能になるウェブサービスです。技術的な話になりますと、RESTプロトコルによるAPIです。

2008年11月現在、Wazap! Open APIが対応しているプロトコルは、RESTプロトコルのみです。

(続きを読む…)

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の直下に指定する事もできる。

今回はここまで。

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

グラフは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を入れるほうがまだマシかもしれない。

■IE6では透過png背景の中にanchorタグを入れるとリンクがきかなくなるバグがあるので、このバグの回避から。
ちなみにIE6で透過pngを使うにはAlphaImageLoaderを指定する。

■DEMO

■CSS
div#overlay{
background:url(overlay.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’overlay.png’,sizingMethod=’scale’);//for IE6
}

これだとIE6でアンカーリンクが効かないので、アンカーリンクの親エレメントタグにposition:relative;を指定する。

■DEMO

■CSS
div#overlay{
background:url(overlay.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’overlay.png’,sizingMethod=’scale’);//for IE6
}
div#overlayIn{
position:relative;
}

FireFoxでは問題ないのですが、IE6はこれで回避されます。

先日サンフランシスコで開催されたGoogle I/Oディベロッパー・コンファレンスで、参加者に記念Tシャツが配られた。そのTシャツになにがプリントされているか見てみると、

である。写真に写っている模様をバイナリー数字として解釈でき、これを普通の文字に直すと：
(続きを読む…)