■NHN JAPAN HTML5 勉強会 2011年2月25日
19:00～21:00
柳さん。人事部の採用担当
■HTML5で変わるWebの世界
白石俊平氏
・自己紹介
・HTML5の基礎知識
→HTMLは様々なプログラミング環境を総称したもの。
（HTML5 Javascript )
※(CSS3 SVG）も含んでしまう
※ちょっとバズワード化してるかも・・・
→HTML5は仕様書だけでも1000P以上あるかも。
HTML5の意義
・セマンティックとaアクセシビリティの強化
More Readable for Everyone
→今まではDIVだらけだったが、新要素によって構造化が図られる。
・互換性の追求
現在のWebの大きな問題点が、ブラウザによって挙動が異なること。→仕様があいまい・仕様が存在しないが原因。
HTML5はこの問題に対して正面から取り組んでいる。
"Pave the Cowpaths"という視点で
→牛が散々使った道を通って行くのがいい方法だろう。
※過去のブラウザの仕様を元に仕様書を作って行った。
・リッチ・インターネット・アプリケーション
HTML5は「アプリケーションプラットフォーム」を目指す。
「Webアプリ」にできないことをどんどん減らしていく。
※HTML5 & APIが可能にすること。
・リッチな入力フォーム
・2D&3Dグラっふぃっく
・動画、音声の再生・生成い
・オフラインWebアプリケーション
これ以降は写真を参照。
・強化された入力フォーム
→入力タイプが増えた。
→新たな要素が追加された。
→入力のチェックも簡単に。
「input type="date"」とするだけで、カレンダーが出て来たりする。
・2D&3Dのグラフィック
Canvas
コンテクストは現在2種類
・2D Canvas
・Webgl
・動画、音声
→videoタグを入れるだけ。
※ただし、すべてのブラウザで再生できる共通フォーマットとはない。
・オフラインWebアプリケーション
→マニフェスト
→クライアントストレージ
※Web Storage （IE8からOK）
※ Web SQL Datebase API（実装がストップ）
Indexed Datebase API（Web Storegeよりも難しいが高機能）
※Web Sockets
ファイアウォールを超えられるソケット通信■ハンゲーム導入事例
1.ブラウザゲーム、CSSアニメーション
モバイルUIT 馬場さん。@pesblog
困ったこと
→CSS3でできることをデザイナーさんと共有
問題点ん1
→オセロの裏表のアニメーションをcss3で実装した。
→だが失敗した。animation-delyは信用できない
キーフレームアニメーションで作成した。
→がコマが増えると重くなった・・・
→divを一個にした。
→画像を修正した。
→opacityが原因
問題点2 グラデーションとrgbの壁
android 1.6で問題が残っている
問題点3 角丸とディスプレイの壁
→ディスプレイに問題があった。
→値を奇数にするとおかしいらしい。
devicePixelRatioの値が問題らしい。
まだよく分かってないらしい。
→対応方法としては、すべての値を偶数にw戦国絵巻Flashのcanvas移植
野津手昌美さん。
Flashとcanvasのデータ連携
実装でハマったところ
→canvasの数値に小数点が入るとアニメーションに影響がある。
→android 1.6、2.1ではalpha値がおかしくなる。
→ゲームとしては動作に影響がないので、そのまま。
→描画されるときに1.5倍になってしまう。
※移植がとても大変だった。サービス開発 R&D
山森 拓さん。
プロトタイプなど。
（開発者による、逆提案）
・コンセプト→既存サービス ＋α
→人を感じられるサービス。
サービスはWebSocketを使っている。
→双方向通信
→場を感じるサービス・使った技術
→node.js
→socket.io-node
コメント