2010年03月08日 00:20

スライド600のアフターフォロー

Image337.jpg
約1年前に買ってもらったスライド600という丈夫な本棚の販売元からハガキが来た。1年に1回はここを点検しろよ、という内容。忘れたころにハガキがくるのは、なかなかしっかりしてると思った。

丈夫な本棚
タグ:
カテゴリ:日記
2010/03/08 Mon 00:20 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2010年03月07日 18:48

大橋ジャンクションのトンネルウォーク

山の手トンネルウォークに参加しました。中央環状線新宿渋谷間の開通前最後の一般公開で大橋ジャンクションを歩いてきました。

大橋ジャンクションは中央環状線と渋谷線の交差するところにあるジャンクションで、中央環状線は3月末に大橋ジャンクションから北、新宿・池袋方面が開通する。品川方面はまだモグラがトンネルを掘っているところ。品川方面も開通したら、2つの路線が十字に交差するジャンクションになり、首都高の完全な十字路のジャンクションとしては初めてとなる。

首都高以外の十字路のジャンクションとしては、三郷ジャンクション、川口ジャンクションとか、信号平面交差の美女木ジャンクションがあるが、首都高で都心の狭い敷地に作ってしまうのはすごい。そのかわり、ほかと違って、ぐるぐると螺旋を描いて高架の渋谷線と地下深くの中央環状線とを結ぶ構造。

走ると目が回りそうだが、単調なループにならないように、円ではなく楕円を描き、道路のペインティングも工夫されている。急カーブでバンクが効かせてあるので、少し歩きにくかった。

一般公開されたのは、中央環状線から大橋ジャンクション渋谷線方面に入った地点から渋谷線の直前までのぐるぐるループの部分。

大橋ジャンクションの内側。
大橋ジャンクションの内側


以下、中央環状線から渋谷線方面へのぐるぐるループを順番に。

東名と都心の分岐案内。中央環状線から大橋ジャンクションに入り、1車線から2車線になるところの案内標識。東名方面は青、都心方面は赤で案内されている。
大橋ジャンクション内の案内標識


シールドマシンの区間にある渋谷線方面の標識。丸いトンネル断面に合わせた変な形の標識。
大橋ジャンクション内の案内標識


ここまでがシールドマシンの区間になる。ここから2車線になる。大橋ジャンクションの渋谷線方面のループを逆に中央環状線に向かって歩いているときの写真。向こう側が中央環状線の新宿方面。丸いトンネル断面の右がふさがれているのは、中央環状線の品川方面からの合流用スペースと思われる。
シールドマシン


ぐるぐるループ内の道の傾斜が分かる図。
大橋ジャンクションの道路の傾斜


中央環状線から渋谷線方面の分岐案内 その3。
東名方面の青と都心方面の赤でわかりやすく案内される。道路にも赤と青でペインティングされている。
大橋ジャンクション内の案内標識


中央環状線から渋谷線方面の分岐案内 その4
大橋ジャンクション内の案内標識


渋谷線方面のぐるぐるループ末端、東名方面と都心方面の分岐部。ここまでずっとループを上っていき、ここから下り坂になる。ここはもう渋谷線よりも高い位置にある。
大橋ジャンクション分岐部


大橋のループ末端から渋谷線東名方面を見える。当然、車がたくさん走っている。
大橋ジャンクションから東名方面


分岐部の緩衝地帯。将来ここにどこかの車がぶつかる予定w
分岐部の緩衝地帯


車両やら模型やらプロジェクターでの映像がたくさん展示されていた。

トンネル内で事故が起きたときにクレーンが使えないので、トラックとかを動かすのに巨大な風船のようなもので持ち上げるらしい。
エアジャッキ


ウニモグ。詳細不明。首都高速道路の車。ナウシカに出てくるオウムみたいだった。
ウニモグ


清掃車両。
清掃車両


大橋ジャンクションの模型。
大橋ジャンクションの模型


山の手トンネルのシールドマシンの図と、解体された後の一部。
シールドマシン
シールドマシン


大橋ジャンクションの写真を投稿しているブログ記事リンク集
http://cafe-b.jugem.jp/?eid=1821
http://doragonfamily.blog56.fc2.com/blog-entry-445.html
http://x3domdom.cocolog-nifty.com/syarin/2010/03/post-df7b.html
http://d.hatena.ne.jp/kaeru_geko/20100307/1267965775
http://shibuya-west.cocolog-nifty.com/blog/2010/03/post-aeb4.html
http://hightimes.cocolog-nifty.com/blog/2010/03/post-905e.html
http://staff.setagaya-1.net/e3122.html
http://www.higuchi.com/item/507
http://blog.goo.ne.jp/faure64/e/f0ec7117780508aad8af50f2a5393031
http://yaplog.jp/rds/archive/63
http://suroisu.blog109.fc2.com/blog-entry-288.html
http://hotoke.cocolog-nifty.com/blog/2010/03/post-dee5.html
http://cyber1991.exblog.jp/13037387/
http://blog.goo.ne.jp/kohonaosumaka/e/b78dbba630a9474f187a024b8e7baba1
タグ:道路
カテゴリ:日記
2010/03/07 Sun 18:48 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2010年03月07日 00:51

JavaScriptを使って画像を回転させる方法

CSS3を使うと画像や任意の要素を回転して表示させることができる。それを使ってJavaScriptで画像をくるくる回転させられる。

以下のコードは、画像をクリックするごとに左上の位置を固定したまま90度ずつ回転させる例。

CSSで transform: rotate(90deg) を設定すると、90度回転して表示される。そのままだと画像の中心を軸に回転するので、左上の位置を変えずに回転するには軸の位置を画像サイズから計算して、CSSで transform-origin を指定する。img.attr("rotate", "2") は何度回転したかを保存するために一時的に使っているもので、CSSでもHTMLでもない。

ここで使っているCSS3のtransform は WebKit, Mozilla, Opera で先行実装されているので、-webkit-, -moz-, -o- を先頭に付ける。IEで動くかどうかは試していないがたぶん(まちがいなく)動かない。Firefox, Google Chrome, Opera で動作確認した。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
	$("img").click(function(){
		var img = $(this);
		var r = img.attr("rotate");
		var w = img.attr("width") / 2;
		var h = img.attr("height") / 2;
		if(r==1){
			img.css("-webkit-transform", "rotate(180deg)");
			img.css("-moz-transform", "rotate(180deg)");
			img.css("-o-transform", "rotate(180deg)");
			img.css("-webkit-transform-origin", w + "px " + h + "px");
			img.css("-moz-transform-origin", w + "px " + h + "px");
			img.css("-o-transform-origin", w + "px " + h + "px");
			img.attr("rotate", "2");
		} else if(r==2){
			img.css("-webkit-transform", "rotate(-90deg)");
			img.css("-moz-transform", "rotate(-90deg)");
			img.css("-o-transform", "rotate(-90deg)");
			img.css("-webkit-transform-origin", w + "px " + w + "px");
			img.css("-moz-transform-origin", w + "px " + w + "px");
			img.css("-o-transform-origin", w + "px " + w + "px");
			img.attr("rotate", "3");
		} else if(r==3){
			img.css("-webkit-transform", "rotate(0deg)");
			img.css("-moz-transform", "rotate(0deg)");
			img.css("-o-transform", "rotate(0deg)");
			img.attr("rotate", "0");
		} else {
			img.css("-webkit-transform", "rotate(90deg)");
			img.css("-moz-transform", "rotate(90deg)");
			img.css("-o-transform", "rotate(90deg)");
			img.css("-webkit-transform-origin", h + "px " + h + "px");
			img.css("-moz-transform-origin", h + "px " + h + "px");
			img.css("-o-transform-origin", h + "px " + h + "px");
			img.attr("rotate", "1");
		}
	});
});
</script>
</head>
<body>

<img src="test.jpg" />

</body>
</html>

このままだと、周辺のレイアウトを変更せずに単に画像を回転させるので、画像が正方形でない場合に、画像が回転した際に周辺と重なってしまう。

その問題に対応したのが以下。imgの外側にdivを囲んで、divのサイズを強制的に変更している。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
	$(".rotateimg").click(function(){
		var div = $(this);
		var img = $("img", this);
		var r = img.attr("rotate");
		var width = img.attr("width")
		var height = img.attr("height");
		var w = width / 2;
		var h = height / 2;
		if(r==1){
			img.css("-webkit-transform", "rotate(180deg)");
			img.css("-moz-transform", "rotate(180deg)");
			img.css("-o-transform", "rotate(180deg)");
			img.css("-webkit-transform-origin", w + "px " + h + "px");
			img.css("-moz-transform-origin", w + "px " + h + "px");
			img.css("-o-transform-origin", w + "px " + h + "px");
			img.attr("rotate", "2");
			div.width(width);
			div.height(height);
		} else if(r==2){
			img.css("-webkit-transform", "rotate(-90deg)");
			img.css("-moz-transform", "rotate(-90deg)");
			img.css("-o-transform", "rotate(-90deg)");
			img.css("-webkit-transform-origin", w + "px " + w + "px");
			img.css("-moz-transform-origin", w + "px " + w + "px");
			img.css("-o-transform-origin", w + "px " + w + "px");
			img.attr("rotate", "3");
			div.width(height);
			div.height(width);
		} else if(r==3){
			img.css("-webkit-transform", "rotate(0deg)");
			img.css("-moz-transform", "rotate(0deg)");
			img.css("-o-transform", "rotate(0deg)");
			img.attr("rotate", "0");
			div.width(width);
			div.height(height);
		} else {
			img.css("-webkit-transform", "rotate(90deg)");
			img.css("-moz-transform", "rotate(90deg)");
			img.css("-o-transform", "rotate(90deg)");
			img.css("-webkit-transform-origin", h + "px " + h + "px");
			img.css("-moz-transform-origin", h + "px " + h + "px");
			img.css("-o-transform-origin", h + "px " + h + "px");
			img.attr("rotate", "1");
			div.width(height);
			div.height(width);
		}
	});
});
</script>
</head>
<body>

<div class="rotateimg"><img src="test.jpg" /></div>
<br />
<div class="rotateimg"><img src="test2.jpg" /></div>

</body>
</html>
タグ:HTML javascript
カテゴリ:テック
2010/03/07 Sun 00:51 | Comment(0) | TrackBack(0) | テック | このブログの読者になる | 更新情報をチェックする

2010年03月01日 21:09

svnで認証情報をキャッシュさせない方法

コマンドラインでsvnを使うときに認証情報をキャッシュさせたくない場合は、svnコマンドをたたくごとに、オプションに --no-auth-cache を付ける。

例:
svn export --no-auth-cache リポジトリURL

タグ:Linux
カテゴリ:テック
2010/03/01 Mon 21:09 | Comment(0) | TrackBack(0) | テック | このブログの読者になる | 更新情報をチェックする

2010年02月28日 17:19

スピードキュービングキット

Image334.jpg
スピードキュービングキットを東急ハンズで買った。いままでのが回すのにものすごく固かったことがわかった。まだドライバーもワックスも使ってないが、快適である。
カテゴリ:日記
2010/02/28 Sun 17:19 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2010年02月21日 23:14

昭島の巨大プラレール

昭島プラレールに行ってきました。一畳プラレールのぺたぞうさんのイベントです。

イベントの案内
http://star.ap.teacup.com/pettanesa/267.html

ぺたぞう前日準備
http://star.ap.teacup.com/pettanesa/268.html

全景
昭島の巨大プラレール1
昭島の巨大プラレール2
昭島の巨大プラレール3


http://twitpic.com/14hkxx

アップ
http://movapic.com/pic/201002211316014b80b381e1d27
http://movapic.com/pic/201002211334254b80b7d1c4342
http://movapic.com/pic/201002211349064b80bb42d7615

楽しそうな親子
http://twitter.com/mysinchya/status/9405730878
http://twitter.com/mysinchya/status/9409810259

子どもたちに破壊されぺたぞうが修復する(リピート)
http://movapic.com/pic/201002211324254b80b5794e154
http://movapic.com/pic/201002211330304b80b6e6bd52e
http://movapic.com/pic/201002211346294b80baa55a5de
※子どもたちはとりあえず近くに来た電車をつまみ上げて、適当に別のレールに乗せる。その際に付近を破壊する。その電車が走っていくと今度は別の子どもにつかまり、別の場所にワープさせられる。なのでこの長いコースを決して1周することはない。同じコースを脈絡なく複数の電車が走るので、至るところで正面衝突をして鉄橋から落下する。

楽しそうな子どもと疲れた母親
http://twitter.com/mysinchya/status/9410973887
http://twitter.com/mysinchya/status/9412205000
http://twitter.com/mysinchya/status/9413723553
http://twitter.com/mysinchya/status/9420178180
※子どもを連れて行く際は夕方まで動けなくなることを覚悟すべき、午前中ではなく午後に連れて行くべき、という教訓であろう。

ひとり遊びのコーナー
http://twitpic.com/14hlr3

終了
http://movapic.com/pic/201002211658264b80e7a2e3892

片付けの初期フェーズ(=破壊)
http://twitpic.com/14hngj

片付けの終盤
http://twitpic.com/14ht8m
カテゴリ:日記
2010/02/21 Sun 23:14 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。