HTML5的な勉強会的な - ハンズオンセミナーでコーディング編 - - 学内IT勉強会のススメ

さて、昨日の感想編に続き、今日はHTML5勉強会の内容を書いておきます。

対応ブラウザについて（2010/1/17 9:20 追記

2010/1/17 現在、以下のブラウザで正常に動作することを確認しております。
・Opera 10.10または10.5
・Google Chrome 3.0.195
・Safari 4.0.4
・iPhone safari

1/16HTML5ハンズオンセミナー

講師はやはり白石さんと羽田野さん。
この日はcanvasを1.5時間ほどいじってみようという、
割と軽い感じのハンズオンセミナーでした。
参加者のMac率が高かった。

HTML5のcanvasでできること

白石さんが、株式会社あゆたのサイトで大量にサンプルを
公開していらっしゃいますので、そこを見てみましょう。

たとえばこれ。
http://ayuta.co.jp/html5-samples/canvas/animation/fade/canvas-fade.html
とってもカワイイですね。

また、羽田野さんもhtml5.jpでcanvasのことをまとめていらっしゃいますので、
読んでおくと分かりやすいと思います。
http://html5.jp/canvas/index.html

この日の課題、っていうか題材

まず、羽田野さんによるデモが示されました。

こんなのです。

http://www.geocities.jp/tsukadaakihiro/html5/100116/demo.html
※画像はイメージです（当日は、羽田野さんご自身の画像が使われていました）

ソースはこんなのです。
（一部省略。ヘッダーとかは直接関係ないですが、
　DOCTYPE宣言とか html lang="ja" あたりは
　HTML5っぽいので、とりあえずそのまま載せます。）

<!DOCTYPE html>
<html lang="ja"> 
    <head>
        <meta charset="UTF-8" />
        <title>Canvas animation demo</title>
        <style>
            #canvas {
                border:1px solid black;
            }
        </style>

        <script>
            (function () {

                var ctx = null;
                var img = new Image();
                img.src = "jackey.jpg";
                var cw = 0;
                var ch = 0;
                var cc = 0;
                var deg = 0;

                window.addEventListener("load", function(){
                    ctx = document.getElementById("canvas").getContext('2d');
                    ctx.drawImage(img, 0, 0);
                    cw = parseInt(canvas.width);
                    ch = parseInt(canvas.height);
                    cc = cw / 2;
                    move();
                }, false); 

                function move() {
                    ctx.setTransform(1, 0, 0, 1, 0, 0);
                    ctx.clearRect(-cw, -ch, cw*3, ch*3);
                    var m11 = Math.cos( deg * Math.PI / 180 );
                    var dx = ( cw / 2 ) - ( cw * m11 / 2 );
                    ctx.setTransform(m11, 0, 0, 1, dx, 0);
                    ctx.drawImage(img, 0, 0);
                    deg ++;
                    deg = deg % 360;
                    var fps = 60;
                    fps = parseInt(fps);
                    if( fps <= 0 ) { fps = 1; }
                    setTimeout( move, parseInt( 1000 / fps ) );
                }


                function get_value(arg) {
                    return document.getElementById(arg).value;
                }

            })();
        </script>

    </head>
    <body>

        <h1>Canvas animation demo</h1>
        <div>
            <p><canvas id="canvas" width="300" height="300"></canvas></p>
        </div>

    </body>
</html>

canvasタグを300x300で指定し、
ctx.setTransform(m11, 0, 0, 1, dx, 0);
によって画像描画の縮尺と座標をずらすことで、
一枚の絵が、まるで看板が回転しているかのように見せていますね。

ということのコード解説があった後、次の課題が出される。

「画像自体を時計回り（反対でもいいけど）に回転させてみてください」

こういうことですね。
http://www.geocities.jp/tsukadaakihiro/html5/100116/kadai.html
はい、回ってますね。

今まで、VB.NETやC＃、JavaのSwingやAppletでこういう画像描画系のことを
やるのは好きでしたが、今回のcanvasではなんとなく挙動にクセがある感じがして、
最初なかなか思うように動かせませんでした。
ソースコードはここには載せないでおくので
（上記ページのソースを表示すると全て書いてあります）、
皆さんも、よかったらぜひ時計回りにジャ○キーを回してみてください。

作業にあたっては、羽田野さんのcanvasリファレンスがとっても見やすかったです。
→　http://html5.jp/canvas/ref.html
（いつも思うけど、こういう有用な資料を公開される方というのはすばらしいですね。）

で、それができたら「自由に動かして遊んでみてください」のお時間でした。

ちょっと全体で１時間３０分くらいしか作業時間がなく、
時計回りで手こずっちゃった僕はその場ではあんまり面白いものは
できなかったんですが、帰ってからなんとなくいじって作ったのが

こんなのでした。
http://www.geocities.jp/tsukadaakihiro/html5/100116/mycanvas.html

あんまりちゃんとチェックしてないので、無駄なゴミとかついてるかも・・・
何か目的がある動きという訳ではないんですが、
うん、まぁ、何となくですね。
大好きなジャ●キーの顔を眺めながら作業するだけで楽しかったです（そこかよ）

というわけで、やっぱり何か作ってみるという勉強会は楽しいなぁ、
などと思いながら、勉強させていただきました。
改めて、羽田野さん、白石id:Syunpeiさん、ありがとうございました。