Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

13,827 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

最近の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)

×