HTML5 OS
Upcoming SlideShare
Loading in...5
×
 

HTML5 OS

on

  • 8,083 views

神戸ITフェスティバルのプレゼンで使用したスライド

神戸ITフェスティバルのプレゼンで使用したスライド
http://kobe-it-fes.org/archives/1836

Statistics

Views

Total Views
8,083
Views on SlideShare
7,940
Embed Views
143

Actions

Likes
16
Downloads
69
Comments
0

13 Embeds 143

https://twitter.com 73
http://localhost 14
https://si0.twimg.com 13
http://nadiaakma2324.blogspot.com 11
http://master.dev.mahara.org 8
http://homepage1.nifty.com 7
http://alejandrocalero.wordpress.com 5
http://text.world.coocan.jp 3
http://www.onlydoo.com 2
http://twitter.com 2
http://tweetedtimes.com 2
http://www.linkedin.com 2
http://musikagintza.blogspot.com.es 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 OS HTML5 OS Presentation Transcript

  • HTML5 = OSSlides @ Kobe IT Festival 2012 by Tomoya Asai (dynamis) Last Update: 2012/10/06
  • about:me
  • about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  • about:mozilla
  • http://www.mozilla.jp/videos/
  • Agenda
  • 本日のトピック about HTML5 HTML5.1 Web=OS Firefox OS
  • about:foxkeh ときどきプレゼン手伝って くれるフォクすけを紹介します
  • ぼくフォクすけぼくフォクすけ いつか僕も Firefox みたいな 立派なブラウザになるんだ!
  • サーバ (Apache Camel) の上にクライアント (Firefox)
  • 9.14 からキャンペーン開始しています
  • フォクすけの誕生日は 2006/09/01
  • See Also...
  • 今日お話しできないことはスライド見てね 今日話さないことでも 気軽に質問してください
  • Firefox OS & Marketplace Web プラットフォーム Web API が進化を続けている Marketplace Web アプリ配信システム Firefox OS Web がネイティブな OS http://r.dynamis.jp/fxos
  • CSS 最新機能紹介 CSS の新機能紹介 新機能や昨年から変わった点 http://r.dynamis.jp/css2012
  • JavaScript.Next JavaScript の最新仕様 ECMAScript 5th のポイント JavaScript 次世代仕様 ECMAScript 6th や Harmony http://r.dynamis.jp/jsnext
  • 開発者ツール紹介 一通りの機能と使い方 Firefox 標準の開発者ツール 隠し設定やビルトイン関数のリ ファレンスなども含めています Firebug とその拡張機能 アイコンや背景画像を変更する カスタマイズにも言及してます http://r.dynamis.jp/devtools
  • セキュリティ関連機能紹介 セキュリティ大事! 知っておくべき機能です Content Security Policy 次世代セキュリティポリシー Same Origin Policy はもう古い http://r.dynamis.jp/sec
  • HTML5
  • みんな大好き ""HHTTMMLL55"" Mozilla と Firefox も みんな大好きだよね?
  • The term "HTML5" is widelyused as a buzzword to refer to modern Web technologies... WHATWG HTML 仕様書の解説 http://whatwg.org/html - Introduction
  • "HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています WHATWG HTML 仕様書の解説 http://whatwg.org/html - Introduction
  • "HTML5" 以前の Web 文書のための HTML+α 複雑なものは Flash で 互換性のない独自拡張 仕様のない新機能ばかり デバイス毎の Web モバイル Web は別物だった
  • ブラウザ戦争 IE の独占市場を Firefox が崩して Web 標準の時代へ
  • "HTML5" の目的 アプリのための HTML すべてを Web 技術で実現 互換性のある実装に ブラウザの挙動を厳密に定義 マルチデバイス Web どこでも同じ "One Web"
  • Web 標準プラットフォーム vs独自技術で囲い込んだ Web 「ブラウザ戦争」の時代はとっくに終わりました
  • "HTML5" への期待 次世代プラットフォーム アプリ開発のプラットフォーム Web アプリ開発を簡単に 互換性のある範囲の拡大 マルチデバイス展開 コード共通化でコスト削減
  • 既存の独自プラットフォーム現在はプラットフォーム毎に異なる言語で別々のアプリを作る必要がある
  • Web が共通プラットフォーム プラットフォーム としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
  • 僕らの WWeebb を独占から守ろう! Web はみんなのものだから 独占しちゃダメだよね!
  • Web で可能になったこと マルチメディア Audio, Video, Animation, 3D ... アプリケーション Offline, Storage, File ... 高度な通信制御 双方向通信, DNT ...
  • Web ではできなかったこと システムステータス WiFi 情報, モバイル通信... 各種センサー 光センサー, 近接センサー... 低レベルハードウェア制御 USB, BlueTooth, NFC...
  • Multi Media Mouse, HTML5 Key ev. Forms W3C OfflineHTML5 HTML5 SupportParser WAI- XHTML5 ARIA Semantic Elements
  • Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Workers Micro- HTML Data
  • Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Media Workers Layout Queries Micro- HTML Data TransCSS3~ Flex Box form Anim Regions ation
  • Khronos SMIL Vibra- tion WebGL Geo- SVG other location Orien- tation Canvas WHATWG Web IETF Messag- ing Web Multi SPDY Web Sockets DNT Media Mouse, Sockets HTML5 Key ev. XHR2 FileAPI CSP Forms W3C Server- Offline ECMAHTML5 HTML5 Support Sent ev. ECMA ScriptParser Indexed Web WAI- DB XHTML5 Storage ARIA Semantic Elements Web Media Workers Layout Queries Micro- HTML Data Trans CSS3~ Flex Box OGP XPath form RSS Anim Math Regions ation ML WOFF DOM4
  • Khronos SMIL Vibra- MP3 WebCL Webm Opus tion WebGL Geo- SVG H.264 other location Orien- Web Audio Notifi- tation Web Canvas cation WHATWG Web IETF RTC Messag- ing Web TCP Tel Multi SPDY Web Sockets DNT Socket Media Mouse, Sockets HTML5 Key ev. XHR2 Radio FileAPI CSP Forms Net W3C Server- Info Offline ECMAHTML5 HTML5 Support Sent ev. ECMA Script ECMA NFCParser 6th Indexed Web Device WAI- DB Storage Storage XHTML5 ARIA Semantic Web Elements Web SQL Media USB Workers Layout Queries File Micro- Sys HTML Data Trans CSS3~ Flex Box Battery Status OGP XPath form Proxi- Anim mitySchema RSS Math Regions .org ation ML WOFF RDF DOM4
  • もっともっと WWeebb を 進化させなきゃ! 僕らの Web が進化しないと 闇の組織に支配されちゃう!
  • HTML5.1
  • HHTTMMLL55 の次は HHTTMMLL55..11 ? HTML6 じゃないのは ちょっと意外だよね!
  • HTML5 の次は HTML5.1 W3C 仕様書の話です != バズワード "HTML5" HTML5 は 2014 年に標準化 今年中に仕様をほぼ確定に HTML5.1 も平行して標準化 5.1 は 2016 年に標準化 http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
  • HTML5 < HTML << "HTML5" HTML5 = W3C 仕様書 安定化を進めるスナップショット HTML = WHATWG 仕様書 常に進化を続ける最新仕様 "HTML5" = Web 技術全部 てきとーに呼んでるだけ
  • HTML5 = 安定ブランチHTML5.x = ブランチ更新HTML = 最新の HTML 喧嘩して分離したのではない W3C で安定化作業を始めただけ
  • HHTTMMLL の進化は続いてるんだね! HTML5.x の安定化中も HTMLの進化は止まらない
  • Web = OS
  • 今の ""HHTTMMLL55"" で満足してちゃだめ! 未来に向かって走り続けなきゃ! ぼくは足短いから走るの遅いけど
  • JavaScript の進化 次世代 JS 最高! Firefox が最も実装進んでる 慣れると現 JS 書くのがツライ 高速化やデバッグ容易化 Class, TypedArray, ParallelArray ... 静的解析でコンパイル時エラーを 出しやすい言語仕様に
  • TypeScript ってどうなの? JS はすべて TS だって! 互換性大事だよね! 次世代 JS 使えるって! でも実装がダメ (><) MS お得意の独自拡張 お得意のインテリセンスも
  • たったこれだけでも非互換// JavaScript (Firefox 実装済み)(function(){ var [a, b] = [1, 2]; // 関数スコープ})();console.log(a);// -> TypeScript で変換後(function () { var __missing; [a, b] = [1, 2]; // グローバル})();console.log(a);// もしバグじゃなくて仕様なら残念すぎる
  • 雨後の筍がポコポコ生えてる? CoffeeScript 次世代 JS の先輩的存在 Dart 他人。Chrome に囲い込み? JSX 誰が書いても遅くならない
  • JavaScript が常に勝つ! すべて問題解決してきた 速度遅い → 高速化 ミス多発 → Strict Mode スレッドがない → Workers GPU 使えない → WebGL Class 使いたい → 入るよ 写真は JavaScript の父 Brendan Eich (Mozilla CTO) です
  • Web デザインの進化 フィルター SVG Filter, CSS Filter レイアウト Grid, Regions, Exclusions... CSS 構文の進化 @document, variable ...
  • SVG Filter, CSS Filter Mozilla: 既にある SVG 使おうぜ! WebKit: SVG なんてシラネ。 俺は何でも CSS でやるぜ! Mozilla: 仕方ないな…
  • レイアウトいろいろ by Adobe
  • アニメーションの進化 乱立しすぎ&連携無し! JavaScript Animation Canvas 2D, WebGL SVG & SMIL CSS Transisions, Animations Web Animations へ
  • Web Animations へ Apple (Flash 代替技術として): CSS でアニメーション! Mozilla & Opera: クソ構文は直して標準化 Mozilla, Google, Adobe: JS と一括管理できる API 作ろう Web Animations は Mozilla Japan の Brian さん頑張ってます
  • マルチメディアの進化 Audio Data, Web Audio Camera API (Media Capture) WebRTC - getUserMedia 電話会議などは簡単に
  • WebRTC (getUserMedia)
  • WebRTC (getUserMedia)
  • インタラクティブ系の進化 Touch Event Vibration Gamepad Pointer Lock Resource Lock Idle
  • BananaBreadhttps://developer.mozilla.org/ja/demos/detail/bananabread
  • BananaBreadhttps://developer.mozilla.org/ja/demos/detail/bananabread
  • ネットワーク系の進化 Server-Sent Event WebSocket SPDY v2, v3 ... HTTP 2.0? WebRTC - P2P TCP Socket UDP Datagram Socket
  • デバイス間連携の進化 Web Intents Web Activities Push Notification
  • デバイス間連携はこれから本番 Mozilla: Web Activities! Google: Web Intents! Mozilla & Google: WHATWG で標準化議論中 共に将来非互換になる見込み この辺の話はカエルさん(小松さん)が扱ってましたね
  • ステータス系の進化 WiFi Info, Mobile Connection Network Info (通信速度等) Battery Status
  • センサー系の進化 Geolocation (位置情報) Orientation (加速度) Ambient Light (環境光) Proximity (近接)
  • ハードウェア系の進化 Bluetooth USB, USB file-reading NFC FM Radio
  • スマホ系の進化 SMS, Telephony (電話) Contacts, Settings UDB Datagram Socket HTTP-cache, Log Background Service
  • アプリとしての進化 Open Web Apps アプリとしてインストール FileReader, FileHandle Device Storage
  • ホンモノの Web "アプリ" ブラウザという枠を飛び出して動作
  • Android でも実装済み 開発版での画面です
  • 夢が広がるね! 僕はまず立派なブラウザになり いつかは立派な OS にならなきゃ
  • Firefox OS WebRT as an OS...
  • おーえすになる! 僕より先に OS になるんだね やっぱり Firefox って凄いや!
  • ステータスバーも(電波強度、電池残量...)カメラやラジオも電話や SMS の送受信ももちろん Firefox も音楽やビデオの再生もマーケットプレイスも3Dアプリも その他なんでも...
  • ステータスバーも (電波強度、電池残量...) カメラやラジオも 電話や SMS の送受信も もちろん Firefox も 音楽やビデオの再生も マーケットプレイスも 3Dアプリも その他なんでも...すべて Web 技術で!
  • 開発パートナーと製品化 Telefónica が来年初め発売 世界 3∼4 位のキャリア 最初はブラジルで発売予定 Qualcomm のチップを使用 端末製造は ZTE や TCL and more... 掲載ロゴはパートナー企業の一部です: http://mozilla.jp/blog/entry/9603/
  • パートナー企業 (一部) 一部。配置・順序に意味はなし
  • 楽しみ楽しみ! 僕もスマホになって君と 一緒にお出かけしたいな!