【TechBuzz】第5回HTML5勉強会に行ってきました。

10年前くらいにframeとtableタグの鬼使いでHTML書きまくってた自分ですが、
HTML5に関しては3年前くらいにGREEさんのオフィス(六本木通り沿いだったとこ)でやった勉強会で、
ラディカルな(？)APIの仕様に度肝を抜かれてから、特にフォローしてなかったのですが、
そろそろ現場感覚的にどんなもんなのかな？ってのをキャッチアップしたくて行って来ました。
　
懇親会でOisixさんというオーガニック系のネットスーパーさんが提供してくれたマンゴープリン。美味かったす。

　
■ HTML5でサイトをつくろう
小さい制作会社(ムーニーワークス)で働きながら、デジハリで先生をやっている方の話。
明日HTML5に関する書籍を出版される、と。
　
PCサイトの現場では、HTML5はそんなに浸透してない。XHTMLで充分的な。
・よりセマンティック
・リッチなアプリケーションのプラットフォーム
スマホサイトはIEがないので、HTML5+CSS3でイイ感じ。
現場ではまだまだIE7までサポート。HTMLというよりCSS3の方がIEで微妙。
　
ブロックレベル、インライン ⇒ カテゴリ、コンテンツ・モデル
意識していけばそんなに難しくなくアウトラインが適切になる。
SEO的にも有利かな、と。
　
HTML5で使う新しい要素。最低限これだけ抑える的なヤツ↓
hgroup, header, footer, nav, section, article, aside
headerのh1とsectionのh1じゃ重み違ってきたりするよね、と。
divタグは今まで通りに使うけど、文章の構造はそれ用の要素で。
　
HTML5はtime要素とか入ったり無くなったりするので、
HTML5でもidつけて、そこにCSSであててやっていく。
→要素がHTML5からなくなったりしても大丈夫。
　
フラッシュ的なアニメーションとかは？
→IEに対応してない部分があるのでまだ仕事で使うほどではないかも。
　CSS3やJSでもコンテンツスライダーとかも作れる。
　CSS3の方がjQueryよりサクサク動く。でもIEの挙動がおかしいのでCSS3辛い…。
　
　
■ スマホでも動作するJS製アドベンチャーゲームの作り方
シケモクMKさん。忍者ツールズの会社のディベロッパー。
個人で色々やってる。プログラミングの知識がなくてもゲームとか電子書籍とかを
直感的に作れるツールとか。
HTML5はクロスプラットフォームと言えど、未だIEは厳しい…。
　
領域.animateっていうので背景画像の切り替え。
重ねてある画像にopacityでhideとshow。それぞれdurationを設定。
　
PCのFFだとHTML5のAudioでmp3が再生できない。
SafariではQuickTimeがインストールされてないとAudio要素使えない。
　
スマホだとユーザーの操作無しにAudioが再生されない
→勝手にパケットがしがし食わないように？
　
KAG3/吉里吉里(Windowsゲーム向けの有名ソフトウエア)互換のソフトウエアのお披露目。
→Windowsゲームからスマホへ容易に移行。
　
　
■ HTML5のアニメーション表現
HTML4までのアニメーション。
→FlashとかGifとか。あとはjQueryを使ってDOMの中身をちょっとずつタイマーとかで動かしたり。
　
HTML5になると、、
→今までDOMしかイジれなかったのが、CanvasとかSVGとかAudioとかもいじれるようになる。
　音の再生をJSで受け取って画面を動かしたり。
　
HTML5じゃないと、、
→JSは基本シングルタスクなので複数タスクが同時に動くと辛い。
　CPUのみで描画演算。GPUリソース使ってくれない。
　
Canvas
iPhoneはレンダリングをGPU使ってくれるから早くなったけど、
Androidはまだっぽく凄い遅かったりする。
そうはいってもどうやって早くする？→描画処理は一括で。DBからデータ取り出したりとかと同じノリ。
　
WebGLは軽めな紹介だけ。
　
　
—
にしても、やっぱりまだまだInternetExplorerって悪い意味で存在感デカいのね、、と。
　
—