本稿では、Chrome+HTML5 Conferenceで開かれた２つのハンズオンについてレポートします。

HTML5/CSS3/JavaScriptのブラウザ実装が進化してきて、リッチなWeb UIを実装することが可能になってきました。特に大きな特徴として、プラグインを必要としないアニメーションを実装できるCanvas/SVGや今まで画像頼りであった綺麗なボタンなどを画像もプラグインもなしで実装できるCSS3があります。これらをはじめて使う方々向けの2つのハンズオンが行われました。なお、両ハンズオンとも講演中の映像や資料は公開されておりません。

JavaScript初心者のためのSVG/Canvasアニメーション入門

１つ目のハンズオンは、羽田野太巳さんによるSVG/Canvasアニメーションについてです。

まず最初にCanvasとSVGの、次の2点の違いを言及しました。

• Canvasはビットマップ、SVGはベクター
• CanvasはJavaScriptで描画する、SVGはマークアップで描画することもできるし、JavaScriptでもできる

そして、デモ用のサンプルコードを用いて、SVGとCanvasの違いを詳しく説明しました。デモの内容は、ページ上にランダムに一つの円が出て、水の波紋のように広がっていき、ある程度のサイズになったら消えるというものでした。Canvasのデモはライブラリを使わない素のJavaScriptのみを利用していて、SVGのデモはRaphael.jsとjQueryを用いての実装になっていました。

2つの違いの説明が終わった後、参加者全員がCanvasチームとSVGチームに分かれて課題に取り組みました。課題内容は、デモに使われていたプログラムの改良です。参加者の方が課題に取り組んでいる間、羽田野さん自身が全体を回って教えていましたが、それ以外にもチーム内で参加者同士で相談しながら和気あいあいと課題を進めていました。

課題時間終了後、2人の方に実際にどのように改良したのかを発表していただきました。1人の方は、円の数を1,000個にして表示を繰り返す改良を行っていました。さすがに1,000個も表示するとコンピュータも処理落ちしてスムーズには動いていませんでしたが、綺麗なものに仕上がっていました。もう一方の方は、円がある程度のサイズになったところでただ消えるのではなく、風船のようにゆらゆらと上に上がって消えていくという改良を行っていました。こちらの方も一つの円ではなく、複数の円を表示していました。

CSS3のハンズオン

2つ目のハンズオンは、一條美和子さんによるCSS3についてです。このハンズオンは前半に演習付き解説が行われ、後半課題に取り組むという形式でした。

前半の演習では5種類のサンプルが用意され、参加者はサンプルとそのソースコードが穴抜きになったものが配布されました。参加者はサンプル毎に以下の流れで演習を進めました。

1. サンプルを確認する
2. 穴抜きになったソースコードを各自で埋め、サンプルと同じようにする
3. 一條さんによる解説

各演習で利用されたCSSは以下のものになります。

• box-shadow
  • 領域に影をつける
• transform(skewX, scale)
  • アニメーション
    • skew: 傾斜
    • scale: 拡大縮小
• gradient
  • グラデーション
• border-radius
  • 角丸
• border-image
  • 画像ラインをつける
• radial-gradient
  • 円形グラデーション
• text-shadow
  • 文字に影をつける

個人的に印象的だったのは、transformでの変化は周りのレイアウトには影響しないこと、transitionEndというイベントがあるのでCSSの変化をJavaScriptでキャッチできる、という説明でした。

後半は、前半のサンプルコードを流用して、3つのお題から1つ以上を実際に作ってみるという形式でした。3つのお題は以下のもので、皆さん黙々とお題を作成していました。

• アンケートフォーム
• 投票フォーム
• カレンダー予定記入フォーム