スライド 1

Size: px

Start display at page:

Download "スライド 1"

きよたつおおかわち
9 years ago
Views:

1 今日から使える HTML5 API 有限会社 futomi 代表取締役羽田野太巳 ( はたのふとみ )

2 自己紹介 HTML5.JP を運営 HTML5 のマークアップ API 全般に興味徹底解説 HTML5 マークアップガイドブックを執筆母国語は Perl 本業は主にサーバー側の App 開発もちろん JavaScript でフロントエンドも

3 アジェンダ HTML5 APIの全体像 Canvas Video/Audio Drag & Drop File API Web Storage Web Workers まとめ

4 HTML5 API の全体像

5 HTML5 API DOM/ アクセサー Drag & Drop Video/Audio API text selection API Offline Web applications

6 HTML5 API ( 独立系 ) Canvas 2D Context Web Messaging Server-Sent Events WebSocket API WebWorkers Web Storage Web Database

7 W3C 謹製 Indexed Database API Geolocation API File API

8 Open Web Platform HTML5はWeb Appを再定義 HTML5が規定したAPIだけでは足りない以前からW3Cが開発してきたAPIも必要ぜんぶひっくるめて Open Web Platform

9 Canvas

10 Canvas とはウェブページに図を描く <canvas> に API を規定 JavaScript から API を通して図を描く

11 グラフ

12 HTML5 Canvas and Audio Experiment

13 Sketchpad

14 Canvas の特徴描いてしまった図を個別に認識できないだから描画そのものは超高速ピクセル操作が可能画像やビデオのデータを読み込むことができる

15 変形 + アニメーション 3D ぽっく回転 2D 回転拡大縮小

16 ピクセル操作ピクセル情報を JavaScript から操作可能 1 ピクセルにつき赤緑青アルファの数値をリストとして取得 [10, 150, 255, 1,...] ピクセル情報の書き込みも可能画像フィルターなどのアプリケーションが JavaScript で実現できる

17 画像フィルター

18 マンデルブロ

19 Canvas 対応ブラウザー

20 Video/Audio

21 <video controls></video> ビデオのコントロール Chrome 4 Firefox 3.6 Safari 4

22 Video を操るありとあらゆる API 22 種類のイベント loadstart, progress, abort, error, play, pause, timeupdate, ended, ratechange, volumechange, etc. ビデオ再生の状態 (IDL 属性 ) currenttime, duration, volume, muted, seeking, seekable, playbackrate, etc. ビデオのロードやネットワークの状態 (IDL 属性 ) readystate, networkstate メソッド canplaytype(), play(), pause()

23 HTML5 Video Player 採用サイト

24 ipad ready

25 HTML5video.org Video Player

26 Canvas との組み合わせ ambient light( 周辺光 )

27 Video/Audio 対応ブラウザー

28 たぶん来年には IE9 が...

29 ビデオコーデック HTML5 仕様でビデオコーデックを定めようとしたがブラウザーベンダーの意見が一致せず断念ブラウザーによって異なるビデオコーデック Video codec Audio codec container Chrome 4 Firefox 3.6 Opera Safari 4 H.264 AAC MP4? Theora Vorbis Ogg? IE9

30 Drag & Drop

31 要素の DnD デモ

32 旧来の DnD ウェブページコンテンツのDnD 擬似的なDnD mousedown, mouseup, mousemove イベント JS フレームワーク jquery, YUI Library, Dojo, MooTools

33 HTML5 で DnD が標準化 DnD に特化した仕様が規定されるイベントメソッドコンテンツ属性 Internet Explorer の実装がベース

34 DnD 対応ブラウザー

35 HTML5 の DnD 規定 <img>, <a href=""> は当初からドラッグ可能 draggable コンテンツ属性あらゆる要素がドラッグ可能に <div draggable="true"></div> element.draggable = true; DnD 専用のイベントドラッグ要素 :dragstart, drag, dragend ドロップ要素 :dragenter, dragleave, dragover, drop イベントオブジェクト event.datatransfer

36 デスクトップへの入り口 HTML5 DnD にはこんな規定が... event.datatransfer.files 実は File API の File インタフェース var file = event.datatransfer.files[0];

37 File API

デスクトップファイルのドロップ http://gmailblog.blogspot.

38 デスクトップファイルのドロップ

39 File API の特徴デスクトップ上のファイルを結び付ける <input type="file"> 経由のファイル DnD 経由のファイルファイルデータにアクセスできる API 読み取り専用セキュリティーのため書き換えは禁止

40 File API 対応ブラウザー

41 たぶんもうすぐ Chrome5 が...

42 Web Storage

43 ローカルストレージのデモ

44 Web Storage の特徴キーバリューストア数 MBのデータも保存可能保存データはサーバーに送信されない Offline App サーバーの負荷低減などに有効 "H03-003" の値をちょうだい名前 ( キー ) "H05-212" 値 ( バリュー ) " 山田太郎 " "H " " 佐藤花子 " "H18-032" " 鈴木隆 "

45 ローカルストレージオリジン単位 ( 例 : ) でデータを保存管理するために使う異なるストレージのデータを参照できないブラウザーを閉じてもそのデータは消えない var o = window.localstorage;

46 WebStorage の API たったこれだけ o.setitem(key, value) - 値をセット o.getitem(key) - 値を取得 o.removeitem(key) - 値を削除 o.clear() - ストレージをクリア o.key(n) - n 番目のキーを取得 o.length - 保存されたデータの数を返す

47 データの確認 Chrome 4 の Developer Tool

48 Web Storage 対応ブラウザー

49 Web Workers

50 Movement tracker

51 Web Workers の特徴 JavaScript の処理をバックグラウンドで実行 UI やレンダリングのブロッキングを回避高度化複雑化する Web アプリケーションには必須のテクノロジーとして注目

52 Web Workers 対応ブラウザー

53 まとめ

54 JavaScript がフロントエンドの中核に HTML5 の API は JavaScript で利用よりリッチなアプリケーションが当たり前につぶしが効くスキルへ

55 フロントエンドに期待される役割新たなユーザー体験デスクトップファイルとの連携ビデオグラフィックの利用デスクトップアプリケーションレベルの機能複雑で重い処理もブラウザーでデータの蓄積プラグインと補完関係プラグインでできないことはHTML5で HTML5でできないことはプラグインで HTML5とプラグインのいずれも必須

56 進化は止まらないますますリッチなユーザー体験が HTML5 で加速一気にひろがるフロントエンドの役割ユーザー ( クライアント?) の期待に応えるべく HTML5 は必須の知識へブラウザーの実装に期待でもIEが...

57 8 年以上ものあいだウェブの住人だった Internet Explorer 6 は 2010 年 3 月 1 日の未明にカルフォルニアのマウンテンビューにてお亡くなりになりました Google 本社で受けた労働災害によるものでした Internet Explorer 6 は "IE6" として家族や友人に親しまれてきましたが息子の Internet Explorer 7 と孫娘の Internet Explorer 8 を残して世を去りました IE6 訃報

58 IE9 Platform Preview We love HTML5 so match. Microsoft MIX 10 Day 2 Keynote Dean Hachamovitch, general manager of the IE team

59 Are you ready?

60 ご清聴ありがとうございました有限会社 futomi 代表取締役羽田野太巳 ( はたのふとみ )

IE9 Beta版のここがいい、ここは直して欲しい～裏HTML5～ Microsoft 2010 MVP Open Day Japan

IE9 Beta版のここがいい、ここは直して欲しい～裏HTML5～ Microsoft 2010 MVP Open Day Japan HTML5 の衝撃 ~ なぜ HTML5 なのか?HTML5 が目指す世界とは ~ CSS Nite in Shinagawa HTML5+IE9 Web Camp 2011 年 3 月 6 日有限会社 futomi 代表取締役羽田野太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/ 羽田野