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とWeb開発に関する最新動向

10,907 views

Published on

  • Be the first to comment

HTML5とWeb開発に関する最新動向

  1. 1. HTML5とWeb開発に関する 最新動向 2013/3/26 株式会社オープンウェブ・テクノロジー代表取締役 HTML5開発者コミュニティ「html5j」 主催 白石俊平 (@Shumpei)
  2. 2. 自己紹介• 白石俊平と申します。• Web技術者コミュニティhtml5j管理人• HTML5とか勉強会主催(月一回、100名超を動員)• Google API Expert (HTML5)• Microsoft Most Valuable Professional (IE9)• Twitter: @Shumpei
  3. 3. html5jとは• 日本最大のWeb技術者コミュニティ – 2013年3月現在、会員数5,300人超• ビジョン:「世界で一番Web技術者コミュニティ が盛り上がっている国、日本」• 活動指針: 「つなげる、学べる、盛り上がる」• 近々非営利法人化を行い、よりパワフルに活動 を拡大していきます!
  4. 4. HTML5をモバイルアプリに統合しようと 考えている開発者の割合 Appcelerator/IDC Mobile Developer Report, Q1 2012
  5. 5. なぜ、HTML5か? マルチプラットフォーム マルチデバイス 技術的な成熟
  6. 6. HTML5のマルチプラットフォーム 性が改めて注目されている• 例:jQuery Mobileがサポートするプラッ トフォーム(Grade A) Apple iOS 3.2-5.0, Android 2.1-2.3, Android 3.1 (Honeycomb), Android 4.0 (ICS), Windows Phone 7-7.5, Blackberry 6.0, Blackberry 7, Blackberry Playbook (1.0-2.0), Palm WebOS (1.4-2.0), Palm WebOS 3.0, Firebox Mobile (10 Beta), Chrome for Android (Beta), Skyfire 4.1, Opera Mobile 11.5:, Meego 1.2, Samsung bada 2.0, UC Browser, Kindle 3 and Fire, Nook Color 1.4.1, Chrome Desktop 11-17, Safari Desktop 4-5, Firefox Desktop 4-9, Internet Explorer 7-9, Opera Desktop 10-11
  7. 7. 様々なスクリーンサイズ への対応 CREAN AIR WORKS
  8. 8. 2008 2009 HTML5 & CSS3 Readiness2010 2013
  9. 9. 7つの「○○ウェブ」オフライン スピーディリアルタイム プラットフォームレスポンシブセマンティック インプレッシブ
  10. 10. オフラインWeb http://anata0321.blog78.fc2.com/?no=463http://deha712.exblog.jp/8381024 http://ja.wikipedia.org/wiki/飛行機
  11. 11. オフラインWeb "オフライン時の変更は、 オンラインに戻った時に同期されます" Google Slides
  12. 12. オフラインWebを実現する テクノロジー• アプリケーションキャッシュ• Web Storage• Indexed Database API• File API
  13. 13. リアルタイムWeb http://news.cnet.com/8301-30684_3-20002186-265.html
  14. 14. リアルタイムWeb Japanese Chalkboard
  15. 15. リアルタイムWebを実現する テクノロジー• WebSocket• Server-Sent Events• WebRTC (Web Realtime Communication)
  16. 16. レスポンシブWeb GRAVITATE
  17. 17. レスポンシブWebオフラインにも対応している WebApp Field Guide
  18. 18. レスポンシブWebを実現する テクノロジー• CSSメディアクエリ• レスポンシブ・イメージ• グリッドレイアウト
  19. 19. セマンティックWeb ? SemanticSemantic <!DOCTYPE html> <html> ? … </html>
  20. 20. セマンティックWeb Google リッチスニペットテストツール
  21. 21. セマンティックWebを実現する テクノロジー• HTML5 Semantic Elements• HTML5 Microdata• RDF/RDFa/RDFa Lite• Microformats• ...
  22. 22. よりスピーディなWeb
  23. 23. よりスピーディなWebNormal Speedy
  24. 24. よりスピーディなWebを実現する テクノロジー• SPDY• HTTP/2.0• オフライン技術
  25. 25. プラットフォームとしてのWeb
  26. 26. プラットフォームとしてのWeb• デバイス固有の機能にアクセスすることも可 能に – 位置情報の取得 – カメラ・マイクにアクセス – 音声によるテキスト入力 – デバイスの向きや傾きを取得 – 温度や光、近接センサー – バイブレーション – アドレス帳、ギャラリーへのアクセス – ...
  27. 27. プラットフォームとしてのWeb Tizen IVI Opera TV Storehttp://fureidofort.blogspot.jp/2012/04/tizen-10-ivi-preview-on-exopc-photos.html http://japanese.engadget.com/2011/09/08/opera-tv/
  28. 28. インプレッシブWeb
  29. 29. ChronoZoom• 全宇宙史に関する様々なリソースを参照 できるWebアプリ
  30. 30. Flight Of The Navigator (Firefox Only) • 3Dの仮想空間の中を飛び回る。 • BGMに合わせて街中の明かりが明滅する 様は圧巻
  31. 31. インプレッシブWebを実現する テクノロジー• HTML5 Canvas• SVG (Scalable Vector Graphics)• WebGL• Web Audio API
  32. 32. 今年以降のトレンドを予想してみ る• 開発手法に関するトレンド• デザインに関するトレンド
  33. 33. Single Page ApplicationJavaScript MVCフレームワークの利用は一般化するでしょう。 Backbone.js Ember.js Angular.js Sencha Touch jQuery Mobile
  34. 34. リアルタイムWeb主要なモバイルWebブラウザでもWebSocketの実装が完了した今、リアルタイムWebはいよいよ本格的に普及するでしょう。 – 個人的には、Meteor (http://meteor.com)に注 目しています – 「リアクティブ・プログラミング」という用 語をたびたび聞く様になるかもしれません。
  35. 35. オフラインWeb今後数年かけて、オフラインWebの利用が本格化すると考えています。• 「オフライン・ファースト」で検索!
  36. 36. レスポンシブWebデザイン昨年に引き続き、レスポンシブWebデザインが注目されるのは、間違いありません。
  37. 37. フラットなデザイン LayerVault
  38. 38. CSSアニメーション 3d animation using pure CSS3
  39. 39. ご清聴ありがとうございました。 白石俊平 (@Shumpei)

×