Microsoft PowerPoint - J_ pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - J_ pptx"

もりよりしもね
7 years ago
Views:

有限会社 futomi 代表取締役羽田野太巳 ( はたのふとみ ) http://www.futomi.com/ http://www.

1 有限会社 futomi 代表取締役羽田野太巳 ( はたのふとみ )

5 マークアップの規定が中心論文をベースとした語彙ブラウザー向けの要件は規定されず

6 レンダリング結果が異なる規定違反のマークアップの扱いが違う JavaScript コードの実行結果が異なる

7 多くの仕様が策定されていない仕様があったとしても古く現状にあっていないブラウザーごとに解釈が違う

8 ブラウザーの互換性対策ブラウザーによって機能がないリッチなアプリケーション制作に限界リッチなアプリケーションになるほどブラウザー互換性の対策に大きな労力を要する

9 ブラウザーごとの非互換性を解決リッチな Web App に求められる API を開発現代の Web の用途に合わせてマークアップの語彙を追加 HTML5 の誕生

12 柔軟な文書構造を実現マシンからも確実にアウトラインを読み取れる

13 <time datetime=" " pubdate="pubdate">5/15</time> <meter value="20" max="100">2 割 </meter> <ins datetime=" T08:30+09:00"> 追記 </ins>

14 details/summary 要素ディスクロージャーウィジット menu 要素コンテキストメニューツールバー command 要素命令のトリガー

15 これまでは div 要素だらけマークアップでアプリケーション上の用途を表すことが出来なかった HTML5 新要素により解決

16 要素では個別の意味づけができない名字名前会社名郵便番号住所 etc. Microdata で個々の意味を与える <div itemscope> <p> 私の名前は <span itemprop="name"> エリザベス </span> です </p> </div>

17 ja.blogspot.com/2010/03/microdata.html

W3C HTML5 仕様 http://www.w3.org/tr/html5/spec.

19 W3C HTML5 仕様 WHATWG HTML5 仕様 apps/current work/multipage/

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

21 Canvas 2D Context Web Messaging Server-Sent Events WebSocket API Web Workers Web Storage Web SQL Database

22 Indexed Database API Geolocation API File API

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

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

28 描いてしまった図を個別に認識できない超高速な描画ピクセル操作画像やビデオのデータの読み込み

30 <video src= video.mp4 controls></video>

32 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()

36 rotate reflect

37 DRM Encryption Real time streaming RTP/RTSP One source, multi use

38 ブラウザーベンダーの方針が一致せず HTML5 仕様では Codec を規定されなかった H.264 Theora V8(WebM)

40 DnD に特化した仕様が規定されるイベントメソッドコンテンツ属性 Internet Explorerの実装がベース File APIとの連携

41 and drop attachments onto messages.html

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

43 DnD と File API によりデスクトップ App に近い UI を実現 Web とデスクトップの壁が低くなる Web App がデスクトップ App の領域をもカバー

45 input 要素に新たなタイプが導入 search, tel, url, , date, time, number, range, color などプログレスバーとゲージ <progress>, <meter> デスクトップアプリケーション並みの UI をマークアップだけで実現

46 <input type="date"> <input type="number"> <progress> <input type="range"> <meter> <input type="time"> <input type="search">

48 <meter min="0" max="51" low="40" high="50" optimum="0" value="0 ></meter>

49 <input type= text pattern= d{3} - d{4} title= 郵便番号 : 形式で入力してください >

50 ウェブアプリケーションを想定した UI コンポーネントプラットフォームの慣例に従ったデザイン Windows なら Windows らしい Mac なら Mac らしいデザインを想定 CSS によるデザイン変更は想定されずユーザーの混乱を回避デザインを変更すべきではない

51 入力値のチェックをブラウザーに任せるエラー出力の UI は JavaScript で用意 Opera 10 Chrome 6 Safari 5 // デフォルトのバリデーションを無効にする form.novalidate = true; // バリデーションエラーならエラー出力 if( input.validity.valid == true ) { print_custom_error(); }

54 JavaScript の処理をバックグラウンドで UI やレンダリングのブロッキングを回避高度で複雑な App を実現

56 Web Storage Web SQL Database Indexed Database API

57 Key Value Store (hash) 構造がシンプルで小さいデータに最適すべての最新ブラウザーに実装済みトランザクションが想定されない別々の worker や別々のタブから共通のデータにアクセスすることを想定していない

58 SQLベース (SQLite) 構造が複雑なデータに最適 SQL 方言を標準にすることに反対意見ブラウザーベンダーの意見が一致せず仕様策定が途中で終了

59 インデックス付き Key Value Store トランザクションが想定される別々の worker や別々のタブから共通のデータにアクセス可能 experimental

60 簡単な構造で小規模なデータすでに Web Storage が実質的に Web 標準複雑な構造で大規模なデータ Indexed Database API が将来の Web 標準 Mozilla Microsoft Opera Google から支持 Apple は不明 (WebKit 次第?) Web SQL Database は特定のデバイス向けに利用が限定 iphone, ipad, Chrome OS など

62 どのブラウザーでも IE, Firefox, Opera, Safari, Chrome などどのプラットフォームでも Windows, Mac, iphone, ipad, Android など同じコードで同じことが実現できる

63 JavaScript var elm = doc.getelementsbytagname("tag").item(0); Perl5 (XML::DOM) my $elm = $doc >getelementsbytagname("tag") >item(0); PHP5 (DOM Module) $elm = $doc >getelementsbytagname("tag") >item(0);

64 プロプライエタリなテクノロジー会社が倒産したら? 突然ライセンス料を求めてきたら? W3C で標準化されたテクノロジーバージョンアップはあっても消滅はしないロイヤリティーフリープロダクトの寿命が長くなる

66 Web 技術はパソコンだけにあるのではないあらゆるコンピューターデバイスへモバイル端末テレビカーナビゲームコンソールセットトップボックス家電

67 Apple iphone Sony Ericsson XPERIA Google(HTC) Nexus One TOSHIBA au IS02

Sony Internet TV http://discover.sonystyle.

69 Sony Internet TV us/1005/7099

http://innovator.samsungmobile.com/platform.main.do?

71 Web 標準技術だけで Widgets を開発できる SDK を提供 HTML + JavaScript + CSS で Widgets APP を製作

72 Linux と WebKit を中核とした Application Platform HTML + JavaScript + CSS を使って APP 開発が可能 HTML5 の API を数多くサポート Hardware 機能へアクセスできる JS API を提供

http://na.blackberry.com/eng/developers/browserdev/opensource.

73 WebKit を中核とした Application Platform HTML + JavaScript + CSS を使って APP 開発が可能 Sencha, PhoneGap, jquery, Dojo の動作をサポートオープンソース化

74 電子書籍 epub(html5 の採用を検討中 )

75 HTML5 + Browser = APP Platform あらゆるデバイスのフロントエンドに拡大 Web APP 開発は Web を超えて新たなステージへ

76 DOM Tree AccessorDrag & Drop Video/Audio API Text Selection Offline Web applications Canvas 2D Context Web Messaging Server-Sent EventsWebSocket API Web Workers Web Storage Web SQL DatabaseIndexed DatabaseGeolocation API File API

77 HTML5 は Web 標準加工により鋭い切れ味が持続します <strong> ご使用の際には説明書をよくお読みになって安全に正しくお使いください </strong>

78 有限会社 futomi 代表取締役羽田野太巳 ( はたのふとみ )

スライド 1

スライド 1 今日から使える HTML5 API 有限会社 futomi 代表取締役羽田野太巳 ( はたのふとみ ) http://www.futomi.com/ http://www.html5.jp/ http://twitter.com/futomi 自己紹介 HTML5.JP を運営 HTML5 のマークアップ API 全般に興味徹底解説 HTML5 マークアップガイドブックを執筆母国語は Perl