HTML5がもたらすアプリ開発へのインパクト

1,729 views
1,606 views

Published on

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,729
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

HTML5がもたらすアプリ開発へのインパクト

  1. 1. HTML5がもたらす アプリ開発へのインパクト 2013/9/8 株式会社オープンウェブ・テクノロ ジー 代表取締役 白石俊平
  2. 2. 自己紹介 • • • • • • 白石俊平と申します。 コミュニティhtml5j管理人(会員数5,500名超) HTML5とか勉強会主催(毎月一回、100名を動員) Google API Expert (HTML5) Microsoft Most Valuable Professional (IE9) Twitter: @Shumpei
  3. 3. html5jとは • 日本最大のWeb技術者コミュニティ – 2013年6月現在、会員数5,500人超 • ビジョン:「世界で一番Web技術者コミュニティ が盛り上がっている国、日本」 • 近々非営利法人化を行い、よりパワフルに活動 を拡大していきます! • 部活動も活発になって来ました! – マークアップ部/えんぷら部/テレビ部/ビギナー部…
  4. 4. Web技術の基礎知識
  5. 5. Web技術の基礎知識 • Web関連技術は、様々なオープン標 準によって支えられている。 標準化団体 W3C ECMA 管理している仕様 HTML/CSS/DOM/XML… ECMAScript IETF Khronos HTTP/WebSocket/JSON/Atom WebGL
  6. 6. HTML5を取り巻く環境 W3C 標準化 参照 仕様 参照 ベンダー Webページ Webエンジニア 開発 開発 実装 ブラウザを通じ てWebを利用
  7. 7. HTML5という「仕様」  HTML(Hyper Text Markup Language)の最新バー ジョン  W3C(World Wide Web Consortium)で標準化作業中 仕様書はWebで公開されている
  8. 8. Webを進化させつつ安定させる HTML Living Standard WHATWGによる バージョン HTML5 HTML5.1 W3Cによる 安定バージョン W3Cによる 次期バージョン
  9. 9. HTML5仕様のスケジュール 2012年9月20日、HTML5仕様のスケジュールが発表された! 2012年Q4 HTML5.0が勧告 候補に 2014年 HTML5.0勧告 2016年 HTML5.1勧告
  10. 10. 「狭義」のHTML5と「広義」のHTML5
  11. 11. Web関連技術は広く、深い。 HTML要素数:108 JavaScript API仕様: 66 CSS関連仕様: 66
  12. 12. 7つの「○○ウェブ」 オフライン スピーディ リアルタイム プラットフォーム レスポンシブ セマンティック インプレッシブ
  13. 13. オフラインWeb http://anata0321.blog78.fc2.com/?no=463 http://deha712.exblog.jp/8381024 http://ja.wikipedia.org/wiki/飛行機
  14. 14. オフラインWeb "オフライン時の変更は、 オンラインに戻った時に同期されます" Google Slides
  15. 15. オフラインWebを実現する テクノロジー • • • • アプリケーションキャッシュ Web Storage Indexed Database API File API
  16. 16. リアルタイムWeb http://news.cnet.com/8301-30684_3-20002186-265.html
  17. 17. リアルタイムWeb Japanese Chalkboard
  18. 18. リアルタイムWeb Cube Slam
  19. 19. リアルタイムWebを実現する テクノロジー • WebSocket • Server-Sent Events • WebRTC (Web Realtime Communication)
  20. 20. レスポンシブWeb GRAVITATE
  21. 21. レスポンシブWebを実現する テクノロジー • CSSメディアクエリ • レスポンシブ・イメージ • グリッドレイアウト
  22. 22. セマンティックWeb ? Semantic Semantic <!DOCTYPE html> <html> … </html> ?
  23. 23. セマンティックWeb Google リッチスニペットテストツール
  24. 24. セマンティックWeb 「google play angry birds」を検索する
  25. 25. セマンティックWebを実現する テクノロジー • • • • • HTML5 Semantic Elements HTML5 Microdata RDF/RDFa/RDFa Lite Microformats ...
  26. 26. よりスピーディなWeb
  27. 27. よりスピーディなWeb Normal Speedy
  28. 28. よりスピーディなWebを実現する テクノロジー • SPDY • HTTP/2.0 • オフライン技術
  29. 29. プラットフォームとしてのWeb
  30. 30. プラットフォームとしてのWeb • デバイス固有の機能にアクセスすることも可 能に – – – – – – – – 位置情報の取得(デモ) カメラ・マイクにアクセス(デモ) 音声によるテキスト入力(デモ) デバイスの向きや傾きを取得 温度や光、近接センサー バイブレーション アドレス帳、ギャラリーへのアクセス ...
  31. 31. プラットフォームとしてのWeb Tizen IVI Opera TV Store http://fureidofort.blogspot.jp/2012/04/tizen-10-ivi-preview-on-exopc-photos.html http://japanese.engadget.com/2011/09/08/opera-tv/
  32. 32. インプレッシブWeb
  33. 33. Nike Air Jordan 2012 • 最近はやりの、スクロールと連動した視 差スクロールをフル活用したサイト
  34. 34. ChronoZoom • 全宇宙史に関する様々なリソースを参照 できるWebアプリ
  35. 35. Cube • WebGLを用いた3D表現とGoogle Mapsの組 み合わせ • コナミコマンドを入力すると・・・
  36. 36. Webcam Toy • カメラからの画像取り込み&リアルタイ ムエフェクト
  37. 37. マンガテレビ • カメラからの動画取り込み、顔認識、音 声認識
  38. 38. World Wide Maze • どんなWebサイトでも立体迷路に! • WebGL, WebSocket
  39. 39. インプレッシブWebを実現する テクノロジー • • • • HTML5 Canvas SVG (Scalable Vector Graphics) WebGL Web Audio API
  40. 40. なぜ、HTML5か? マルチプラットフォーム マルチデバイス 技術的な成熟
  41. 41. マルチプラットフォーム
  42. 42. 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
  43. 43. Webアプリとネイティブアプリの 比較
  44. 44. 「ハイブリッド型」アプリとは • 「ネイティブアプリをWeb技術で作る」手 法 • 後述する「PhoneGap」などにより実現が 可能に • マルチプラットフォームで動作するネイ ティブアプリを作成することが可能
  45. 45. マルチデバイス
  46. 46. 様々なスクリーンサイズ への対応 CREAN AIR WORKS
  47. 47. 様々なスクリーンサイズへの対 応 オフラインにも対応している WebApp Field Guide
  48. 48. 技術的な成熟
  49. 49. HTML5と関連仕様の実装状況 出典: When can I use...
  50. 50. 2008 2009 HTML5 & CSS3 Readiness 2010 2013
  51. 51. Webに「足りない」ものは何 か?
  52. 52. Webに足りないもの 動作速度 デバイスの機能へのアクセス アプリストア的な動線
  53. 53. 動作速度に対するアプローチ • JavaScriptの速度限界突破のための様々な 取組み – asm.js – NaCl / PNaCl • 一般的な用途では遅くない? – Fastbook • http://fb.html5isready.com/
  54. 54. デバイスの機能を使い切れない • 仕様と実装の両面で強化が図られている – SysApp WG • http://www.w3.org/2012/sysapps/ – Chrome Packaged App • http://developer.chrome.com/apps/api_index.html – PhoneGap • http://docs.phonegap.com/en/2.7.0/index.html
  55. 55. アプリストアの動線 • 各社による様々なアプローチ – Mozilla Marketplace/Chrome Web Store/Windows Store… – ハイブリッドアプリも「Webアプリ」とするなら、 Apple のAppStoreやGoogle Playも • ネイティブアプリとWebアプリの境目があいまいに なってきている。 – docomoやKDDIもHTML5に対して積極的に • Webアプリならではの導線があるのは強み – URLがある、インストールが不要、ソーシャルメ ディアとの相性が良い
  56. 56. ご清聴ありがとうございました。

×