Web on Kernel

  • 3,631 views
Uploaded on

第4回 HTML5など勉強会 まにフェス前夜祭 特別企画 で使用したスライド

第4回 HTML5など勉強会 まにフェス前夜祭 特別企画 で使用したスライド

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,631
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web on Kernelfor HTML5-NADO @ 201204by Tomoya ASAI (dynamis) last update on 2012.04.12
  • 2. about:me http:// dynamis.jp @dynamitter facebook.com/ dynamis mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  • 3. きょうのおはなし ばずわーど さいしんのぎじゅつ うぇぶですまほ あぷりをくばろう
  • 4. Agenda HTML5 WebAPI Boot to Gecko Marketplace
  • 5. "HTML5"Review the Buzzword...
  • 6. ""HHTTMMLL55"" ってなぁに? フォクすけに教えて!
  • 7. The term "HTML5" is widelyused as a buzzword to refer to modern Web technologies... HTML 仕様書に書いてるよ! http://whatwg.org/html - Introduction
  • 8. "HTML5" という用語は最新Web 技術を指すバズワード として広く使われています HTML 仕様書に書いてるよ! http://whatwg.org/html - Introduction
  • 9. "HTML5" という用語は最新Web 技術を指すバズワード として広く使われています 最新技術って何処までかな?
  • 10. Semantic Multimedia HTML5 CSS GeolocationElements Elements FormsOffline User HTML5 DOM MathMLSupport Interaction Parser WebCanvas Microdata SVG XHR Messaging Web Web WebRTC WebGL ECMA5thWorkers Sockets (主な)仕様策定の場: WHATWG W3C Other
  • 11. HTML Living Standard - WHATWG W3C 仕様書名に "HTML" を含むSemantic Multimedia HTML5 HTML5 - W3C CSSElements Elements FormsOffline User HTML5 DOMSupport Interaction Parser WebCanvas Microdata SVG Messaging Web Web more...Workers Sockets WebRTC WebGL
  • 12. 今の ""HHTTMMLL55"" は? フォクすけに教えて!
  • 13. Semantic Elements CSS Transforms ECMA5thMultimedia Elements CSS Animations WebM Codec Canvas 2D API SVG WebGL Forms WOFF (Web Fonts) WebCL Offline Events Event Listener (DOM) Typed Array Drag & Drop API XHR Level 2 Audio Data API Web Storage Indexed DB SQL DB (obsolate) HTML5 Parser File API River Trail Web Workers Geolocation SPDY Microdata Device Orientation ContentSecurityPolicy Web Sockets API Server-Sent Events Web Socket Protocol Web RTC Battery Status ICC Color Profile
  • 14. Semantic Elements CSS Transforms ECMA5thMultimedia Elements CSS Animations WebM Codec Canvas 2D API SVG WebGL Forms WOFF (Web Fonts) WebCL Offline Events Event Listener (DOM) Typed Array W3C HTML5 Drag & Drop API XHR Level 2 Audio Data API Web Storage Indexed DB SQL DB (obsolate) HTML5 Parser File API River Trail Web Workers Geolocation SPDY Microdata Device Orientation ContentSecurityPolicy Web Sockets API Server-Sent Events Web Socket Protocol Web RTC Battery Status ICC Color Profile
  • 15. Semantic Elements CSS Transforms ECMA5thMultimedia Elements CSS Animations WebM Codec Canvas 2D API SVG WebGL Forms WOFF (Web Fonts) WebCL Offline Events Event Listener (DOM) Typed ArrayWHATWG HTML Drag & Drop API XHR Level 2 Audio Data API Web Storage Indexed DB SQL DB (obsolate) HTML5 Parser File API River Trail Web Workers Geolocation SPDY Microdata Device Orientation ContentSecurityPolicy Web Sockets API Server-Sent Events Web Socket Protocol Web RTC Battery Status ICC Color Profile
  • 16. Semantic Elements CSS Transforms ECMA5thMultimedia Elements CSS Animations WebM Codec Canvas 2D API SVG WebGL Forms WOFF (Web Fonts) WebCL Offline Events Event Listener (DOM) Typed Array Firefox Drag & Drop API XHR Level 2 Audio Data API Web Storage Indexed DB SQL DB (obsolate) HTML5 Parser File API River Trail Web Workers Geolocation SPDY Microdata Device Orientation ContentSecurityPolicy Web Sockets API Server-Sent Events Web Socket Protocol Web RTC 点線は標準非搭載や限定的実装 Battery Status ICC Color Profile
  • 17. "HTML5" の現状 "HTML5" >> HTML > HTML5 実装や仕様策定に伴い "HTML5" の領域は広がり続けている Web がプラットフォームに 本格的アプリ開発が可能に
  • 18. これで十分なの? フォクすけに教えて!
  • 19. "HTML5" ではまだできない システムステータス 電源, WiFi 情報, モバイル通信... 各種センサー 光センサー, 近接センサー... 低レベルハードウェア制御 USB, BlueTooth, NFC
  • 20. ボクもいろいろ使ってみた〜い!
  • 21. やりましょう。 あの人の写真は無断で 使わないでおきます…
  • 22. Web APINo More Native Apps...
  • 23. http://arewemobileyet.com/
  • 24. Web API Web の限界を押し進める HTML5 などの基本 API 以外 API の総称であって定義はない W3C では DAP などで標準化 実装と共に標準化も進めていく 一部別の WG に分かれるかも? https://wiki.mozilla.org/WebAPI
  • 25. 昔からある Web API Geolocation (位置情報) Orientation (加速度センサー) Audio Data API WebGL (3D グラフィック) Camera API (WebRTC へ統合) これらは既に Android 版 Firefox で実装済み
  • 26. 実装済みの Web API モバイル端末の基本機能中心 SMS, Telephony Settings, Contacts Vibration, Pointer Lock Battery Status (電池や充電) Resource Lock (スリープ禁止) Network Information 実装がまだ一部不完全な API も含む
  • 27. 現在実装中の Web API WebRTC (Camera, P2P など含む) Open Web Apps (アプリ管理) Idel, Power Management Mobile Connection, WiFi Information (無線情報) Light Sensor (環境光センサー), Proximity Sensor (近接センサー) ...and more...
  • 28. ex. 環境光を確認してみるvar count = 0;function output(ambient) { // ambient.value 属性で lux 単位の光強度が得られる var d = document.getElementById("d"); d.innerHTML = "<p> 計測回数: " + count++ + "<p> 現在値: " + ambient.value}// devicelight イベントにリスナを追加するwindow.addEventListener("devicelight", output, true);// Firefox 14 か 15 から利用可能になる見込み
  • 29. 実装予定の Web API Device Storage USB file-reading も 低レベルハードウェア Bluetooth, USB, NFC WebSocket 的になりそう ...and more... ネイティブアプリにできることは何でも可能に
  • 30. 検討中の WebAPI Socket API (低レベル TCP) Time/Clock (時刻設定) Alarm Calendar Spellcheck ...and more...
  • 31. もちろん API は標準化 W3C DAP (Device API) WG ハードウェア操作やセンサー系 IETF/W3C WebRTC WG マルチメディア系や P2P など Notification なども個別 WG また別の WG 増えるかも? NFC, USB など低レベル系
  • 32. the Web is the Platform Web こそがプラットフォーム 端末、OS、ブラウザに閉じない Write Once Run Anywhere?
  • 33. これだけあれば…� もちろん***ができる
  • 34. Boot to GeckoWeb Platform OS...
  • 35. ステータスバーも(電波強度、電池残量...)電話や SMS の送受信ももちろん Firefox もカメラを使うのも写真やビデオを見るのもその他いろんなアプリもマーケットプレイスも
  • 36. ステータスバーも (電波強度、電池残量...) 電話や SMS の送受信も もちろん Firefox も カメラを使うのも 写真やビデオを見るのも その他いろんなアプリも マーケットプレイスもすべて Web 技術で!
  • 37. Boot to Gecko Gecko を起動する OS Linux Kernel 上に Gecko を Java VM などの中間レイヤなし Web 技術が「ネイティブ」に HTML5, JavaScript, Web API... Gecko は Firefox の描画エンジン、WebRT = Web Runtime
  • 38. Boot to Gecko の3要素 Gaia ユーザインターフェイス Gecko アプリケーションランタイム Gonk 低レベルの OS 層 シンプルなカスタム Linux
  • 39. Status 2012/03/09 - M2.1 Dogfood Release 2012/03/26 M2.5 Developer Preview Phone JSConf にて開発端末配布
  • 40. Roadmap 2012/06/01 - M3 functional/Gecko complete 2012/06/29 - M4 feature/Gaia complete and code freeze(これはダミー) TBD - M4.5 major bug fixing / UI freeze
  • 41. 開発パートナーと製品化 Telefónica は本年中に製品化 世界 3∼4 位のキャリア ホーム画面やアプリはカスタム Deutsche Telekom (T-Mobile) Innovation Labs が開発に参加 Adobe, Qualcomm らも協力 PhoneGap の B2G 対応など
  • 42. Mozilla Marketplacethe Web is the Platform
  • 43. 既存のプラットフォーム 現在のアプリケーションはそれぞれのプラットフォーム毎に作る必要がある
  • 44. Web がプラットフォーム プラットフォーム としての WebWeb がプラットフォームになれば業界標準技術でどこでも動作するアプリ環境に
  • 45. Mozilla Marketplace デバイス・OS 横断マーケット Web をアプリマーケットに マーケットで Web を分断しない Web アプリの事前登録受付中 今年中に正式リリースを予定 http://hacks.mozilla.org/2012/02/mozillamarketplace-open-for-app-submissions/
  • 46. Web アプリの登録 0. アプリを作る 1. AppManifest を書く 2. Marketplace に登録
  • 47. 0. アプリを作る てきとーに作ってね。
  • 48. 1. AppManifest を書く// 最小限これくらいの JSON 書くだけ。{ "version": "0.1", "name": "DNT Checker", "description": "行動追跡を拒否しているか確認できます", "developer": { "name": "dynamis", "url": "http://dynamis.jp" }}
  • 49. 2. Marketplace に登録
  • 50. 4/26 からユーザ向けの ベータを開始予定 あくまでも予定。 ずれても知りません。
  • 51. 続きは DevCon@Osaka でhttp://mozilla.jp/devcon 6/30 にまた大阪で!
  • 52. 続きは DevCon@Osaka でhttp://mozilla.jp/devcon