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って悪い意味で存在感デカいのね、、と。
