Ubuntuでのvirt-managerを使った仮想環境の構築

Ubuntuでのvirt-managerを使った仮想環境の構築をした。

参考にしたのは

http://symfoware.blog68.fc2.com/blog-entry-962.html

とか

http://d.hatena.ne.jp/m-kawato/20090426/1240699832

とか。

 

端末からとりあえず

$ sudo apt-get install kvm libvirt-bin
$ sudo apt-get install virt-manager

でKVMとvirt-managerをインストール。

この辺で少し試行錯誤していたので、他にも必要なものをインストールする必要があるかもしれない。

また、場合によってはlibvirtdグループに自分のユーザーIDを登録する必要があるらしいが、自分の場合は自動で追加されていた。

 

virt-managerをインストールし終わったら、

$ virt-manager

で起動。

ここから「新しい仮想マシンを追加」を選択して、仮想マシンをインストール。

この辺は画面の指示に従ってやればいいと思う。

 

インストールが終わったら、一旦ホストマシンの端末を立ち上げて、

$ vim /etc/network/interfaces

とやってホストマシンの仮想ブリッジの設定を書く。

DHCPを使う場合はこんな感じ

auto lo
iface lo inet loopback

auto eth1
iface eth1 inet dhcp

auto br0
iface br0 inet dhcp
bridge_ports eth1

固定IPの場合はこんな感じ

auto lo
iface lo inet loopback

auto eth1
iface eth1 inet dhcp

auto br0
iface br0 inet static
    address 192.168.1.50
    netmask 255.255.255.0
    broadcast 192.168.1.255
    gateway 192.168.1.1
    dns-nameservers 192.168.1.1
    bridge_ports eth1

ここで、自分の場合はeth0ではなくeth1だったことに気づかずに無駄に時間を食った。

 

一通り終わったら、ここでホストマシンをリブート。

リブート後、再度virt-managerを起動して、「仮想マシンの情報を表示」をクリック。

その中の、仮想ネットワークインターフェース -> ソースデバイス より先ほど作った仮想ブリッジ名を選択。

自分の場合は「ホストデバイス eth1(Bridge ‘br0’)」だった。

これを忘れてまたハマる。

 

設定が終わったら仮想マシンを再起動して、仮想マシンにpingが通ったら完璧!

これでようやくテストサーバーが組める。

ふぅ…。

Read More

htmlソースの並びを変更せずに左右固定3カラムリキッドレイアウトを行う

ソースの並び順はSEO上重要だと言われています。
並びは基本的に

  1. 見出し
  2. 内容

上記の順になるのが好ましいとされています。

良く見る下記の画像のようなレイアウトを実装する際の例だと
boxline

この場合、見出しは画像タイトル、内容は画像及び「詳細」リンクとなります。
floatとmarginを利用した一般的なリキッドレイアウトでは、htmlソースの順を下記のように変更しなければ厳しいものがあります。

  1. 【内容】画像(width:80px;float:left;を指定)
  2. 【内容】詳細リンク(width:100px;float:right;を指定)
  3. 【見出し】画像タイトル(margin:0 100px 0 80px;を指定)

これだと内容と見出しが逆転してしまっていますので、あまり好ましい状態とは言えません。

そこでpositionを使い多少強引ですが下記のようにする事で、並びを変えずに左右固定の3カラムリキッドレイアウトが可能になります。
html

<div id="floatBox">
	<div class="floatBoxLine">

		<div class="boxTitle">
			<h2>画像のタイトル</h2>
		</div>

		<div class="boxImg">
			<img src="hoge.jpg" alt="画像" width="80" height="80" />
		</div>

		<div class="boxLink">
			<a href="">詳細</a>
		</div>

	</div>
</div>

css

#floatBox {
	width:100%;
}

h2 {
	margin:0;
}

.floatBoxLine {
	width:100%;
	position:relative;
}

	.boxTitle {
		margin:0 50px 0 80px;
		height:80px;
		background-color:#ffcccc;
	}

	.boxImg {
		top:0;
		position:absolute;
		width:80px;
		height:80px;
		background-color:#ccffcc;
	}

	.boxLink {
		position:absolute;
		top:0;
		right:0;
		width:100px;
		height:80px;
		background-color:#ccccff;
	}

Read More