GREE オープンソーステクノロジー勉強会#19 に行ってきた.
- 第19回 オープンソーステクノロジー勉強会に参加してきました.
デベロッパのためのHTML5入門
HTML5ってなに?
- HTML の最新版
- 新要素盛りだくさん
- 10月に最終ドラフトが出た
- 勧告は 2022 年と言われている・・・・
- 2つの仕様
- マークアップ中心の仕様
- ウェブアプリケーション用 API 中心の仕様
- Gears 由来の API もある
- HTML5 の基本
- ファイルの拡張子,Content-type はこれまで通り
- 先頭に空の DOCTYPE 宣言が必要
<!DOCTYPE html> <html> <body> ... </body> </html>
-
-
- ブラウザにできる最高のことをしてレンダリング仕様としてくれる
-
- 新要素を使ったマークアップ
-
- 使い方
- セマンティックな意味合いを持つブロック要素が追加された
- section / article / header / footer とか
- section
- アウトラインを構成する
- div でアウトラインを区切っていた場合の代替
- article
- 独立した内容を保持
- RSS で廃止しても言い内容を囲むのがいい
- body / td も section を作る
- ここのセクションは h1 とかももてる
- 要するにマークアップのもともとの意味でのタグが追加された感じ
- いままでは div でデザインの括りとしての区切りがあった
- meta に charset が追加された
- header > nav でサイトのナビゲーションメニュー
- footer ページのフッター
- section > article で記事内容
- セマンティックな意味合いを持つブロック要素が追加された
- 使い方
-
- Canvas を使って自由にお絵書き!
- 自由にお絵書きできるグラフィック要素
- 動画まで描画でき自由に変形できる
- Canvas を使って自由にお絵書き!
<canvas id="canvas" width="200" height="100"> var ctx =$("canvas").getContext("2d"); // 2D 用の描画コンテキストを生成? ctx.drawImage(image, 0, 0);
-
-
- ローディングのくるくる回るヤツを JavaScript で作ったデモ
- MNG/GIF と違い止められる.JavaScript だから
- WebKit の nightly build では 3D も使えるらしい
- ローディングのくるくる回るヤツを JavaScript で作ったデモ
-
-
- プラグインなしで動画を再生
- 残念ながらコーデック・フォーマットが仕様に盛り込まれていない
- 動画の形式はブラウザに依存してしまう
- 残念ながらコーデック・フォーマットが仕様に盛り込まれていない
- プラグインなしで動画を再生
-
- パワーアップしたフォーム要素
- input の type が増えた
- tel / search url /email / datetime / datetime-local / date / ....
- 全てデフォルトのコントロールがある
- ブラウザ依存
- いまは Opera のみ
- required (必須) / pattern など
- submit 時に自動的にチェックしてくれる
- auto-complete
- input の type が増えた
- パワーアップしたフォーム要素
-
- ドラッグ・アンド・ドロップ API
- もともと IE が持ってた API を標準化した
- Explorer / Finder とシームレスに連携可能
- アップロードするファイルの選択など
- ドラッグ・アンド・ドロップ API
-
- クロスドキュメントメッセージング
- 異なるウィンドウ(document)間でのメッセージング
- クロスドキュメントメッセージング
-
- その他もろもろ
- classList / getElementsByClassName
- Microdata でよりセマンティックに意味が扱えるように
- その他もろもろ
Open Web Platform を支える API 郡
- アプリケーションキャッシュ
- アプリケーションに必要なリソースをローカルにキャッシュするための仕組み
- html に manifest 属性を追加すれば,指定されたファイルがキャッシュされる
- Web Database
- ブラウザがデータベースを持つ
- SQL をフルに使える
- ドメインごとに分かれている
- インデックス・ビューも使えるそうだ
- openDatabase(...)
- 非同期型と同期型の API がある
- 非同期型だと結果を全てコールバックで受けとることになる
- 非同期型と同期型の API がある
- Web Storage
- ブラウザでストレージを持つことができる
- 要するに KVS
- localStorage.setItem / getItem
- localStorage.hoge = "foo"
- IE8 でも使える
- Web Workers
- バックグラウンドで動作する JavaScript スレッド
- 長時間かかる処理を実行すると,ブラウザが固まってしまう.
- バックグランドで処理をするように
- 厳密なスレッドではなく,各スレッドは変数などを共有できない
- window / document にはアクセスできない
- ワーカ間のデータ共有にはメッセージングの API を用いる
- worker.onmessage = function
- postMessage()
- Worker の処理をデバッガで往古とができない
- いまのブラウザではできない
- ログも残せないので,メッセージを送って UI スレッドにログを表示させる必要がある
- message 内容の switch - case になってしまい,面倒
- fakeworker.js
- eval / setTimeout で worker を実装したもの
- AlexService
- オブジェクト指向フレームワーク
- fakeworker.js
-
- Web Sockets
- 双方向通信を実現するための API
- サーバ側の対応も必要
- ws(http) / wss(https)
- onmessage / postMessage()
- commet の代替手段として利用可能か
- Web Sockets
-
- まとめると
- マークアップだけじゃなくて,ウェブアプリを開発するための仕様が盛りだくさん
- オフラインウェブアプリとか
- リッチインターフェイスをプラグインなしで
- リアルタイム通信も可能に
- これらが標準技術になる API だから,学習への投資が無駄になりにくいことが重要
- Firefox / Safari / Opera / IE8 で使えるのが利点
- まとめると
Q&A
- カレンダーなどはレンダリングまで指定されているのか?
- ブラウザの実装依存になる
- コントロールのカスタマイズはできるのかは不明
- CSS で制御できればいい気もするな
懇親会
- gom さんとマイレージの話とか
- 世界は狭いねー,悪いことできないねーとか藤本さんと話したり