Movatterモバイル変換

[0]ホーム
URL:

dynamis , profile picture
Uploaded bydynamis
PDF, PPTX2,248 views

Web on Kernel

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

Embed presentation

Download as PDF, PPTX
Web on Kernelfor HTML5-NADO @ 201204by Tomoya ASAI (dynamis) last update on 2012.04.12
about:me http:// dynamis.jp @dynamitter facebook.com/ dynamis mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
きょうのおはなし ばずわーど さいしんのぎじゅつ うぇぶですまほ あぷりをくばろう
Agenda HTML5 WebAPI Boot to Gecko Marketplace
"HTML5"Review the Buzzword...
""HHTTMMLL55"" ってなぁに？ フォクすけに教えて！
The term "HTML5" is widelyused as a buzzword to refer to modern Web technologies... HTML 仕様書に書いてるよ！ http://whatwg.org/html - Introduction
"HTML5" という用語は最新Web 技術を指すバズワード として広く使われています HTML 仕様書に書いてるよ！ http://whatwg.org/html - Introduction
"HTML5" という用語は最新Web 技術を指すバズワード として広く使われています 最新技術って何処までかな？
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
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
今の ""HHTTMMLL55"" は？ フォクすけに教えて！
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
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
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
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
"HTML5" の現状 "HTML5" >> HTML > HTML5 実装や仕様策定に伴い "HTML5" の領域は広がり続けている Web がプラットフォームに 本格的アプリ開発が可能に
これで十分なの？ フォクすけに教えて！
"HTML5" ではまだできない システムステータス 電源, WiFi 情報, モバイル通信... 各種センサー 光センサー, 近接センサー... 低レベルハードウェア制御 USB, BlueTooth, NFC
ボクもいろいろ使ってみた〜い！
やりましょう。 あの人の写真は無断で 使わないでおきます…
Web APINo More Native Apps...
http://arewemobileyet.com/
Web API Web の限界を押し進める HTML5 などの基本 API 以外 API の総称であって定義はない W3C では DAP などで標準化 実装と共に標準化も進めていく 一部別の WG に分かれるかも？ https://wiki.mozilla.org/WebAPI
昔からある Web API Geolocation (位置情報) Orientation (加速度センサー) Audio Data API WebGL (3D グラフィック) Camera API (WebRTC へ統合) これらは既に Android 版 Firefox で実装済み
実装済みの Web API モバイル端末の基本機能中心 SMS, Telephony Settings, Contacts Vibration, Pointer Lock Battery Status (電池や充電) Resource Lock (スリープ禁止) Network Information 実装がまだ一部不完全な API も含む
現在実装中の Web API WebRTC (Camera, P2P など含む) Open Web Apps (アプリ管理) Idel, Power Management Mobile Connection, WiFi Information (無線情報) Light Sensor (環境光センサー), Proximity Sensor (近接センサー) ...and more...
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 から利用可能になる見込み
実装予定の Web API Device Storage USB file-reading も 低レベルハードウェア Bluetooth, USB, NFC WebSocket 的になりそう ...and more... ネイティブアプリにできることは何でも可能に
検討中の WebAPI Socket API (低レベル TCP) Time/Clock (時刻設定) Alarm Calendar Spellcheck ...and more...
もちろん API は標準化 W3C DAP (Device API) WG ハードウェア操作やセンサー系 IETF/W3C WebRTC WG マルチメディア系や P2P など Notification なども個別 WG また別の WG 増えるかも？ NFC, USB など低レベル系
the Web is the Platform Web こそがプラットフォーム 端末、OS、ブラウザに閉じない Write Once Run Anywhere?
これだけあれば…� もちろん＊＊＊ができる
Boot to GeckoWeb Platform OS...
ステータスバーも(電波強度、電池残量...)電話や SMS の送受信ももちろん Firefox もカメラを使うのも写真やビデオを見るのもその他いろんなアプリもマーケットプレイスも
ステータスバーも (電波強度、電池残量...) 電話や SMS の送受信も もちろん Firefox も カメラを使うのも 写真やビデオを見るのも その他いろんなアプリも マーケットプレイスもすべて Web 技術で！
Boot to Gecko Gecko を起動する OS Linux Kernel 上に Gecko を Java VM などの中間レイヤなし Web 技術が「ネイティブ」に HTML5, JavaScript, Web API... Gecko は Firefox の描画エンジン、WebRT = Web Runtime
Boot to Gecko の３要素 Gaia ユーザインターフェイス Gecko アプリケーションランタイム Gonk 低レベルの OS 層 シンプルなカスタム Linux
Status 2012/03/09 - M2.1 Dogfood Release 2012/03/26 M2.5 Developer Preview Phone JSConf にて開発端末配布
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
開発パートナーと製品化 Telefónica は本年中に製品化 世界 3∼4 位のキャリア ホーム画面やアプリはカスタム Deutsche Telekom (T-Mobile) Innovation Labs が開発に参加 Adobe, Qualcomm らも協力 PhoneGap の B2G 対応など
Mozilla Marketplacethe Web is the Platform
既存のプラットフォーム 現在のアプリケーションはそれぞれのプラットフォーム毎に作る必要がある
Web がプラットフォーム プラットフォーム としての WebWeb がプラットフォームになれば業界標準技術でどこでも動作するアプリ環境に
Mozilla Marketplace デバイス・OS 横断マーケット Web をアプリマーケットに マーケットで Web を分断しない Web アプリの事前登録受付中 今年中に正式リリースを予定 http://hacks.mozilla.org/2012/02/mozillamarketplace-open-for-app-submissions/
Web アプリの登録 0. アプリを作る 1. AppManifest を書く 2. Marketplace に登録
0. アプリを作る てきとーに作ってね。
1. AppManifest を書く// 最小限これくらいの JSON 書くだけ。{ "version": "0.1", "name": "DNT Checker", "description": "行動追跡を拒否しているか確認できます", "developer": { "name": "dynamis", "url": "http://dynamis.jp" }}
2. Marketplace に登録
4/26 からユーザ向けの ベータを開始予定 あくまでも予定。 ずれても知りません。
続きは DevCon@Osaka でhttp://mozilla.jp/devcon 6/30 にまた大阪で！
続きは DevCon@Osaka でhttp://mozilla.jp/devcon

Recommended

PDF
Browser and Mozilla
PDF
Web Technology Meeting
PDF
HTML5 in Firefox4
PDF
Pure Web Apps
KEY
Web is the Platform
PDF
CSS.2012
PDF
Firefox5+HTML5×5
PDF
Apps for Web Platform
PDF
Change by HTML5
PDF
HTML & Browsers
PDF
Web Technologies
PDF
Firefox OS App Manager
PDF
Firefox OSがモテないのはどう考えてもお前らが悪い！
PPTX
Fx osコードリーディングの紹介
PDF
JägerMonkey
PDF
Toward Firefox OS
PDF
Kilimanjaro Event
PDF
WebとIE10とWindows 8
PDF
IE10とWindows 8とHTML5
PDF
Concentrated HTML5 & Attractive HTML5
PDF
HTML5 OS
PDF
HTML5開発最前線
PDF
Firefox OS
PDF
JavaScript And Keywords
 
PDF
HTML2013 Web=OS
PDF
Firefox OS - Blaze Your Own Path
PDF
Attractive HTML5
PDF
HTML 2012
PDF
Html5概要 & デモ
PDF
Html5 seminar 1_pac

More Related Content

PDF
Browser and Mozilla
PDF
Web Technology Meeting
PDF
HTML5 in Firefox4
PDF
Pure Web Apps
KEY
Web is the Platform
PDF
CSS.2012
PDF
Firefox5+HTML5×5
PDF
Apps for Web Platform
Browser and Mozilla
Web Technology Meeting
HTML5 in Firefox4
Pure Web Apps
Web is the Platform
CSS.2012
Firefox5+HTML5×5
Apps for Web Platform

Viewers also liked

PDF
Change by HTML5
PDF
HTML & Browsers
PDF
Web Technologies
PDF
Firefox OS App Manager
PDF
Firefox OSがモテないのはどう考えてもお前らが悪い！
PPTX
Fx osコードリーディングの紹介
PDF
JägerMonkey
Change by HTML5
HTML & Browsers
Web Technologies
Firefox OS App Manager
Firefox OSがモテないのはどう考えてもお前らが悪い！
Fx osコードリーディングの紹介
JägerMonkey

Similar to Web on Kernel

PDF
Toward Firefox OS
PDF
Kilimanjaro Event
PDF
WebとIE10とWindows 8
PDF
IE10とWindows 8とHTML5
PDF
Concentrated HTML5 & Attractive HTML5
PDF
HTML5 OS
PDF
HTML5開発最前線
PDF
Firefox OS
PDF
JavaScript And Keywords
 
PDF
HTML2013 Web=OS
PDF
Firefox OS - Blaze Your Own Path
PDF
Attractive HTML5
PDF
HTML 2012
PDF
Html5概要 & デモ
PDF
Html5 seminar 1_pac
PDF
HTML5 + Firefox OS
PDF
Web is the OS (Firefox OS)
PPTX
HTML5とWeb開発に関する最新動向
PDF
Mobile Web
PDF
Firefox and Firebug with Foxkeh
Toward Firefox OS
Kilimanjaro Event
WebとIE10とWindows 8
IE10とWindows 8とHTML5
Concentrated HTML5 & Attractive HTML5
HTML5 OS
HTML5開発最前線
Firefox OS
JavaScript And Keywords
 
HTML2013 Web=OS
Firefox OS - Blaze Your Own Path
Attractive HTML5
HTML 2012
Html5概要 & デモ
Html5 seminar 1_pac
HTML5 + Firefox OS
Web is the OS (Firefox OS)
HTML5とWeb開発に関する最新動向
Mobile Web
Firefox and Firebug with Foxkeh

More from dynamis

PDF
The New Norm of The Web
PDF
Project Gecko Embedded
PDF
Browsers in IoT Era
PDF
Web App Platform Strategy
PDF
HTML5 & Renesas RZ/G
PDF
Life of HTML5
PDF
Life of html5 (osaka)
PDF
New Norm of HTML5
PDF
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
PDF
HTTP and 5G (fixed1)
PDF
HTTP and 5G
PDF
Java script.trend(spec)
PDF
Progressive Mobile Web Apps
PDF
Modern Mobile Web Apps
PDF
Web Tech & Architecture
PDF
Web updates 2017
PDF
HTTP and 5G partial draft
PDF
OSC2016.Enterprise Lightnig Talk
PDF
Demo for Gecko Embedded
PDF
Data Privacy meeting
The New Norm of The Web
Project Gecko Embedded
Browsers in IoT Era
Web App Platform Strategy
HTML5 & Renesas RZ/G
Life of HTML5
Life of html5 (osaka)
New Norm of HTML5
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
HTTP and 5G (fixed1)
HTTP and 5G
Java script.trend(spec)
Progressive Mobile Web Apps
Modern Mobile Web Apps
Web Tech & Architecture
Web updates 2017
HTTP and 5G partial draft
OSC2016.Enterprise Lightnig Talk
Demo for Gecko Embedded
Data Privacy meeting

Web on Kernel

  • 1.
    Web on KernelforHTML5-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.
  • 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 MoreNative Apps...
  • 23.
  • 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 isthe Platform Web こそがプラットフォーム 端末、OS、ブラウザに閉じない Write Once Run Anywhere?
  • 33.
    これだけあれば…� もちろん＊＊＊ができる
  • 34.
    Boot to GeckoWebPlatform OS...
  • 37.
    ステータスバーも(電波強度、電池残量...)電話や SMS の送受信ももちろんFirefox もカメラを使うのも写真やビデオを見るのもその他いろんなアプリもマーケットプレイスも
  • 38.
    ステータスバーも (電波強度、電池残量...) 電話や SMS の送受信も もちろん Firefox も カメラを使うのも 写真やビデオを見るのも その他いろんなアプリも マーケットプレイスもすべて Web 技術で！
  • 39.
    Boot to Gecko Gecko を起動する OS Linux Kernel 上に Gecko を Java VM などの中間レイヤなし Web 技術が「ネイティブ」に HTML5, JavaScript, Web API... Gecko は Firefox の描画エンジン、WebRT = Web Runtime
  • 41.
    Boot to Geckoの３要素 Gaia ユーザインターフェイス Gecko アプリケーションランタイム Gonk 低レベルの OS 層 シンプルなカスタム Linux
  • 42.
    Status 2012/03/09 - M2.1 Dogfood Release 2012/03/26 M2.5 Developer Preview Phone JSConf にて開発端末配布
  • 43.
    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
  • 44.
    開発パートナーと製品化 Telefónica は本年中に製品化 世界 3∼4 位のキャリア ホーム画面やアプリはカスタム Deutsche Telekom (T-Mobile) Innovation Labs が開発に参加 Adobe, Qualcomm らも協力 PhoneGap の B2G 対応など
  • 45.
  • 46.
  • 47.
    Web がプラットフォーム プラットフォーム としての WebWeb がプラットフォームになれば業界標準技術でどこでも動作するアプリ環境に
  • 48.
    Mozilla Marketplace デバイス・OS 横断マーケット Web をアプリマーケットに マーケットで Web を分断しない Web アプリの事前登録受付中 今年中に正式リリースを予定 http://hacks.mozilla.org/2012/02/mozillamarketplace-open-for-app-submissions/
  • 49.
    Web アプリの登録 0. アプリを作る 1. AppManifest を書く 2. Marketplace に登録
  • 50.
  • 51.
    1. AppManifest を書く//最小限これくらいの JSON 書くだけ。{ "version": "0.1", "name": "DNT Checker", "description": "行動追跡を拒否しているか確認できます", "developer": { "name": "dynamis", "url": "http://dynamis.jp" }}
  • 52.
  • 55.
    4/26 からユーザ向けのベータを開始予定 あくまでも予定。 ずれても知りません。
  • 56.
  • 57.
[8]ページ先頭
©2009-2025 Movatter.jp