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

CSS3 スタンダード・デザインガイド
エ・ビスコム・テック・ラボ
毎日コミュニケーションズ
売り上げランキング: 7639

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中