« 2011年02月 | メイン | 2011年04月 »

2011年03月 アーカイブ

2011年03月03日

日経コンピュータにWebSocketRemoteが紹介されました

今日発売の日経コンピュータ2011年3月3日号で、WebSocketRemoteが紹介されました。
載っているのは、HTML5とか勉強会でお世話になっている小松さんが執筆している「HTML 5 で理解する次世代Web」という連載です。
第5回「負荷軽減と高度通信を両立 「Web Socket」でHTTPを超える」で、WebSocketを使った実装例として取り上げられました。
小松さんから事前に連絡を貰っていたのですが、想像していたよりも大きく載っていて驚きました。
なんだかんだ言ってもこういうのは嬉しいですね。
小松さん、ありがとうございます。

2011年03月10日

CSS3のアニメーション機能のTransitionとAnimationで、アニメーション中の値は取得できるのか

結論、getComputedStyleを使えば取得できる。
ただし、今のところはWebKit(SafariかChrome)の実装しかないため、他のブラウザではどうなるのか不明。
もしかしたら、仕様に明記されているかもしれないけど、そこまで調べていない。
以下、デモと実コード。
<!DOCTYPE html>
<html>
<head>
<title>css3 transition animation</title>
<style>
#transition-box{
    position:fixed;
    border:1px red solid;
    top:30%;
    left:0px;
    -webkit-transition-property:left;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    transition-property:left;
    transition-duration:3s;
    transition-timing-function:linear;
}
#animation-box{
    position:fixed;
    border:1px red solid;
    top:60%;
    left:0px;
    -webkit-animation-name:left-0-300;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:normal;
    -webkit-animation-play-state:paused;
    -webkit-animation-timing-function:linear;
}
@-webkit-keyframes left-0-300{
    from{
        left:0px;
        animation-timing-function:ease-out;
    }
    to{
        left:300px;
        animation-timing-function:ease-out;
    }
}
@keyframes left-0-300{
    from{
        left:0px;
        animation-timing-function:ease-out;
    }
    to{
        left:300px;
        animation-timing-function:ease-out;
    }
}
@-webkit-keyframes left-300-0{
    from{
        left:300px;
        animation-timing-function:ease-out;
    }
    to{
        left:0px;
        animation-timing-function:ease-out;
    }
}
@keyframes left-300-0{
    from{
        left:300px;
        animation-timing-function:ease-out;
    }
    to{
        left:0px;
        animation-timing-function:ease-out;
    }
}
</style>
<script>
function initialize(){
    document.getElementById("transition-left-0px").addEventListener(
        "click",
        function(){
            document.getElementById("transition-box").style.left="0px";
        },
        false
    );
    document.getElementById("transition-left-300px").addEventListener(
        "click",
        function(){
            document.getElementById("transition-box").style.left="300px";
        },
        false
    );
    document.getElementById("animation-left-0px").addEventListener(
        "click",
        function(){
            document.getElementById("animation-box").style.WebkitAnimationName="left-300-0";
            document.getElementById("animation-box").style.WebkitAnimationPlayState="running";
            document.getElementById("animation-box").style.animationName="left-300-0";
            document.getElementById("animation-box").style.animationPlayState="running";
        },
        false
    );
    document.getElementById("animation-left-300px").addEventListener(
        "click",
        function(){
            document.getElementById("animation-box").style.WebkitAnimationName="left-0-300";
            document.getElementById("animation-box").style.WebkitAnimationPlayState="running";
            document.getElementById("animation-box").style.animationName="left-0-300";
            document.getElementById("animation-box").style.animationPlayState="running";
        },
        false
    );
    setInterval(
        function(){
            var transitionBox=document.getElementById("transition-box");
            document.getElementById("transition-display").textContent=
                    transitionBox.style.left+
                    "/"+
                    getComputedStyle(transitionBox, "").left;
            var animationBox=document.getElementById("animation-box");
            document.getElementById("animation-display").textContent=
                    animationBox.style.left+
                    "/"+
                    getComputedStyle(animationBox, "").left;
        },
        100
    );
}
window.addEventListener("load",initialize,false);
</script>
</head>
<body>

<div>
<span>transition</span>
<input type="button" id="transition-left-0px"   value="left:0px"   />
<input type="button" id="transition-left-300px" value="left:300px" />
<span id="transition-display"></span>
</div>

<div>
<span>animation</span>
<input type="button" id="animation-left-0px"   value="left:0px"   />
<input type="button" id="animation-left-300px" value="left:300px" />
<span id="animation-display"></span>
</div>

<div id="transition-box">transition</div>

<div id="animation-box">animation</div>

</body>
</html>
Google

タグ クラウド