Web is the OS (Firefox OS)
•
29 likes•10,961 views
エフスタ と HTML5とか勉強会 − ふくしまの春風 で使用したスライド (当日割愛した追加セクションあり) http://kokucheese.com/event/index/74303/
Recommended
More Related Content
What's hot
What's hot (13)
Viewers also liked
Viewers also liked (20)
Similar to Web is the OS (Firefox OS)
Similar to Web is the OS (Firefox OS) (20)
More from dynamis
More from dynamis (20)
Recently uploaded
Recently uploaded (8)
Web is the OS (Firefox OS)
- 1. Web=OS − Firefox OS efsta12 × html5j by Tomoya ASAI (dynamis) Last Update: 2013/02/22
- 2. about:me
- 3. Tomoya ASAI Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
- 7. about:foxkeh
- 9. サーバ (Apache Camel) の上にクライアント (Firefox)
- 14. ある日の Mozilla Corporation オフィスです
- 15. ある日の Mozilla Corporation オフィスの一室です
- 16. ある日の Mozilla Corporation オフィスの一室です
- 17. Topics
- 18. Topics Background Web Platform Firefox OS Marketplace App Dev (slides only)
- 19. Background
- 21. 現在のアプリエコシステム アプリマーケットで配信 iOS <=> App Store Android <=> Google Play Windows <=> Windows Store 販売、アプリ内課金、広告 課金の手数料は 30% が標準 その他アフィリエイトなど
- 22. 既存エコシステムの課題 OS 毎のアプリ開発が必要 言語や API は OS に依存 iOS/Windows は UI 制限も強い WebView はサブセット WebView << Native 追加 API も標準化されない 継続性、互換性、実装依存…
- 23. 既存マーケットの課題 独占的マーケット 恣意的・排他的レビュー (iOS) ユーザに直接リーチできない 独占的課金システム 他の課金システム利用不可 (iOS) 手数料は原則 30% Paypal (2.9 3.6%+¥40) の10倍！
- 26. "HTML5" の目的 アプリ のための HTML HTML は文書専用じゃない 互換性 のある実装に ブラウザの挙動を厳密に定義 マルチデバイス Web どこでも同じ Web 技術で
- 27. Web 標準プラットフォーム プラットフォーム としての Web Web がプラットフォームなら業界標準技術でアプリ環境が統一される
- 28. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, ... all at once didn't work. by Tim Berners-Lee: http://dig.csail.mit.edu/breadcrumbs/node/166
- 29. HTML は段階的に発展 させる必要がある。... すべてを一度に切り替え ようという試みは 成功しなかった。 by Tim Berners-Lee: http://dig.csail.mit.edu/breadcrumbs/node/166
- 30. Web Platform への期待 次世代プラットフォーム Web 技術で何でも可能に マルチデバイス対応 開発言語や API の共通化 ベンダー非依存の標準 自由で持続性のある API
- 33. 多くの開発者が "HTML5" に 79% が "HTML5" を採用 21% が Native だけで開発 但しその殆どは Hybrid 同調査では 72% が Hybrid これまでの Web は力不足だった "HTML5" に期待するアプリ開発者 Appcelerator&IDC 2012Q1 http://www.appcelerator.com/thinkmobile/surveys/
- 35. Web Platform の課題 機能的な制約 デバイスやシステム系の API 不足 パフォーマンス Java などに比べても数倍遅い アプリ配信と課金 Market や Payment の標準がない マイクロベンチなら JS ~= Java に追いついたが実アプリレベルでは JS 遅い
- 37. Web Platform
- 39. Web 技術 = Native へ Web 技術が「ネイティブ」 HTML/CSS/JS ですべて可能に 新しい API は W3C 標準化 速度も Java に追いつく 単純な演算程度なら既に同程度 WebGL や DOMCrypt なども活用 asm.js で大規模アプリも高速化 Web 技術だけですべてが済むプラットフォームとなるよう発展中
- 40. Web で可能になってること マルチメディア Audio, Video, Animation, 3D ... アプリケーション Offline, Storage, Indexed DB... 高度な通信制御 双方向通信, Server-Sent Event... 2011 年にはできていたことの一例
- 41. Web ではできなかったこと システムステータス WiFi 情報, モバイル通信... 各種センサー 光センサー, 近接センサー... 低レベルハードウェア制御 USB, BlueTooth, NFC... 2011 年にはできなかったことの一例
- 45. Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Micro- Data WebGL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Filters HTML5 Parser Mouse, Key ev. ECMA Script CSP SPDY XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion XPath RSS OGP WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF HTML DNT
- 46. Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Webm H.264 Micro- Data WebGL Web SQL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Web Audio Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Filters HTML5 Parser Mouse, Key ev. Opus ECMA Script ECMA 6th USB CSP SPDY WebCL Web RTC Net Info MP3 Device Storage TCP Socket NFC File Sys Notifi- cation XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion Proxi- mity XPath RSS RDF OGP Schema .org WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF Battery Status Radio Tel HTML DNT Flex Box
- 48. JavaScript の進化 次世代 JS への移行 Firefox が最も実装進んでる 慣れると現 JS 書くのがツライ 高速化やデバッグ容易化 Class, TypedArray, ParallelArray ... 静的解析でコンパイル時エラーを 出しやすい言語仕様に
- 49. JavaScript は進化を続ける！ すべて問題解決してきた 速度遅い → 高速化 ミス多発 → Strict Mode スレッドがない → Workers GPU 使えない → WebGL, WebCL Class 使いたい → 入るよ *** できない → API 増加中 写真は JavaScript の父 Brendan Eich (Mozilla CTO) です
- 50. asm.js でネイティブ並の速度に 重い処理も asm.js で C の 1/2 程度まで Java や C# と同程度の処理速度
- 51. Unreal Engine on Browser 100 万行以上の C & OpenGL コードを移植 LLVM + Emscripten で asm.js 形式に変換
- 52. ストレージ系の進化 IndexedDB Local Storage は縮小化の方向 FileReader, FileHandle FileWriter, FileSystem も？ Device Storage Archive (ZIP 読み出し)
- 53. File System API 周りの話 Google: ネイティブと一緒で良いじゃん ファイルシステム使おうぜ！ Mozilla: ファイルシステムなんて前近代的 抽象化したコレクションにすべき 現在のところ平行線…
- 54. デザイン機能の進化 レイアウト Grid, Regions, Exclusions... Flexbox (XUL 的レイアウト) フィルター SVG Filter, CSS Filter CSS 構文の進化 @document, variable ...
- 55. CSS Exclusions 自由な形の領域にテキストを流し込めます Chrome Canary - http://html.adobe.com/webstandards/cssexclusions/
- 56. CSS Regions 複数領域にテキストを流し込み 方向やサイズに応じたレイアウトも簡単 Chrome Canary - http://html.adobe.com/webstandards/cssregions/
- 57. CSS Filters ぼかしや色調整などのフィルタ効果や 曲げたり回したり変形も自由自在に Chrome Canary -http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/
- 58. SVG Filter & CSS Filter Mozilla: 既にある SVG 使おうぜ！ WebKit: SVG なんてシラネ。 俺は何でも CSS でやるぜ！ Mozilla: 仕方ないな…
- 59. アニメーションの進化 乱立しすぎ＆連携無し JavaScript Animation Canvas 2D, WebGL SVG & SMIL CSS Transitions, Animations Web Animations で連携へ
- 60. Web Animations へ Apple (Flash 代替技術として): CSS でアニメーション！ Mozilla & Opera: ダメ構文は直して標準化 Mozilla, Google, Adobe: JS と一括管理できる API 作ろう Web Animations は Mozilla Japan の Brian さん頑張ってます
- 61. マルチメディアの進化 Opus Audio Codec (RFC6716) Web Audio, Audio Data Web Audio にも Firefox 近日対応 Camera API (Media Capture) WebRTC - getUserMedia 電話会議などは簡単に
- 62. No Comply 2次元＆3次元グラフィックスと 音声＆ビデオのリアルタイム処理 https://developer.mozilla.org/ja/demos/detail/no-comply
- 64. WebRTC (getUserMedia) カメラを使ったデータ処理も可能 ビデオ会議やリアルタイム動画分析に Nightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/
- 67. センサー系の進化 従来からの Web API Geolocation (位置情報) Orientation (加速度) Sensor API Ambient Light (環境光) Proximity (近接) Android 版 Firefox は実装済み
- 68. ネットワーク系の進化 WebSocket Server-Sent Event SPDY v2, v3 ... HTTP 2.0 WebRTC - Peer to Peer TCP Socket, HTTP-cache UDP Datagram Socket
- 70. デバイス間連携の進化 Web Activities Push Notification Web Intents (終了) この辺の話はカエルさん(小松さん)に聞きましょう
- 71. デバイス間連携はこれから本番 Mozilla: Web Activities! Google: Web Intents! Google: Web Intents やーめた！ Mozilla: Web Activities は続けるよ！ この辺の話はカエルさん(小松さん)に聞きましょう
- 72. Social 連携の進化 Social API Firefox×Facebook 導入済み マルチプロバイダ対応 mixi, CliqZ, MSN Now, Weibo... 用途は "Social" に限らない ある意味サイドバー API...
- 73. ステータス系の進化 WiFi Information Mobile Connection Network Info (通信速度等) Battery Status 電池残量に応じた処理を
- 75. System 系の進化 Resource Lock スリープや WiFi オフなどの禁止 Settings (システム設定) Alarm (時刻指定処理) Background Service Idle, Log
- 76. セキュリティ面での進化 Content Security Policy 特に XSS 対策に有効 Firefox 4 や Chrome 実装済み Permission API アプリが使える API も管理 アプリ毎の権限を制御可能に
- 78. Web 標準を充実させよう！ Web = Native に 不足機能はすべて定義・実装 W3C の WG などで標準化 実装と平行して標準化 Device API, System Apps... そのほか IETF などでも https://wiki.mozilla.org/WebAPI
- 79. Web API の標準化 Device API, System Application, Web Apps WG が主 実装面では圧倒的に Firefox がリードしている FYI: http://www.w3.org/Mobile/mobile-web-app-state/
- 81. Firefox OS
- 88. ステータスバー (通知、 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも...
- 89. ステータスバー (通知、 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも... すべて Web 技術で！
- 90. シンプル＆スマート Web プラットフォームの実行環境としては圧倒的にスマート！ WHAT IS FIREFOX OS? HOW IS IT DIFFERENT FROM ANDROID HTML5 User Experience/ Content Kernel Device Web Engine/ Standard Device APIs Firefox OS Web Browser/ Platform Native API- based UI Kernel (e.g. Android, iOS, Win7, etc.) Device (phone, tablet, desktop) APIs Android
- 91. Firefox OS のアーキテクチャ WHAT IS FIREFOX OS: ARCHITECTURE OVERVIEW Web API I/O (hardware & data stores) Boot to Gecko (b2g) Device hardware Low-level processes, proxies & daemons (rild, mediaserver, netd, etc.) Gecko Gaia Gonk Device Gecko Parent Permission Manager Access Control List Credential Validation Permissions Store Web Content (App) Execution Environment Gecko child
- 92. Firefox OS とセキュリティ ユーザがアプリ権限管理可 インストール時と実行時に権限を 許可するハイブリッド方式 「インストール時に全て許可」で はプライバシーは守れなかった ユーザが理解できプライバシーな どに関わる API は実行時確認
- 93. Developer Preview Phone 来週ストアオープン Keon: Snapdragon 1GHz, 4GB ROM, 512MB RAM, 3.5" HVGA Peak: Snapdragon 1.2GHz x2, 4GB ROM, 512MB RAM, 4.3" qHD http://www.geeksphone.com/
- 94. Developer Preview Phone Telefónica と Geeksphone が作る開発者向けテスト端末
- 95. 開発パートナーと製品化 KDDI, Telefónica ... 世界の主要 18 キャリア ZTE, Alcatel, LG, Huawei, Sony... 6 月に 5ヶ国で発売予定 スペイン、ブラジル、ベネズエ ラ、ポーランド、ポルトガル 2013 年中に更に 11ヶ国 日本や北米では 2013~2014 のタイムフレームで発売予定
- 97. 端末＆チップメーカー SONY Mobile は Telefónica と Firefox OS について提携
- 98. いつ Web にするか？
- 99. いつ Web にするか？
- 100. Marketplace
- 102. Web ＝ アプリマーケットへ Open Web Apps Web アプリのインストール API Firefox Marketplace オープンなマーケットの提供 Web Payments オープンな課金 API の実装
- 103. Mozilla は Web エンジンに注力 ビジネスは自由に 独自 Market や自己配布も可能 決済手段も自由に ベンダー、決済手段、認証システ ムに依存しない Payment API ハードは Android と共通 HAL は Android と共通化
- 104. 独占的プラットフォーム からオープンな Web へ 開発者/OEM/キャリア Apple App Store iPhone/iPad ユーザ Google Play 端末 ユーザ MS Marketplace 端末 ユーザ market 開発者/OEM/ / キャリア ユーザ 端末 既存の独占的 プラットフォーム Firefox OS による Open プラットフォーム
- 105. Firefox Marketplace Device, OS 横断マーケット Web Platform のためのストア Firefox 限定にならない設計 現在開発者向けに公開中 Firefox OS と Android 版 Firefox の開発版ユーザが対象 PC で使うには UA 書き換え... https://marketplace.firefox.com/
- 106. オープンなアプリストア 全てを Web 技術で実装 安定・平等な環境を提供 Marketplace のソースも公開 ベンダー非依存 Firefox Marketplace 以外にも ストア、認証、課金も自由に https://marketplace.firefox.com/
- 108. Firefox ＝ WebRT (WebRunTime) Gecko = アプリ環境 Firefox = Gecko で XUL/JS WebApps = Gecko で HTML/JS マルチデバイス対応 PC, Android, Firefox OS... 同じコードでどこでも動く マーケットもマルチデバイス
- 109. Android に Web アプリ環境 Web App = Native App に ホームスクリーンへの追加 独立してフル画面起動 ネイティブ同様の利用体験 Firefox = WebRT for Android ホームにインストール、アプリを起動した画面、マーケットをブラウズ
- 110. PC にも Web アプリ環境 Web App = Native App に プログラムフォルダ (アプリケー ションディレクトリ) への追加 ウィンドウはもちろんプロセスも データも全て独立 Firefox = WebRT for PC
- 111. Web = Marketplace Marketplace に縛られない Web はアクセスすれば使える Marketplace のアプリでなくとも アプリ内課金 API が利用可能 Web/Marketplace 横断検索 Firefox Marketplace に登録されて いないアプリも見つけられる
- 112. アプリも「ぐぐる」時代へ "まずインストール" は古い ディレクトリ(分類)だけのマーケ ットでは Google 以前の Web 動的な Web アプリ環境 インストール不要で使える 検索も Market / Web 横断検索 *1 everything.me ってサービスだから正確には「えぶる」かも？ *1 Marketplace Web
- 113. アプリ内に直接ジャンプ
- 114. Web らしいシステムだね！
- 115. いつアプリ作るか？
- 116. いつアプリ作るか？
- 117. App Dev
- 118. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと３回
- 119. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと３回
- 121. アプリ開発の流れ 普通に Web 開発 デバッグもいつも通り manifest ファイルを用意 メタ情報を JSON 形式で記載 シミュレータや実機テスト PC で動かない API は実機で確認 Vibration や Sensor など... https://github.com/dynamis/firefoxos/wiki/simulator
- 122. manifest.webapp 追加するだけ Hosted App Web から読み込むアプリ Web サイト + manifest.webapp Packaged App 従来型のダウンロードアプリ サイト全体を ZIP するだけ
- 124. Firefox OS Simulator 再起動不要の拡張機能 https://addons.mozilla.org/ja/ firefox/addon/firefox-os-simulator/ ポチッと押すだけ Web 開発メニューに追加される Firefox デスクトップビルド＋ プロファイル＋Alpha 詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator
- 125. Firefox OS Simulator (r2d2b2g) プロファイル付きデスクトップビルドにホームボタンを追加 コンソールやディレクトリからアプリケーションを読み込む機能も
- 126. シミュレータにインストール Add Directory ボタン manifest ファイルを選択 zip されて packaged app として インストールされ、起動する Update ボタンで更新 同じディレクトリのファイルを zip し直して、起動する https://github.com/dynamis/firefoxos/wiki/simulator
- 128. GAIA Building Blocks (UI 部品) Gaia (Firefox OS 標準) Apps のデザインを簡単に作れる http://buildingfirefoxos.com/ 使っても使わなくても OK 好きな SDK/Library 使える 自由な Web ですから！ http://buildingfirefoxos.com/
- 129. For More Info
- 130. Firefox OS コミュニティを！ http://FxOS.org/ (https://groups.google.com/group/ firefoxos にリダイレクト) http://FxOS.org/wiki (https://github.com/dynamis/firefoxos/ wiki にリダイレクト)