第10回HTML5とか勉強会で「jQuery Mobile」について話してきました

HTML5 CSS3 JavaScript

9/15(水)に開催された第10回HTML5とか勉強会で「jQuery Mobile」についてライトニングトークしてきました。

「jQuery Mobile 調査報告(仮)」
http://prezi.com/ftfqmwlszidy/jquery-mobile/


jQuery Mobile は、まだリリースされていないのでプレゼン資料のタイトルは(仮)になっています。プロジェクトの概要と各プラットフォームの対応予定なんかをまとめています。リリース予定は、来月(2010年10月)ですのでお楽しみに。

http://jquerymobile.com/


最近は、jQuery Mobile に限らずモバイル関連のライブラリや開発ツールが充実してきていますので、開発者としては、色々と選択肢が増えて嬉しい限りです。


また、今回の勉強会は10回記念ということでデモアプリを作成しており Twitter API + Session Storage 周りとスタッフロールの部分をちょこちょことお手伝いしました。


第10回記念デモアプリ（Safari5 only）
http://komasshu.com/html5demo/10thanniversary/

第10回記念デモアプリ説明（小松さん）（Safari5 only）
http://komasshu.com/html5demo/10thanniversary/slides/#p0


実装自体は、スタッフロールのsection要素をCSS3 transition で下から上に動かすだけという
単純な作りになっています。(デモのコードは、音楽とスクロールを合わせるために少し余計なコードが入っていますが)


staffroll.js



//各パートの高さを計算

var stopPartHeight = document.getElementById('stop-part').clientHeight;

var firstPartHeight = document.getElementById('first-part').clientHeight;

var staffroll = document.getElementById('staffroll');
var startY = document.documentElement.clientHeight;

var endY = ((startY + stopPartHeight) / 2) - staffroll.clientHeight;

var firstPartY = -firstPartHeight;
//webkit-keyframesを定義

var style = document.createElement('style');

style.innerHTML = '@-webkit-keyframes bottomUpFlow {'

                    + '0% { -webkit-transform: translate(0, ' + startY + 'px); -webkit-animation-timing-function: linear; }'        //start

                    + '22% { -webkit-transform:  translate(0, ' + firstPartY + 'px); -webkit-animation-timing-function: linear; }'    //first part

                    + '88% { -webkit-transform:  translate(0, ' + endY + 'px); -webkit-animation-timing-function: linear; }'        //stop part

                    + '100% { -webkit-transform:  translate(0, ' + endY + 'px); -webkit-animation-timing-function: linear; }}';        //fadeout

document.head.appendChild(style);
//css適用

staffroll.style.webkitAnimationName = 'bottomUpFlow, fadeout';

staffroll.style.webkitTransform = 'translate(0, ' + endY + 'px)';



staffroll.css



#staffroll {

    color: white;

    font-size: 30px;

    letter-spacing: 0.075em;

    padding-bottom: 10px;

    text-align: center;

    text-shadow: white 0px 0px 10px;

    -webkit-animation-duration: 45s;

    -webkit-animation-iteration-count: 1;

    opacity: 0.0;

}
@-webkit-keyframes fadeout {

    0% { opacity: 1.0; }

    95% { opacity: 1.0; }

    100% { opacity: 0; }

}


長々と書いてますが、単純に下から上へ流すだけであれば、以下のようなコードだけで十分です。



@-webkit-keyframes bottomUpFlow {

	0% { -webkit-transform: translate(0, 1000px); -webkit-animation-timing-function: linear; }

	100% { -webkit-transform:  translate(0, -1000px); -webkit-animation-timing-function: linear; }

}
#staffroll {

	-webkit-animation-name: bottomUpFlow;

	-webkit-animation-duration: 45s;

	-webkit-animation-iteration-count: 1;

}

こういったエフェクトは、canvas を使って実装することもできますが、canvas は実装するのが割と大変なのでちょっとしたものに css3 transition を使うのは簡単でお勧めです。