Web=OS − Firefox OSefsta12 × html5jby Tomoya ASAI (dynamis)Last Update: 2013/02/22
about:me
Tomoya ASAIMozilla JapanTechnical Marketing (Evangelist)dynamis @ communitydynamis.jp@dynamitterfacebook.com/dynamismailto...
about:mozilla
about:foxkeh
いつか僕も Firefox みたいな立派なブラウザになるんだ!
サーバ (Apache Camel) の上にクライアント (Firefox)
Firefox のステッカーを君のPC とスマホに貼ってね!
about:lesserpanda
ある日の Mozilla Corporation オフィスです
ある日の Mozilla Corporation オフィスの一室です
ある日の Mozilla Corporation オフィスの一室です
Topics
TopicsBackgroundWeb PlatformFirefox OSMarketplaceApp Dev (slides only)
Background
現在のアプリエコシステムアプリマーケットで配信iOS <=> App StoreAndroid <=> Google PlayWindows <=> Windows Store販売、アプリ内課金、広告課金の手数料は 30% が標準その他アフィリ...
既存エコシステムの課題OS 毎のアプリ開発が必要言語や API は OS に依存iOS/Windows は UI 制限も強いWebView はサブセットWebView << Native追加 API も標準化されない継続性、互換性、実装依存…
既存マーケットの課題独占的マーケット恣意的・排他的レビュー (iOS)ユーザに直接リーチできない独占的課金システム他の課金システム利用不可 (iOS)手数料は原則 30%Paypal (2.9 3.6%+¥40) の10倍!
独自プラットフォームプラットフォーム毎に異なる言語で個別の専用アプリを作る必要があるi a f c
"HTML5" の目的アプリ のための HTMLHTML は文書専用じゃない互換性 のある実装にブラウザの挙動を厳密に定義マルチデバイス Webどこでも同じ Web 技術で
Web 標準プラットフォームプラットフォームとしての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
It is necessary to evolveHTML incrementally. Theattempt to get the worldto switch to XML, ... all atonce didnt work.by Tim...
HTML は段階的に発展させる必要がある。...すべてを一度に切り替えようという試みは成功しなかった。by Tim Berners-Lee: http://dig.csail.mit.edu/breadcrumbs/node/166
Web Platform への期待次世代プラットフォームWeb 技術で何でも可能にマルチデバイス対応開発言語や API の共通化ベンダー非依存の標準自由で持続性のある API
Web が共通プラットフォームWeb がプラットフォームなら標準技術でアプリ環境が統一されるプラットフォームとしての Web
標準技術 のオープンな世界vs独自技術 による囲い込み「ブラウザ戦争」の時代はとっくに終わりました
多くの開発者が "HTML5" に79% が "HTML5" を採用21% が Native だけで開発但しその殆どは Hybrid同調査では 72% が Hybridこれまでの Web は力不足だった"HTML5" に期待するアプリ開発者Ap...
開発者の多いプラットフォーム調査にも依るけど HTML5 開発者の方が圧倒的に多い800万人45万人10万人
Web Platform の課題機能的な制約デバイスやシステム系の API 不足パフォーマンスJava などに比べても数倍遅いアプリ配信と課金Market や Payment の標準がないマイクロベンチなら JS ~= Java に追いついたが...
Web Platform
Web 技術 = Native へWeb 技術が「ネイティブ」HTML/CSS/JS ですべて可能に新しい API は W3C 標準化速度も Java に追いつく単純な演算程度なら既に同程度WebGL や DOMCrypt なども活用asm.j...
Web で可能になってることマルチメディアAudio, Video, Animation, 3D ...アプリケーションOffline, Storage, Indexed DB...高度な通信制御双方向通信, Server-Sent Event....
Web ではできなかったことシステムステータスWiFi 情報, モバイル通信...各種センサー光センサー, 近接センサー...低レベルハードウェア制御USB, BlueTooth, NFC...2011 年にはできなかったことの一例
SemanticElementsMultiMediaHTML5FormsOfflineSupportHTML5HTML5ParserMouse,Key ev.XHTML5WAI-ARIAW3C
SemanticElementsMultiMediaCanvasHTML5FormsOfflineSupportMicro-DataServer-Sent ev.WebSocketsWebStorageHTML5HTML5ParserMouse,K...
SemanticElementsMultiMediaCanvasHTML5FormsOfflineSupportMicro-DataServer-Sent ev.WebSocketsWebStorageLayoutMediaQueriesHTML5...
SemanticElementsMultiMediaCanvasHTML5FormsOfflineSupportMicro-DataWebGLIndexedDBSVGServer-Sent ev.WebSocketsWebSocketsGeo-lo...
SemanticElementsMultiMediaCanvasHTML5FormsOfflineSupportWebmH.264Micro-DataWebGLWebSQLIndexedDBSVGServer-Sent ev.WebSocketsW...
H.264IndexedDBFileAPIWebAudioCSS3~OpusECMA6thCSPWebRTCNetInfoDeviceStorageTCPSocketFileSysNotifi-cationProxi-mityBatterySta...
JavaScript の進化次世代 JS への移行Firefox が最も実装進んでる慣れると現 JS 書くのがツライ高速化やデバッグ容易化Class, TypedArray, ParallelArray ...静的解析でコンパイル時エラーを出し...
JavaScript は進化を続ける!すべて問題解決してきた速度遅い → 高速化ミス多発 → Strict Modeスレッドがない → WorkersGPU 使えない → WebGL, WebCLClass 使いたい → 入るよ*** できない...
asm.js でネイティブ並の速度に重い処理も asm.js で C の 1/2 程度までJava や C# と同程度の処理速度
Unreal Engine on Browser100 万行以上の C & OpenGL コードを移植LLVM + Emscripten で asm.js 形式に変換
ストレージ系の進化IndexedDBLocal Storage は縮小化の方向FileReader, FileHandleFileWriter, FileSystem も?Device StorageArchive (ZIP 読み出し)
File System API 周りの話Google:ネイティブと一緒で良いじゃんファイルシステム使おうぜ!Mozilla:ファイルシステムなんて前近代的抽象化したコレクションにすべき現在のところ平行線…
デザイン機能の進化レイアウトGrid, Regions, Exclusions...Flexbox (XUL 的レイアウト)フィルターSVG Filter, CSS FilterCSS 構文の進化@document, variable ...
CSS Exclusions自由な形の領域にテキストを流し込めますChrome Canary - http://html.adobe.com/webstandards/cssexclusions/
CSS Regions複数領域にテキストを流し込み方向やサイズに応じたレイアウトも簡単Chrome Canary - http://html.adobe.com/webstandards/cssregions/
CSS Filtersぼかしや色調整などのフィルタ効果や曲げたり回したり変形も自由自在にChrome Canary -http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/
SVG Filter & CSS FilterMozilla:既にある SVG 使おうぜ!WebKit:SVG なんてシラネ。俺は何でも CSS でやるぜ!Mozilla:仕方ないな…
アニメーションの進化乱立しすぎ&連携無しJavaScript AnimationCanvas 2D, WebGLSVG & SMILCSS Transitions, AnimationsWeb Animations で連携へ
Web Animations へApple (Flash 代替技術として):CSS でアニメーション!Mozilla & Opera:ダメ構文は直して標準化Mozilla, Google, Adobe:JS と一括管理できる API 作ろうWe...
マルチメディアの進化Opus Audio Codec (RFC6716)Web Audio, Audio DataWeb Audio にも Firefox 近日対応Camera API (Media Capture)WebRTC - getUs...
No Comply2次元&3次元グラフィックスと音声&ビデオのリアルタイム処理https://developer.mozilla.org/ja/demos/detail/no-comply
#RIO20 ECOSPHERERio+20 に関するツイートをグループ化時間の流れに応じて増えていく様子を可視化http://cnn-ecosphere.com/
WebRTC (getUserMedia)カメラを使ったデータ処理も可能ビデオ会議やリアルタイム動画分析にNightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/
インタラクティブ系の進化Touch EventVibrationGamepadPointer Lockポインタを隠して移動量を取得
Banana Breadファーストパーソンシューティング3D ゲームも普通に動作しますhttps://developer.mozilla.org/ja/demos/detail/bananabread
センサー系の進化従来からの Web APIGeolocation (位置情報)Orientation (加速度)Sensor APIAmbient Light (環境光)Proximity (近接)Android 版 Firefox は実装済み
ネットワーク系の進化WebSocketServer-Sent EventSPDY v2, v3 ... HTTP 2.0WebRTC - Peer to PeerTCP Socket, HTTP-cacheUDP Datagram Socket
Browser Questリアルタイムに多人数で同時プレイ (MMORPG)柔軟な画面サイズ対応と双方向通信によるhttp://browserquest.mozilla.org/
デバイス間連携の進化Web ActivitiesPush NotificationWeb Intents (終了)この辺の話はカエルさん(小松さん)に聞きましょう
デバイス間連携はこれから本番Mozilla:Web Activities!Google:Web Intents!Google:Web Intents やーめた!Mozilla:Web Activities は続けるよ!この辺の話はカエルさん(小...
Social 連携の進化Social APIFirefox×Facebook 導入済みマルチプロバイダ対応mixi, CliqZ, MSN Now, Weibo...用途は "Social" に限らないある意味サイドバー API...
ステータス系の進化WiFi InformationMobile ConnectionNetwork Info (通信速度等)Battery Status電池残量に応じた処理を
ハードウェア系の進化BluetoothUSBUSB file-readingFM RadioNFC
System 系の進化Resource Lockスリープや WiFi オフなどの禁止Settings (システム設定)Alarm (時刻指定処理)Background ServiceIdle, Log
セキュリティ面での進化Content Security Policy特に XSS 対策に有効Firefox 4 や Chrome 実装済みPermission APIアプリが使える API も管理アプリ毎の権限を制御可能に
アプリの権限管理はユーザが自由に制御可能重要な API は実行時にユーザに許可を求めるアプリの権限管理
Web 標準を充実させよう!Web = Native に不足機能はすべて定義・実装W3C の WG などで標準化実装と平行して標準化Device API, System Apps...そのほか IETF などでもhttps://wiki.moz...
Web API の標準化Device API, System Application, Web Apps WG が主実装面では圧倒的に Firefox がリードしているFYI: http://www.w3.org/Mobile/mobile-w...
僕はまず立派なブラウザになりいつかは立派な OS にならなきゃ
Firefox OS
ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ もその他なんでも...
ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ もその他なんでも...すべて Web 技術で!
シンプル&スマートWeb プラットフォームの実行環境としては圧倒的にスマート!WHAT IS FIREFOX OS?HOW IS IT DIFFERENT FROM ANDROIDHTML5 UserExperience/ContentKern...
Firefox OS のアーキテクチャWHAT IS FIREFOX OS:ARCHITECTURE OVERVIEWWeb APII/O (hardware & data stores)Boot to Gecko (b2g)Device ha...
Firefox OS とセキュリティユーザがアプリ権限管理可インストール時と実行時に権限を許可するハイブリッド方式「インストール時に全て許可」ではプライバシーは守れなかったユーザが理解できプライバシーなどに関わる API は実行時確認
Developer Preview Phone来週ストアオープンKeon:Snapdragon 1GHz, 4GB ROM,512MB RAM, 3.5" HVGAPeak:Snapdragon 1.2GHz x2, 4GB ROM,512MB...
Developer Preview PhoneTelefónica と Geeksphone が作る開発者向けテスト端末
開発パートナーと製品化KDDI, Telefónica ...世界の主要 18 キャリアZTE, Alcatel, LG, Huawei, Sony...6 月に 5ヶ国で発売予定スペイン、ブラジル、ベネズエラ、ポーランド、ポルトガル2013 ...
MWC で発表したパートナー主要なキャリア、端末メーカー、チップメーカーなど
端末&チップメーカーSONY Mobile は Telefónica と Firefox OS について提携
いつ Web にするか?
いつ Web にするか?
Marketplace
Web = アプリマーケットへOpen Web AppsWeb アプリのインストール APIFirefox Marketplaceオープンなマーケットの提供Web Paymentsオープンな課金 API の実装
Mozilla は Web エンジンに注力ビジネスは自由に独自 Market や自己配布も可能決済手段も自由にベンダー、決済手段、認証システムに依存しない Payment APIハードは Android と共通HAL は Android と共通化
独占的プラットフォームからオープンな Web へ開発者/OEM/キャリアAppleApp StoreiPhone/iPadユーザGooglePlay端末ユーザMSMarketplace端末ユーザmarket 開発者/OEM// キャリアユーザ端...
Firefox MarketplaceDevice, OS 横断マーケットWeb Platform のためのストアFirefox 限定にならない設計現在開発者向けに公開中Firefox OS と Android 版 Firefoxの開発版ユーザ...
オープンなアプリストア全てを Web 技術で実装安定・平等な環境を提供Marketplace のソースも公開ベンダー非依存Firefox Marketplace 以外にもストア、認証、課金も自由にhttps://marketplace.fire...
Marketplace パートナーの例多数のパートナーのうち一例です
Firefox = WebRT (WebRunTime)Gecko = アプリ環境Firefox = Gecko で XUL/JSWebApps = Gecko で HTML/JSマルチデバイス対応PC, Android, Firefox OS...
Android に Web アプリ環境Web App = Native App にホームスクリーンへの追加独立してフル画面起動ネイティブ同様の利用体験Firefox = WebRT for Androidホームにインストール、アプリを起動した画...
PC にも Web アプリ環境Web App = Native App にプログラムフォルダ (アプリケーションディレクトリ) への追加ウィンドウはもちろんプロセスもデータも全て独立Firefox = WebRT for PC
Web = MarketplaceMarketplace に縛られないWeb はアクセスすれば使えるMarketplace のアプリでなくともアプリ内課金 API が利用可能Web/Marketplace 横断検索Firefox Marketp...
アプリも「ぐぐる」時代へ"まずインストール" は古いディレクトリ(分類)だけのマーケットでは Google 以前の Web動的な Web アプリ環境インストール不要で使える検索も Market / Web 横断検索*1 everything.m...
アプリ内に直接ジャンプ
Web らしいシステムだね!
いつアプリ作るか?
いつアプリ作るか?
App Dev
Firefox OS のアプリ開発Web アプリです。Web アプリです。Web アプリです。大事なこと3回
Firefox OS のアプリ開発Web アプリです。Web アプリです。Web アプリです。大事なこと3回
Firefox OS のアプリ開発いつもの開発ツールいつものエディタいつものライブラリ
アプリ開発の流れ普通に Web 開発デバッグもいつも通りmanifest ファイルを用意メタ情報を JSON 形式で記載シミュレータや実機テストPC で動かない API は実機で確認Vibration や Sensor など...https:/...
manifest.webapp 追加するだけHosted AppWeb から読み込むアプリWeb サイト + manifest.webappPackaged App従来型のダウンロードアプリサイト全体を ZIP するだけ
manifest.webapp ファイルhttps://developer.mozilla.org/en-US/docs/Apps/Manifest
Firefox OS Simulator再起動不要の拡張機能https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/ポチッと押すだけWeb 開発メニューに追加されるFiref...
Firefox OS Simulator (r2d2b2g)プロファイル付きデスクトップビルドにホームボタンを追加コンソールやディレクトリからアプリケーションを読み込む機能も
シミュレータにインストールAdd Directory ボタンmanifest ファイルを選択zip されて packaged app としてインストールされ、起動するUpdate ボタンで更新同じディレクトリのファイルをzip し直して、起動す...
Firefox OS 標準のライブラリとかあるの?
GAIA Building Blocks (UI 部品)Gaia (Firefox OS 標準) Appsのデザインを簡単に作れるhttp://buildingfirefoxos.com/使っても使わなくても OK好きな SDK/Library ...
For More Info
Firefox OS コミュニティを!http://FxOS.org/(https://groups.google.com/group/firefoxos にリダイレクト)http://FxOS.org/wiki(https://github.c...
ぼくには難しいことは分からないけど許してね。
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Web is the OS (Firefox OS)
Upcoming SlideShare
Loading in...5
×

Web is the OS (Firefox OS)

12,412

Published on

エフスタ と HTML5とか勉強会 − ふくしまの春風 で使用したスライド (当日割愛した追加セクションあり)
http://kokucheese.com/event/index/74303/

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

No Downloads
Views
Total Views
12,412
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
54
Comments
0
Likes
29
Embeds 0
No embeds

No notes for slide

Web is the OS (Firefox OS)

  1. 1. Web=OS − Firefox OSefsta12 × html5jby Tomoya ASAI (dynamis)Last Update: 2013/02/22
  2. 2. about:me
  3. 3. Tomoya ASAIMozilla JapanTechnical Marketing (Evangelist)dynamis @ communitydynamis.jp@dynamitterfacebook.com/dynamismailto: Tomoya ASAI <dynamis mozilla-japan.org>@
  4. 4. about:mozilla
  5. 5. about:foxkeh
  6. 6. いつか僕も Firefox みたいな立派なブラウザになるんだ!
  7. 7. サーバ (Apache Camel) の上にクライアント (Firefox)
  8. 8. Firefox のステッカーを君のPC とスマホに貼ってね!
  9. 9. about:lesserpanda
  10. 10. ある日の Mozilla Corporation オフィスです
  11. 11. ある日の Mozilla Corporation オフィスの一室です
  12. 12. ある日の Mozilla Corporation オフィスの一室です
  13. 13. Topics
  14. 14. TopicsBackgroundWeb PlatformFirefox OSMarketplaceApp Dev (slides only)
  15. 15. Background
  16. 16. 現在のアプリエコシステムアプリマーケットで配信iOS <=> App StoreAndroid <=> Google PlayWindows <=> Windows Store販売、アプリ内課金、広告課金の手数料は 30% が標準その他アフィリエイトなど
  17. 17. 既存エコシステムの課題OS 毎のアプリ開発が必要言語や API は OS に依存iOS/Windows は UI 制限も強いWebView はサブセットWebView << Native追加 API も標準化されない継続性、互換性、実装依存…
  18. 18. 既存マーケットの課題独占的マーケット恣意的・排他的レビュー (iOS)ユーザに直接リーチできない独占的課金システム他の課金システム利用不可 (iOS)手数料は原則 30%Paypal (2.9 3.6%+¥40) の10倍!
  19. 19. 独自プラットフォームプラットフォーム毎に異なる言語で個別の専用アプリを作る必要があるi a f c
  20. 20. "HTML5" の目的アプリ のための HTMLHTML は文書専用じゃない互換性 のある実装にブラウザの挙動を厳密に定義マルチデバイス Webどこでも同じ Web 技術で
  21. 21. Web 標準プラットフォームプラットフォームとしての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
  22. 22. It is necessary to evolveHTML incrementally. Theattempt to get the worldto switch to XML, ... all atonce didnt work.by Tim Berners-Lee: http://dig.csail.mit.edu/breadcrumbs/node/166
  23. 23. HTML は段階的に発展させる必要がある。...すべてを一度に切り替えようという試みは成功しなかった。by Tim Berners-Lee: http://dig.csail.mit.edu/breadcrumbs/node/166
  24. 24. Web Platform への期待次世代プラットフォームWeb 技術で何でも可能にマルチデバイス対応開発言語や API の共通化ベンダー非依存の標準自由で持続性のある API
  25. 25. Web が共通プラットフォームWeb がプラットフォームなら標準技術でアプリ環境が統一されるプラットフォームとしての Web
  26. 26. 標準技術 のオープンな世界vs独自技術 による囲い込み「ブラウザ戦争」の時代はとっくに終わりました
  27. 27. 多くの開発者が "HTML5" に79% が "HTML5" を採用21% が Native だけで開発但しその殆どは Hybrid同調査では 72% が Hybridこれまでの Web は力不足だった"HTML5" に期待するアプリ開発者Appcelerator&IDC 2012Q1 http://www.appcelerator.com/thinkmobile/surveys/
  28. 28. 開発者の多いプラットフォーム調査にも依るけど HTML5 開発者の方が圧倒的に多い800万人45万人10万人
  29. 29. Web Platform の課題機能的な制約デバイスやシステム系の API 不足パフォーマンスJava などに比べても数倍遅いアプリ配信と課金Market や Payment の標準がないマイクロベンチなら JS ~= Java に追いついたが実アプリレベルでは JS 遅い
  30. 30. Web Platform
  31. 31. Web 技術 = Native へWeb 技術が「ネイティブ」HTML/CSS/JS ですべて可能に新しい API は W3C 標準化速度も Java に追いつく単純な演算程度なら既に同程度WebGL や DOMCrypt なども活用asm.js で大規模アプリも高速化Web 技術だけですべてが済むプラットフォームとなるよう発展中
  32. 32. Web で可能になってることマルチメディアAudio, Video, Animation, 3D ...アプリケーションOffline, Storage, Indexed DB...高度な通信制御双方向通信, Server-Sent Event...2011 年にはできていたことの一例
  33. 33. Web ではできなかったことシステムステータスWiFi 情報, モバイル通信...各種センサー光センサー, 近接センサー...低レベルハードウェア制御USB, BlueTooth, NFC...2011 年にはできなかったことの一例
  34. 34. SemanticElementsMultiMediaHTML5FormsOfflineSupportHTML5HTML5ParserMouse,Key ev.XHTML5WAI-ARIAW3C
  35. 35. SemanticElementsMultiMediaCanvasHTML5FormsOfflineSupportMicro-DataServer-Sent ev.WebSocketsWebStorageHTML5HTML5ParserMouse,Key ev.XHTML5WebWorkersWebMessag-ingWAI-ARIAW3CWHATWGHTML
  36. 36. SemanticElementsMultiMediaCanvasHTML5FormsOfflineSupportMicro-DataServer-Sent ev.WebSocketsWebStorageLayoutMediaQueriesHTML5CSS3~TransformAnimationRegionsFiltersHTML5ParserMouse,Key ev.XHTML5WebWorkersWebMessag-ingWAI-ARIAW3CWHATWGHTML
  37. 37. SemanticElementsMultiMediaCanvasHTML5FormsOfflineSupportMicro-DataWebGLIndexedDBSVGServer-Sent ev.WebSocketsWebSocketsGeo-locationFileAPIWebStorageXHR2MathMLLayoutMediaQueriesHTML5CSS3~TransformAnimationRegionsFiltersHTML5ParserMouse,Key ev.ECMAScriptCSPSPDYXHTML5Orien-tationWebWorkersWebMessag-ingDOM4SMIL Vibra-tionXPathRSSOGPWAI-ARIAW3CWHATWGotherKhronosECMAIETFWOFFHTMLDNT
  38. 38. SemanticElementsMultiMediaCanvasHTML5FormsOfflineSupportWebmH.264Micro-DataWebGLWebSQLIndexedDBSVGServer-Sent ev.WebSocketsWebSocketsGeo-locationFileAPIWebStorageXHR2MathMLWebAudioLayoutMediaQueriesHTML5CSS3~TransformAnimationRegionsFiltersHTML5ParserMouse,Key ev.OpusECMAScript ECMA6thUSBCSPSPDYWebCLWebRTCNetInfoMP3DeviceStorageTCPSocketNFCFileSysNotifi-cationXHTML5Orien-tationWebWorkersWebMessag-ingDOM4SMIL Vibra-tionProxi-mityXPathRSSRDFOGPSchema.orgWAI-ARIAW3CWHATWGotherKhronosECMAIETFWOFFBatteryStatusRadioTelHTMLDNTFlexBox
  39. 39. H.264IndexedDBFileAPIWebAudioCSS3~OpusECMA6thCSPWebRTCNetInfoDeviceStorageTCPSocketFileSysNotifi-cationProxi-mityBatteryStatusRadioTelDNTSPDYこの辺りが2012 年の進化RegionsFiltersFlexBox今年はもっと!
  40. 40. JavaScript の進化次世代 JS への移行Firefox が最も実装進んでる慣れると現 JS 書くのがツライ高速化やデバッグ容易化Class, TypedArray, ParallelArray ...静的解析でコンパイル時エラーを出しやすい言語仕様に
  41. 41. JavaScript は進化を続ける!すべて問題解決してきた速度遅い → 高速化ミス多発 → Strict Modeスレッドがない → WorkersGPU 使えない → WebGL, WebCLClass 使いたい → 入るよ*** できない → API 増加中写真は JavaScript の父 Brendan Eich (Mozilla CTO) です
  42. 42. asm.js でネイティブ並の速度に重い処理も asm.js で C の 1/2 程度までJava や C# と同程度の処理速度
  43. 43. Unreal Engine on Browser100 万行以上の C & OpenGL コードを移植LLVM + Emscripten で asm.js 形式に変換
  44. 44. ストレージ系の進化IndexedDBLocal Storage は縮小化の方向FileReader, FileHandleFileWriter, FileSystem も?Device StorageArchive (ZIP 読み出し)
  45. 45. File System API 周りの話Google:ネイティブと一緒で良いじゃんファイルシステム使おうぜ!Mozilla:ファイルシステムなんて前近代的抽象化したコレクションにすべき現在のところ平行線…
  46. 46. デザイン機能の進化レイアウトGrid, Regions, Exclusions...Flexbox (XUL 的レイアウト)フィルターSVG Filter, CSS FilterCSS 構文の進化@document, variable ...
  47. 47. CSS Exclusions自由な形の領域にテキストを流し込めますChrome Canary - http://html.adobe.com/webstandards/cssexclusions/
  48. 48. CSS Regions複数領域にテキストを流し込み方向やサイズに応じたレイアウトも簡単Chrome Canary - http://html.adobe.com/webstandards/cssregions/
  49. 49. CSS Filtersぼかしや色調整などのフィルタ効果や曲げたり回したり変形も自由自在にChrome Canary -http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/
  50. 50. SVG Filter & CSS FilterMozilla:既にある SVG 使おうぜ!WebKit:SVG なんてシラネ。俺は何でも CSS でやるぜ!Mozilla:仕方ないな…
  51. 51. アニメーションの進化乱立しすぎ&連携無しJavaScript AnimationCanvas 2D, WebGLSVG & SMILCSS Transitions, AnimationsWeb Animations で連携へ
  52. 52. Web Animations へApple (Flash 代替技術として):CSS でアニメーション!Mozilla & Opera:ダメ構文は直して標準化Mozilla, Google, Adobe:JS と一括管理できる API 作ろうWeb Animations は Mozilla Japan の Brian さん頑張ってます
  53. 53. マルチメディアの進化Opus Audio Codec (RFC6716)Web Audio, Audio DataWeb Audio にも Firefox 近日対応Camera API (Media Capture)WebRTC - getUserMedia電話会議などは簡単に
  54. 54. No Comply2次元&3次元グラフィックスと音声&ビデオのリアルタイム処理https://developer.mozilla.org/ja/demos/detail/no-comply
  55. 55. #RIO20 ECOSPHERERio+20 に関するツイートをグループ化時間の流れに応じて増えていく様子を可視化http://cnn-ecosphere.com/
  56. 56. WebRTC (getUserMedia)カメラを使ったデータ処理も可能ビデオ会議やリアルタイム動画分析にNightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/
  57. 57. インタラクティブ系の進化Touch EventVibrationGamepadPointer Lockポインタを隠して移動量を取得
  58. 58. Banana Breadファーストパーソンシューティング3D ゲームも普通に動作しますhttps://developer.mozilla.org/ja/demos/detail/bananabread
  59. 59. センサー系の進化従来からの Web APIGeolocation (位置情報)Orientation (加速度)Sensor APIAmbient Light (環境光)Proximity (近接)Android 版 Firefox は実装済み
  60. 60. ネットワーク系の進化WebSocketServer-Sent EventSPDY v2, v3 ... HTTP 2.0WebRTC - Peer to PeerTCP Socket, HTTP-cacheUDP Datagram Socket
  61. 61. Browser Questリアルタイムに多人数で同時プレイ (MMORPG)柔軟な画面サイズ対応と双方向通信によるhttp://browserquest.mozilla.org/
  62. 62. デバイス間連携の進化Web ActivitiesPush NotificationWeb Intents (終了)この辺の話はカエルさん(小松さん)に聞きましょう
  63. 63. デバイス間連携はこれから本番Mozilla:Web Activities!Google:Web Intents!Google:Web Intents やーめた!Mozilla:Web Activities は続けるよ!この辺の話はカエルさん(小松さん)に聞きましょう
  64. 64. Social 連携の進化Social APIFirefox×Facebook 導入済みマルチプロバイダ対応mixi, CliqZ, MSN Now, Weibo...用途は "Social" に限らないある意味サイドバー API...
  65. 65. ステータス系の進化WiFi InformationMobile ConnectionNetwork Info (通信速度等)Battery Status電池残量に応じた処理を
  66. 66. ハードウェア系の進化BluetoothUSBUSB file-readingFM RadioNFC
  67. 67. System 系の進化Resource Lockスリープや WiFi オフなどの禁止Settings (システム設定)Alarm (時刻指定処理)Background ServiceIdle, Log
  68. 68. セキュリティ面での進化Content Security Policy特に XSS 対策に有効Firefox 4 や Chrome 実装済みPermission APIアプリが使える API も管理アプリ毎の権限を制御可能に
  69. 69. アプリの権限管理はユーザが自由に制御可能重要な API は実行時にユーザに許可を求めるアプリの権限管理
  70. 70. Web 標準を充実させよう!Web = Native に不足機能はすべて定義・実装W3C の WG などで標準化実装と平行して標準化Device API, System Apps...そのほか IETF などでもhttps://wiki.mozilla.org/WebAPI
  71. 71. Web API の標準化Device API, System Application, Web Apps WG が主実装面では圧倒的に Firefox がリードしているFYI: http://www.w3.org/Mobile/mobile-web-app-state/
  72. 72. 僕はまず立派なブラウザになりいつかは立派な OS にならなきゃ
  73. 73. Firefox OS
  74. 74. ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ もその他なんでも...
  75. 75. ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ もその他なんでも...すべて Web 技術で!
  76. 76. シンプル&スマートWeb プラットフォームの実行環境としては圧倒的にスマート!WHAT IS FIREFOX OS?HOW IS IT DIFFERENT FROM ANDROIDHTML5 UserExperience/ContentKernelDeviceWeb Engine/StandardDevice APIsFirefox OSWeb Browser/PlatformNative API-based UIKernel(e.g. Android, iOS,Win7, etc.)Device(phone, tablet,desktop)APIsAndroid
  77. 77. Firefox OS のアーキテクチャWHAT IS FIREFOX OS:ARCHITECTURE OVERVIEWWeb APII/O (hardware & data stores)Boot to Gecko (b2g)Device hardwareLow-level processes, proxies & daemons(rild, mediaserver, netd, etc.)GeckoGaiaGonkDeviceGeckoParentPermission ManagerAccess ControlListCredentialValidationPermissionsStoreWeb Content (App)ExecutionEnvironmentGecko child
  78. 78. Firefox OS とセキュリティユーザがアプリ権限管理可インストール時と実行時に権限を許可するハイブリッド方式「インストール時に全て許可」ではプライバシーは守れなかったユーザが理解できプライバシーなどに関わる API は実行時確認
  79. 79. Developer Preview Phone来週ストアオープンKeon:Snapdragon 1GHz, 4GB ROM,512MB RAM, 3.5" HVGAPeak:Snapdragon 1.2GHz x2, 4GB ROM,512MB RAM, 4.3" qHDhttp://www.geeksphone.com/
  80. 80. Developer Preview PhoneTelefónica と Geeksphone が作る開発者向けテスト端末
  81. 81. 開発パートナーと製品化KDDI, Telefónica ...世界の主要 18 キャリアZTE, Alcatel, LG, Huawei, Sony...6 月に 5ヶ国で発売予定スペイン、ブラジル、ベネズエラ、ポーランド、ポルトガル2013 年中に更に 11ヶ国日本や北米では 2013~2014 のタイムフレームで発売予定
  82. 82. MWC で発表したパートナー主要なキャリア、端末メーカー、チップメーカーなど
  83. 83. 端末&チップメーカーSONY Mobile は Telefónica と Firefox OS について提携
  84. 84. いつ Web にするか?
  85. 85. いつ Web にするか?
  86. 86. Marketplace
  87. 87. Web = アプリマーケットへOpen Web AppsWeb アプリのインストール APIFirefox Marketplaceオープンなマーケットの提供Web Paymentsオープンな課金 API の実装
  88. 88. Mozilla は Web エンジンに注力ビジネスは自由に独自 Market や自己配布も可能決済手段も自由にベンダー、決済手段、認証システムに依存しない Payment APIハードは Android と共通HAL は Android と共通化
  89. 89. 独占的プラットフォームからオープンな Web へ開発者/OEM/キャリアAppleApp StoreiPhone/iPadユーザGooglePlay端末ユーザMSMarketplace端末ユーザmarket 開発者/OEM// キャリアユーザ端末既存の独占的プラットフォームFirefox OS によるOpen プラットフォーム
  90. 90. Firefox MarketplaceDevice, OS 横断マーケットWeb Platform のためのストアFirefox 限定にならない設計現在開発者向けに公開中Firefox OS と Android 版 Firefoxの開発版ユーザが対象PC で使うには UA 書き換え...https://marketplace.firefox.com/
  91. 91. オープンなアプリストア全てを Web 技術で実装安定・平等な環境を提供Marketplace のソースも公開ベンダー非依存Firefox Marketplace 以外にもストア、認証、課金も自由にhttps://marketplace.firefox.com/
  92. 92. Marketplace パートナーの例多数のパートナーのうち一例です
  93. 93. Firefox = WebRT (WebRunTime)Gecko = アプリ環境Firefox = Gecko で XUL/JSWebApps = Gecko で HTML/JSマルチデバイス対応PC, Android, Firefox OS...同じコードでどこでも動くマーケットもマルチデバイス
  94. 94. Android に Web アプリ環境Web App = Native App にホームスクリーンへの追加独立してフル画面起動ネイティブ同様の利用体験Firefox = WebRT for Androidホームにインストール、アプリを起動した画面、マーケットをブラウズ
  95. 95. PC にも Web アプリ環境Web App = Native App にプログラムフォルダ (アプリケーションディレクトリ) への追加ウィンドウはもちろんプロセスもデータも全て独立Firefox = WebRT for PC
  96. 96. Web = MarketplaceMarketplace に縛られないWeb はアクセスすれば使えるMarketplace のアプリでなくともアプリ内課金 API が利用可能Web/Marketplace 横断検索Firefox Marketplace に登録されていないアプリも見つけられる
  97. 97. アプリも「ぐぐる」時代へ"まずインストール" は古いディレクトリ(分類)だけのマーケットでは Google 以前の Web動的な Web アプリ環境インストール不要で使える検索も Market / Web 横断検索*1 everything.me ってサービスだから正確には「えぶる」かも?*1MarketplaceWeb
  98. 98. アプリ内に直接ジャンプ
  99. 99. Web らしいシステムだね!
  100. 100. いつアプリ作るか?
  101. 101. いつアプリ作るか?
  102. 102. App Dev
  103. 103. Firefox OS のアプリ開発Web アプリです。Web アプリです。Web アプリです。大事なこと3回
  104. 104. Firefox OS のアプリ開発Web アプリです。Web アプリです。Web アプリです。大事なこと3回
  105. 105. Firefox OS のアプリ開発いつもの開発ツールいつものエディタいつものライブラリ
  106. 106. アプリ開発の流れ普通に Web 開発デバッグもいつも通りmanifest ファイルを用意メタ情報を JSON 形式で記載シミュレータや実機テストPC で動かない API は実機で確認Vibration や Sensor など...https://github.com/dynamis/firefoxos/wiki/simulator
  107. 107. manifest.webapp 追加するだけHosted AppWeb から読み込むアプリWeb サイト + manifest.webappPackaged App従来型のダウンロードアプリサイト全体を ZIP するだけ
  108. 108. manifest.webapp ファイルhttps://developer.mozilla.org/en-US/docs/Apps/Manifest
  109. 109. Firefox OS Simulator再起動不要の拡張機能https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/ポチッと押すだけWeb 開発メニューに追加されるFirefox デスクトップビルド+プロファイル+Alpha詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator
  110. 110. Firefox OS Simulator (r2d2b2g)プロファイル付きデスクトップビルドにホームボタンを追加コンソールやディレクトリからアプリケーションを読み込む機能も
  111. 111. シミュレータにインストールAdd Directory ボタンmanifest ファイルを選択zip されて packaged app としてインストールされ、起動するUpdate ボタンで更新同じディレクトリのファイルをzip し直して、起動するhttps://github.com/dynamis/firefoxos/wiki/simulator
  112. 112. Firefox OS 標準のライブラリとかあるの?
  113. 113. GAIA Building Blocks (UI 部品)Gaia (Firefox OS 標準) Appsのデザインを簡単に作れるhttp://buildingfirefoxos.com/使っても使わなくても OK好きな SDK/Library 使える自由な Web ですから!http://buildingfirefoxos.com/
  114. 114. For More Info
  115. 115. Firefox OS コミュニティを!http://FxOS.org/(https://groups.google.com/group/firefoxos にリダイレクト)http://FxOS.org/wiki(https://github.com/dynamis/firefoxos/wiki にリダイレクト)
  116. 116. ぼくには難しいことは分からないけど許してね。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×