最近のHTML5はどうなってるのか

13,309 views

Published on

HTML5に詳しくない人達向けに、ざっとイントロになる資料です。

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,309
On SlideShare
0
From Embeds
0
Number of Embeds
7,734
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

最近のHTML5はどうなってるのか

  1. 1. 最近のHTML5はどうなってるのか2013/5/24株式会社オープンウェブ・テクノロジー代表取締役HTML5開発者コミュニティ「html5j」 主催白石俊平 (@Shumpei)
  2. 2. 自己紹介• 白石俊平と申します。• Web技術者コミュニティhtml5j(http://html5j.org)管理人• HTML5とか勉強会主催(月一回、100名超を動員)• Google API Expert (HTML5)• Microsoft Most Valuable Professional (IE9)• Twitter: @Shumpei
  3. 3. おねがい• YouTube Liveを利用するのに必要な1,000名のチャンネル登録者を求めてます!!• 以下の操作、お願いします!1. 「youtube html5j」で検索して2. 「チャンネル登録」ボタンをぽちっと。
  4. 4. なぜ、HTML5か?マルチプラットフォームマルチデバイス技術的な成熟
  5. 5. 7つの「○○ウェブ」オフラインリアルタイムスピーディレスポンシブインプレッシブプラットフォームセマンティック
  6. 6. オフラインWebhttp://deha712.exblog.jp/8381024http://ja.wikipedia.org/wiki/飛行機http://anata0321.blog78.fc2.com/?no=463
  7. 7. オフラインWeb"オフライン時の変更は、オンラインに戻った時に同期されます"Google Slides
  8. 8. オフラインWebを実現するテクノロジー• アプリケーションキャッシュ• Web Storage• Indexed Database API• File API
  9. 9. リアルタイムWebhttp://news.cnet.com/8301-30684_3-20002186-265.html
  10. 10. リアルタイムWebJapanese Chalkboard
  11. 11. リアルタイムWebを実現するテクノロジー• WebSocket• Server-Sent Events• WebRTC (Web Realtime Communication)
  12. 12. レスポンシブWebGRAVITATE
  13. 13. レスポンシブWebを実現するテクノロジー• CSSメディアクエリ• レスポンシブ・イメージ• グリッドレイアウト
  14. 14. <!DOCTYPE html><html>…</html>SemanticSemanticセマンティックWeb??
  15. 15. セマンティックWebGoogle リッチスニペットテストツール
  16. 16. セマンティックWebを実現するテクノロジー• HTML5 Semantic Elements• HTML5 Microdata• RDF/RDFa/RDFa Lite• Microformats• ...
  17. 17. よりスピーディなWeb
  18. 18. よりスピーディなWebNormal Speedy
  19. 19. よりスピーディなWebを実現するテクノロジー• SPDY• HTTP/2.0• オフライン技術
  20. 20. プラットフォームとしてのWeb
  21. 21. プラットフォームとしてのWeb• デバイス固有の機能にアクセスすることも可能に– 位置情報の取得– カメラ・マイクにアクセス– 音声によるテキスト入力– デバイスの向きや傾きを取得– 温度や光、近接センサー– バイブレーション– アドレス帳、ギャラリーへのアクセス– ...
  22. 22. プラットフォームとしてのWebhttp://fureidofort.blogspot.jp/2012/04/tizen-10-ivi-preview-on-exopc-photos.htmlTizen IVIOpera TV Storehttp://japanese.engadget.com/2011/09/08/opera-tv/
  23. 23. インプレッシブWeb
  24. 24. ROME• 3D表現を効果的に活かしたインタラクティブ・ムービー
  25. 25. インプレッシブWebを実現するテクノロジー• HTML5 Canvas• SVG (Scalable Vector Graphics)• WebGL• Web Audio API
  26. 26. Webアプリvsネイティブ
  27. 27. Webアプリに足りないものと、その現状(1)• デバイスの機能を使い切れない– 仕様と実装の両面で強化が図られている– SysApps WG / Chrome Packaged Apps /PhoneGap...• 速度が遅い– 限界突破のための様々な取組み• asm.js / NaCl / PNaCl / Dart...– 一般的な用途では遅くない?• Fastbook
  28. 28. Webアプリに足りないものと、その現状(2)• アプリストア的な導線がない– 各社による様々なアプローチ• Mozilla Marketplace/Chrome Web Store• docomoやKDDIもHTML5に対して積極的に– Webアプリならではの導線があるのは強み• URLがある、インストールが不要、ソーシャルメディアとの相性が良い• UIコンポーネントや開発環境の不足– Web Componentsには注目!– Adobe Edge Tools & Servicesを筆頭に、開発環境も整いつつある。
  29. 29. ご清聴ありがとうございました。白石俊平 (@Shumpei)

×