utBREW

自分のサイト utBREW を立ち上げました。
技術系の話題は そちら に書く予定。

VMware Fusion 3でUbuntuのイメージをコピーするとeth0が見えなくなる

イメージをコピーした場合、MACアドレスが変更されるのでudev設定の修正が必要
乱暴だけど一番簡単な方法は/etc/udev/rules.d/70-persistent-net.rulesを削除し再起動すれば、設定ファイルが自動で生成される。不安な人はmvすると良い

$ sudo rm /etc/udev/rules.d/70-persistent-net.rules
$ sudo shutdown -r now

ファイルダイアログでドットファイルを表示

command + shift + . でドットファイルの表示・非表示がトグル

UbuntuでWordPressの設定

security fixされた3.0.4出たね
前回 Ubuntu Server 10.04にWordPress 3.0.3を入れる - m92oの技術系日記 の続き

パーマリンク設定を変更したらmod_rewriteの設定

mod_rewriteを有効化

$ sudo a2enmod rewrite

rewriteを許可

/etc/apache2/sites-enabled/000-defaultのWordPressの入れてあるディレクトリ設定をAllowOverride allに変更（例えば）

<Directory /var/www/>
    AllowOverride all

設定を変更したらリスタート

$ sudo service apache2 restart

プラグインなどをSSHで自動更新する時はlibssh2-phpを追加

$ sudo apt-get install libssh2-php

Apache2をリスタート

$ sudo service apache2 restart

VMware Fusion 3でNATポートフォワード

/Library/Application Support/VMware Fusion/vmnet-nat.confの[incomingtcp]に「ホストOS ポート番号 = ゲストOS IPアドレス:ポート番号」の書式で記述する。
例えば、ホストOS(Mac)の8080番ポートへのアクセスをゲストOS(172.16.226.128) 80番ポートに転送したい場合は次の通り

[incomingtcp]
8080 = 172.16.226.128:80

Ubuntu Server 10.04にWordPress 3.0.3を入れる

標準パッケージのWordPressは2.9.2と古いので手動で入れることにして、それ以外に必要なMySQL, PHP, Apache2はパッケージから入れる。

必要なパッケージをインストール

$ sudo apt-get install apache2 mysql-server php5 php5-mysql

WordPressを入手し展開

$ wget http://ja.wordpress.org/wordpress-3.0.3-ja.tar.gz
$ sudo tar zxvf /home/m92o/wordpress-3.0.3-ja.tar.gz -C /var/www
$ sudo chown -R root:root /var/www/wordpress

※今回はhttp://サーバアドレス/wordpress/でアクセスするように配置した

WordPress用データベース、ユーザ作成

$ mysql -u root -p
mysql> create database データベース名;
mysql> grant all privileges on wordpress.* to "ユーザ名"@"localhost" identified by "パスワード";
mysql> flush privileges;
mysql> exit

wp-config.php設定

$ cd /var/www
$ sudo cp wp-config-sample.php wp-config.php
$ sudo vi wp-config.php

wp-config.php の

• DB_NAME
• DB_USER
• DB_PASSWORD

を先ほど作ったデータベース、ユーザに修正するのと、
認証用ユニークキー

• AUTH_KEY
• SECURE_AUTH_KEY
• LOGGED_IN_KEY
• NONCE_KEY
• AUTH_SALT
• SECURE_AUTH_SALT
• LOGGED_IN_SALT
• NONCE_SALT

に適当な値を設定
認証用ユニークキーはここで作ると楽

インストール

ブラウザから http://サーバアドレス/wordpress/wp-admin/install.php にアクセスしインストールすれば完了

あとでapacheの代わりにngnixも試したい

CSS3を試してみた

CSS3だとグラデーションやドロップシャドウなどが使えると聞いて試してみた。
Photoshopなどの出番が減りそうだね。

グラデーション

HTML

<h2 id="gradient">Gradient</h2>

CSS

#gradient {
	line-height: 2em;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(#ddd));
}

2段グラデーション

HTML

<h2 id="gradient2">Gradient2</h2>

CSS

#gradient2 {
	line-height: 2em;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, #069), color-stop(0.5, #09d), color-stop(0.5, #06d), color-stop(1.0, #039));
}

角丸

HTML

<h2 id="radius">Radius</h2>

CSS

#radius {
	line-height: 2em;
	background-color: #999;
	-webkit-border-radius: 8px;
}

ドロップシャドウ（ボックス）

HTML

<h2 id="boxshadow">Box shadow</h2>

CSS

#boxshadow {
	line-height: 2em;
	background-color: #999;
	-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

ドロップシャドウ（テキスト）

HTML

<h2 id="textshadow">Text shadow</h2>

CSS

#textshadow {
	line-height: 2em;
	background-color: #999;
	text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

透過（全体）

HTML

<h2 id="opacity">Opacity</h2>

CSS

#opacity {
	line-height: 2em;
	background-color: #999;
	opacity: 0.5;
}

透過（バックグラウンド）

HTML

<h2 id="rgba">RGBA</h2>

CSS

#rgba {
	line-height: 2em;
	background-color: rgba(153, 153, 153, 0.5);
}

回転

HTML

<h2 id="rotate">Rotate</h2>

CSS

#rotate {
	line-height: 2em;
	width: 100px;
	text-align: center;
	background-color: #999;
	-webkit-transform: rotate(-5deg);
	padding: 0;
}

角丸で丸っぽく

HTML

<h2 id="circle">Radius2</h2>

CSS

#circle {
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background-color: #999;
	-webkit-border-radius: 50px;
	padding: 0;
}

吹き出し

HTML

<div id="balloon">
	<div id="b_main">Balloon</div>
	<div id="b_allow"></div>
</div>

CSS

#b_main {
	background-color: #ccc;
	color: #000;
	width: 120px;
	height: 60px;
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
	text-align: center;
	line-height: 60px;
}

#b_allow {
	background-color: #ccc;
	width: 22px;
	height: 22px;
	-webkit-transform: rotate(45deg);
	-webkit-box-shadow: 2px 0 0 rgba(0, 0, 0, 0.6);
	margin-left: 30px;
	margin-top: -11px;
}

画像を滑らかに拡大

HTML

<ul id="scale">
	<li><a href="#"><img src="coda.png"></a></li>
	<li><a href="#"><img src="emacs.png"></a></li>
	<li><a href="#"><img src="firefox.png"></a></li>
</ul>

CSS

#scale li {
	display: inline;
}

#scale li a img {
	-webkit-transform-origin: bottom;
	-webkit-transition: -webkit-transform 0.5s ease-in-out;
}

#scale li a:hover img {
	-webkit-transform-origin: bottom;
	-webkit-transform: scale(1.5);
}

画像が徐々に消える

HTML

<p id="clear"><a href="#"><img src="emacs.png"></a></p>

CSS

#clear a:hover img {
	-webkit-transition: opacity 0.8s ease-in;
}

#clear a:hover img {
	opacity: 0;
}

画像が移動

HTML

<p id="translate"><a href="#"><img src="coda.png"></a></p>

CSS

#translate a img {
	-webkit-transition: -webkit-transform 0.5s ease-in-out;
}

#translate a:hover img {
	-webkit-transform: translate(400px, -200px);
}

アニメーション機能でボタン点滅

HTML

<form action="">
	<fieldset>
		<label for="name">Name</label>
		<input type="text" id="name">
	</fieldset>
	<fieldset>
		<label for="email">Email</label>
		<input type="text" id="email">
	</fieldset>
	<fieldset id="submit">
		<input type="submit">
	</fieldset>
</form>

CSS

form {
	width: 200px;
	background-color: #ddd;
	padding: 10px;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

fieldset {
	border: 0;
}

fieldset#submit {
	text-align: right;
}

label {
	display: block;
	color: #333;
	text-shadow: 0 1px 1px #fff;
	line-height: 1.5em;
	font-size: 14px;
}

input[type="text"] {
	-webkit-border-radius: 3px;
}

input[type="submit"] {
	border: 0;
	padding: 4px 20px;
	-webkit-border-radius: 15px;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#bbb));
	color: #333;
	background-color: #fff;
	text-shadow: 0 1px 1px #fff;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

input[type="submit"]:hover {
	-webkit-animation: pulse 1.5s infinite ease-in-out;
}

@-webkit-keyframes pulse {
	0% {
		-webkit-box-shadow: 0 0 15px rgba(51, 204, 255, 0.3);
	}
	50% {
		-webkit-box-shadow: 0 0 15px rgba(51, 204, 255, 1.0);
	}
	100% {
		-webkit-box-shadow: 0 0 15px rgba(51, 204, 255, 0.3);
	}
}

CSS3の機能を組み合わせて作ったメニュー

HTML

<ul id="menu">
	<li><a href="#">Coda<img src=""></a></li>
	<li><a href="#">Emacs<img src=""></a></li>
	<li><a href="#">Firefox<img src=""></a></li>
</ul>

CSS

#menu li {
	width: 100px;
	background-color: #ddd;
	-webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
	border-bottom: 1px solid #ddd
}

#menu li a {
	display: block;
	width: 100px;
	line-height: 2em;
	color: #333;
	padding-left: 10px;
}

#menu li a:hover {
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	background-color: rgba(0, 102, 102, 0.5);
	-webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

注意

Safari(とChrome)で試したのでベンダープレフィックスに-webkit-をしてある。
Firefox, Operaでもベンダープレフィックスをそれぞれ-moz-、-o-に直すだけで大体は動くと思う。
IEは...知らない。