HTML5 OS
Upcoming SlideShare
Loading in...5
×
 

HTML5 OS

on

  • 7,985 views

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

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

Statistics

Views

Total Views
7,985
Views on SlideShare
7,842
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/
    • パートナー企業 (一部) 一部。配置・順序に意味はなし
    • 楽しみ楽しみ! 僕もスマホになって君と 一緒にお出かけしたいな!