When did it start?

Its all started one day, when one of my friend sent me a link with a demo of css3 and its implementation in webkit based browsers:
http://neography.com/experiment/circles/solarsystem/

I was impressed with the fact, that its finally became possible to make animation in a script-like style and make browser do the rest.
After surfing the net for a while I found some interesting examples and demos using css3.

The Cube

Check this link for a demo: http://www.fofronline.com/experiments/cube-3d/
In this demo you are allowed to move 3d cube with arrow keys. Impressive, isn’t it?

Though, as its still in an under development state, you should directly point to the scripts your want use to process you css3 code:

<link rel=”stylesheet” type=”text/css” href=”http://sources.fofronline.com/css/experiments.css” />

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js”></script>

How to use it?

First design style layout in a css3 way. In the code snippets below you might find properties starting with -webkit:

#experiment {
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 200px;
}

#cube {
position: relative;
margin: 0 auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
}

That were general properties for the cube. But cube consist of 6 faces and it also necessary to set styles for them. Below is a general settings for face of the cube.

.face {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
-webkit-border-radius: 3px;
}

Please note, that it is now possible to set colors in a rgba way, i.e. red, green, blue and alpha channel. If alpha channel value can be set in a range from 0 to 1, where 0 is absolutely transparent, and 1 is non-transparent. In this case value is 0.7, so as a result you can see the cube, but at the same time you can see through it as well.

Next it is necessary to set faces positions:

#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px) ;
}

That’s it for styles. Now cube you made a cube, but you can only see it from one viewpoint. To see all faces it might be necessary to rotate it. In this case its can be done with a Javascript. It listens to keydown event, changes values accordingly and then use $(‘cube’).style.webkitTransform to submit new coordinates so that cube would rotate.

<script type=”text/javascript”>
var xAngle = 0, yAngle = 0;
document.addEventListener(‘keydown’, function(e)
{
switch(e.keyCode)
{

case 40: // down
xAngle -= 90;
break;
};
$(‘cube’).style.webkitTransform = “rotateX(“+xAngle+”deg) rotateY(“+yAngle+”deg)”;
}, false);
</script>

Now the code, which describes graphical part and actual behavior of the object, is complete to some extent, and the only thing to do is to initialize object, i.e. define the div containers with necessary content and corresponding object references as show below:

<div id=”experiment”>
<div id=”cube”>
<div class=”face one”>
One face
</div>
<div class=”face two”>
Up, down, left, right
</div>
and etc.

Other Examples

Similar to previous example – Mulitcubes

Space galaxy

Isometric cube

and many-many other examples you can find here:
http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

As you have seen, this is very interesting and promising approach, which has all chances to change the face of the Internet in a long-run.

金子君のエントリを見るたびに、彼のスキルには圧倒されるばかりです。一方私はというと、サーバ構築や管理のスキルは全くありません。勉強しようかなと思ったこともあるのですが、いまいち興味が沸きませんでした。というのも、「そもそもサーバ作って何するのよ？」という疑問に答えられなかったためです。実際私がプログラムを書くのは、あくまでプログラムを書くことによって利益を (金銭的な意味に限らず) 得たいからなのです。

そこのところのモチベーションは彼にとってどうなってるのだろう、と長いこと疑問に思ってたので、ある日尋ねてみました。すると、「サーバを管理するためにサーバを管理している」という答えが返ってきました。一見トートロジーのようですが、よくよく聞いてみると、この言葉は彼にとって2つの意味を持っているようです。
その前にこれだけは言っておきますが、先の文章は論理学的に見ても修辞的に見てもトートロジーではありません。

まず一つ目が、「サーバ管理を効率的に行うためにサーバ管理を行っている」という意味です。彼は複数のサーバを管理していて、それらを常にネットワーク越しに連携させているため、一台のサーバの管理を効率化させることとは、他の全てのサーバの管理を効率化させることにつながるそうです。

もう一つは、「サーバ管理をしたくてサーバ管理を行っている」という意味です。彼には「食欲」「睡眠欲」などと同様に「サーバ管理したい欲」というものがあり、それに従ってサーバを管理しているようです。

どちらの意味にしても、凡人がおいそれとたどり着ける領域ではなさそうです。しかし、「好きこそ物の上手なれ」という言葉があるように、このような姿勢が彼の技術力を裏付けているのでしょう。彼の態度から私が学ぶべきものは多いと感じました。

担当: 田山 (一方プログラマの美徳は「プログラムを書かないためにプログラムを書く」だったりするわけですが) ()

サーバにあるログを解析して、解析した結果をメールで管理者宛に送信するようなスクリプトを書いたときでした。
ログの中にはIPアドレスが書かれている部分があり、IPアドレスの部分を抽出してその統計を取るためにある関数を定義しました。
その関数では主にIPアドレス (111.222.333.444の様な整数をピリオドで区切った形式) を処理対象にしていて、最終的な関数終了時にIPアドレスをreturnするようなものにしました。
そして書いたスクリプトを実行してその関数を呼んでみると、以下の様なエラー文が返ってきました。

bash: return: 111.222.333.444: numeric argument required

エラー文を読めば分かるかと思いますが、この場合だとbashになりますがreturn文は整数しか受け付けてくれないようでした。
IPアドレスの形式は先ほど述べたように、整数をピリオドで区切った形式なのでシェルスクリプト内では文字列になります。
いろいろ試してみると、「0.1」のような小数や、配列なども受け付けてくれませんでした。
この問題が発覚してから私は行き詰まってしまいました。
調べてみたところPerlやRuby, Pythonと言ったスクリプト言語だとreturnは整数のみでなく様々な型のものを受け付けてくれるそうです。
小さいことですがこの問題を知って、この処理にはスクリプト言語を使った方が良いのかな、と思ってしまいました。
私はシェルスクリプトはすばらしいと思いますし、実際に色々な場面で使っていますが最近は用途によってはスクリプト言語を使うことも増えてきました。
しかしながらシェルスクリプトはただのプログラムではなく、「小さなものを組み合わせて大きな処理を行う」といったUNIXの哲学が良くあらわれているものなので、それを忘れないためにも今後も使っていきたいと思っています。

担当: 金子 (実はもう少し書きたいことがあったのですが長くなってしまったのでまたの機会に)