「Girls Only HTML5 and Android Code Lab / Hack-a-thon」に行ったんだった。
火曜／金曜担当の、@cremaです。
今日の本題に入る前に、前回の記事「Illustrator CS5で矢印はどこ行った？＋線幅ツールとかのお話。」に有益なコメントを頂戴したので、共有します。
いつも拝見しています。
「破線の角部分」に関しては、次のような欠陥があります。
http://www.dtp-transit.jp/adobe/illustrator/post_1026.html従来通り、ブラシを使う必要がありそうです。
http://www.dtp-transit.jp/adobe/illustrator/post_386.html鷹野
ということでした！ 鷹野さん、大変有益なご指摘に大感謝です！
「Girls Only HTML5 and Android Code Lab / Hack-a-thon」とは。
さて、ここから本題。
「Girls Only HTML5 and Android Code Lab / Hack-a-thon」とは、2010年9月4日に東京・六本木のGoogleさんの会議室で開催された、女性限定の初心者向け HTML5 / Androidの勉強会（or ハッカソン）です。
渋谷セルリアンタワーから六本木ヒルズにお引越しされたばかりのGoogleオフィスに興味津々ということもあり、物見遊山気分で参加してしまった私。
社内の素敵なロビーは、こんな雰囲気なのです。ミニバーや食堂やビリヤード台なども完備されていて、噂に違わぬ美しくくつろぎ感のあるスペースでした。
ここに集まってきたのは、30人ほどのギーク女子たちです。
HTML5を勉強する／何かを作るグループと、Androidアプリを作るCode Labの2班に別れました。私はHTML5班へ。
午前中は、羽田野太巳さん、白石俊平さん、北村英志さんなどの豪華講師陣によるHTML5の基本知識のレクチャーでした（先生方は男性なのです）。HTML5の書籍を書かれている方々だけあり、手馴れて詳しい説明でした。
CSS Nite LP, Disk 9「Coder's Higher」での羽田野太巳さんの講演も聴いていたため、「HTML5ではJavaScriptを活用しないと！」といううっすらした基礎知識はあったのですが、午前中でそれを再確認させられて苦手意識をふつふつと沸かせながら、ランチタイムへ。
参加者の女性たちが皆さんフレンドリーで、きゃっきゃうふふしながらごはんをいただけたので、気分復活です;-)
さて午後になり、HTML5の初心者は羽田野太巳さんが出したお題をこなす、ということになりました（ネットで検索してソースをコピーしながらでOK）。
最初のお題は、
- HTML5のドキュメントを作成し、canvas要素をひとつ準備。
- canvas要素の中に、100個の丸がランダムな方向かつランダムなスピードで飛び交うアニメーションを作成。
- 丸はグラデーションをかけて立体的に。色は、予め設定した7色をランダムに使用。
というものだったのですが。
初心者が多いので途中でやさしい内容に変更していただき、最終的にはこんな感じになりました。
- HTML5のドキュメントを作成し、canvas要素をひとつ準備。
- canvas要素の中に、100個の丸を描く。
- ランダムな大きさと色と場所。
- それを1000ミリ秒ごとに描き直す。
ということで、羽田野さんにご指導いただきながらの作業を、ここで段階を追って振り返ってみたいと思います。完全に理解しきれていないので、説明やコードに不備がありましたら、ご指摘くださいませ。
まずはHTML5のドキュメントをこんな感じで作成します。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>canvas要素を使ったアニメーション作成課題（crema）</title> <script type="text/javascript"> </script> </head> <body> <h1>canvas要素を使ったアニメーション作成課題（crema）</h1> <canvas id="canvassample" width="600" height="450"></canvas> </body> </html>
script要素の中に、これ以降の処理をゴニョゴニョ書いていくわけですが。
次に、canvas要素の背景色を黒く塗りつぶします。サイズは、横幅600px、高さ450px（「Play」をクリックすると、処理した結果を見られます。以下全て同じ。素晴らしいサービス「jsdo.it」に感謝！）。
forked from: 2010-09-04 1st - jsdo.it - share JavaScript, HTML5 and CSS
そこに半径50pxの白い円をひとつ描いてみます。仮に、中心点が左から100px、上から100pxの場所にしています。
forked from: 2010-09-04 1st - jsdo.it - share JavaScript, HTML5 and CSS
お次はランダム関数を使って、リロードするごとに「中心点」「半径」がランダムになるようにしました。中心点は、横方向に0から600pxの範囲内かつ縦方向に0から450pxの範囲内になるようにし、半径は1pxから50pxの範囲でランダムになるようにしています。
forked from: 2010-09-04 1st - jsdo.it - share JavaScript, HTML5 and CSS
加えて、色もランダムになるように変更。r、g、bの3つの変数を作り、0から255までの値がランダムに生成されるようにして、それをctx.fillStyleの値として利用します。
forked from: 2010-09-04 1st - jsdo.it - share JavaScript, HTML5 and CSS
関数drawcircleを作って、それをforで100回繰り返します。ここで、100個のランダムなカラーと大きさの円が完成。
forked from: 2010-09-04 1st - jsdo.it - share JavaScript, HTML5 and CSS
window.setInterval(function(){ 中略 }, 1000);の部分で、1000ミリ秒ごとに自動で描画し直させます。
2010-09-04 1st - jsdo.it - share JavaScript, HTML5 and CSS
そして、最後。ctx.createRadialGradientを使って、円を円形のグラデーションで塗りつぶします。grad.addColorStop(0,'white'); でグラデの開始色を白にし、grad.addColorStop(0.9,'rgb('+r+', '+g+', '+b+')');で、グラデの終了色をランダムに設定。var grad = ctx.createRadialGradient(x-w*0.5,y-w*0.5,0,x,y,w);の部分で、開始位置や半径を指定し、グラデの開始色の位置を左上にずらしています。
2010-09-04 1st - jsdo.it - share JavaScript, HTML5 and CSS
ふー。こんなふうに段階を追って学習すると自分の理解が少し深まった気がしますが、読んでくださった方にはいかがでしょうか？ 少しくどかったかもしれませんね......。
あと、間違いがある可能性も高いので、ご指摘ください＞＜
兎にも角にも、こんな素晴らしい学習機会を与えてくださったGoogleの皆さまと講師の皆さまに、心から感謝しております！
お土産でいただいた貴重なドロイド君のぬいぐるみ（日本に300体しかいない？）は、大切にデスクの上に飾っています！
