Download as PDF, PPTX
Uploaded bydynamis
PDF, PPTX10,966 views
Web is the OS (Firefox OS)
エフスタ と HTML5とか勉強会 − ふくしまの春風 で使用したスライド (当日割愛した追加セクションあり)http://kokucheese.com/event/index/74303/
Recommended
More Related Content
What's hot
Viewers also liked
Similar to Web is the OS (Firefox OS)
More from dynamis
Web is the OS (Firefox OS)
- 1.Web=OS − FirefoxOSefsta12 × html5jby Tomoya ASAI (dynamis)Last Update: 2013/02/22
- 2.
- 3.Tomoya ASAIMozilla JapanTechnicalMarketing (Evangelist)dynamis @ communitydynamis.jp@dynamitterfacebook.com/dynamismailto: Tomoya ASAI <dynamis mozilla-japan.org>@
- 4.
- 7.
- 8.
- 9.サーバ (Apache Camel)の上にクライアント (Firefox)
- 12.
- 13.
- 14.ある日の Mozilla Corporationオフィスです
- 15.ある日の Mozilla Corporationオフィスの一室です
- 16.ある日の Mozilla Corporationオフィスの一室です
- 17.
- 18.TopicsBackgroundWeb PlatformFirefox OSMarketplaceAppDev (slides only)
- 19.
- 21.現在のアプリエコシステムアプリマーケットで配信iOS <=> AppStoreAndroid <=> Google PlayWindows <=> 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倍！
- 24.
- 26."HTML5" の目的アプリ のためのHTMLHTML は文書専用じゃない互換性 のある実装にブラウザの挙動を厳密に定義マルチデバイス Webどこでも同じ Web 技術で
- 27.Web 標準プラットフォームプラットフォームとしての WebWebがプラットフォームなら業界標準技術でアプリ環境が統一される
- 28.It is necessaryto evolveHTML incrementally. Theattempt to get the worldto switch to XML, ... all atonce didn't work.by Tim Berners-Lee: http://dig.csail.mit.edu/breadcrumbs/node/166
- 29.HTML は段階的に発展させる必要がある。...すべてを一度に切り替えようという試みは成功しなかった。by TimBerners-Lee: http://dig.csail.mit.edu/breadcrumbs/node/166
- 30.Web Platform への期待次世代プラットフォームWeb技術で何でも可能にマルチデバイス対応開発言語や API の共通化ベンダー非依存の標準自由で持続性のある API
- 31.
- 32.
- 33.多くの開発者が "HTML5" に79%が "HTML5" を採用21% が Native だけで開発但しその殆どは Hybrid同調査では 72% が Hybridこれまでの Web は力不足だった"HTML5" に期待するアプリ開発者Appcelerator&IDC 2012Q1 http://www.appcelerator.com/thinkmobile/surveys/
- 34.
- 35.Web Platform の課題機能的な制約デバイスやシステム系のAPI 不足パフォーマンスJava などに比べても数倍遅いアプリ配信と課金Market や Payment の標準がないマイクロベンチなら JS ~= Java に追いついたが実アプリレベルでは JS 遅い
- 37.
- 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 年にはできなかったことの一例
- 42.
- 43.
- 44.
- 45.SemanticElementsMultiMediaCanvasHTML5FormsOfflineSupportMicro-DataWebGLIndexedDBSVGServer-Sent ev.WebSocketsWebSocketsGeo-locationFileAPIWebStorageXHR2MathMLLayoutMediaQueriesHTML5CSS3~TransformAnimationRegionsFiltersHTML5ParserMouse,Key ev.ECMAScriptCSPSPDYXHTML5Orien-tationWebWorkersWebMessag-ingDOM4SMILVibra-tionXPathRSSOGPWAI-ARIAW3CWHATWGotherKhronosECMAIETFWOFFHTMLDNT
- 46.SemanticElementsMultiMediaCanvasHTML5FormsOfflineSupportWebmH.264Micro-DataWebGLWebSQLIndexedDBSVGServer-Sent ev.WebSocketsWebSocketsGeo-locationFileAPIWebStorageXHR2MathMLWebAudioLayoutMediaQueriesHTML5CSS3~TransformAnimationRegionsFiltersHTML5ParserMouse,Key ev.OpusECMAScriptECMA6thUSBCSPSPDYWebCLWebRTCNetInfoMP3DeviceStorageTCPSocketNFCFileSysNotifi-cationXHTML5Orien-tationWebWorkersWebMessag-ingDOM4SMIL Vibra-tionProxi-mityXPathRSSRDFOGPSchema.orgWAI-ARIAW3CWHATWGotherKhronosECMAIETFWOFFBatteryStatusRadioTelHTMLDNTFlexBox
- 47.
- 48.JavaScript の進化次世代 JSへの移行Firefox が最も実装進んでる慣れると現 JS 書くのがツライ高速化やデバッグ容易化Class, TypedArray, ParallelArray ...静的解析でコンパイル時エラーを出しやすい言語仕様に
- 49.JavaScript は進化を続ける！すべて問題解決してきた速度遅い →高速化ミス多発 → Strict Modeスレッドがない → WorkersGPU 使えない → WebGL, WebCLClass 使いたい → 入るよ*** できない → API 増加中写真は JavaScript の父 Brendan Eich (Mozilla CTO) です
- 50.asm.js でネイティブ並の速度に重い処理も asm.jsで C の 1/2 程度までJava や C# と同程度の処理速度
- 51.Unreal Engine onBrowser100 万行以上の C & OpenGL コードを移植LLVM + Emscripten で asm.js 形式に変換
- 52.ストレージ系の進化IndexedDBLocal Storage は縮小化の方向FileReader,FileHandleFileWriter, FileSystem も？Device StorageArchive (ZIP 読み出し)
- 53.File System API周りの話Google:ネイティブと一緒で良いじゃんファイルシステム使おうぜ！Mozilla:ファイルシステムなんて前近代的抽象化したコレクションにすべき現在のところ平行線…
- 54.デザイン機能の進化レイアウトGrid, Regions, Exclusions...Flexbox(XUL 的レイアウト)フィルターSVG Filter, CSS FilterCSS 構文の進化@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 FilterMozilla:既にある SVG 使おうぜ！WebKit:SVG なんてシラネ。俺は何でも CSS でやるぜ！Mozilla:仕方ないな…
- 59.アニメーションの進化乱立しすぎ＆連携無しJavaScript AnimationCanvas 2D,WebGLSVG & SMILCSS Transitions, AnimationsWeb 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 DataWeb Audio にも Firefox 近日対応Camera API (Media Capture)WebRTC - getUserMedia電話会議などは簡単に
- 62.
- 63.
- 64.WebRTC (getUserMedia)カメラを使ったデータ処理も可能ビデオ会議やリアルタイム動画分析にNightly (要設定変更)- https://people.mozilla.com/~anarayanan/webrtc/
- 65.
- 66.
- 67.センサー系の進化従来からの Web APIGeolocation(位置情報)Orientation (加速度)Sensor APIAmbient Light (環境光)Proximity (近接)Android 版 Firefox は実装済み
- 68.ネットワーク系の進化WebSocketServer-Sent EventSPDY v2,v3 ... HTTP 2.0WebRTC - Peer to PeerTCP Socket, HTTP-cacheUDP Datagram Socket
- 69.
- 70.デバイス間連携の進化Web ActivitiesPush NotificationWebIntents (終了)この辺の話はカエルさん(小松さん)に聞きましょう
- 71.デバイス間連携はこれから本番Mozilla:Web Activities!Google:Web Intents!Google:WebIntents やーめた！Mozilla:Web Activities は続けるよ！この辺の話はカエルさん(小松さん)に聞きましょう
- 72.Social 連携の進化Social APIFirefox×Facebook導入済みマルチプロバイダ対応mixi, CliqZ, MSN Now, Weibo...用途は "Social" に限らないある意味サイドバー API...
- 73.ステータス系の進化WiFi InformationMobile ConnectionNetworkInfo (通信速度等)Battery Status電池残量に応じた処理を
- 74.
- 75.System 系の進化Resource LockスリープやWiFi オフなどの禁止Settings (システム設定)Alarm (時刻指定処理)Background ServiceIdle, Log
- 76.セキュリティ面での進化Content Security Policy特にXSS 対策に有効Firefox 4 や Chrome 実装済みPermission APIアプリが使える API も管理アプリ毎の権限を制御可能に
- 77.
- 78.Web 標準を充実させよう！Web =Native に不足機能はすべて定義・実装W3C の WG などで標準化実装と平行して標準化Device API, System Apps...そのほか IETF などでもhttps://wiki.mozilla.org/WebAPI
- 79.Web API の標準化DeviceAPI, System Application, Web Apps WG が主実装面では圧倒的に Firefox がリードしているFYI: http://www.w3.org/Mobile/mobile-web-app-state/
- 80.
- 81.
- 88.ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMSの送受信ももちろん ブラウザ もその他なんでも...
- 89.ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMSの送受信ももちろん ブラウザ もその他なんでも...すべて Web 技術で！
- 90.シンプル＆スマートWeb プラットフォームの実行環境としては圧倒的にスマート！WHAT ISFIREFOX 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
- 91.Firefox OS のアーキテクチャWHATIS 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
- 92.
- 93.Developer Preview Phone来週ストアオープンKeon:Snapdragon1GHz, 4GB ROM,512MB RAM, 3.5" HVGAPeak:Snapdragon 1.2GHz x2, 4GB ROM,512MB RAM, 4.3" qHDhttp://www.geeksphone.com/
- 94.Developer Preview PhoneTelefónicaと Geeksphone が作る開発者向けテスト端末
- 95.開発パートナーと製品化KDDI, Telefónica ...世界の主要18 キャリアZTE, Alcatel, LG, Huawei, Sony...6 月に 5ヶ国で発売予定スペイン、ブラジル、ベネズエラ、ポーランド、ポルトガル2013 年中に更に 11ヶ国日本や北米では 2013~2014 のタイムフレームで発売予定
- 96.
- 97.端末＆チップメーカーSONY Mobile はTelefónica と Firefox OS について提携
- 98.
- 99.
- 100.
- 102.Web ＝ アプリマーケットへOpenWeb AppsWeb アプリのインストール APIFirefox Marketplaceオープンなマーケットの提供Web Paymentsオープンな課金 API の実装
- 103.Mozilla は Webエンジンに注力ビジネスは自由に独自 Market や自己配布も可能決済手段も自由にベンダー、決済手段、認証システムに依存しない Payment APIハードは Android と共通HAL は Android と共通化
- 104.独占的プラットフォームからオープンな Web へ開発者/OEM/キャリアAppleAppStoreiPhone/iPadユーザGooglePlay端末ユーザMSMarketplace端末ユーザmarket 開発者/OEM// キャリアユーザ端末既存の独占的プラットフォームFirefox OS によるOpen プラットフォーム
- 105.Firefox MarketplaceDevice, OS横断マーケットWeb Platform のためのストアFirefox 限定にならない設計現在開発者向けに公開中Firefox OS と Android 版 Firefoxの開発版ユーザが対象PC で使うには UA 書き換え...https://marketplace.firefox.com/
- 106.オープンなアプリストア全てを Web 技術で実装安定・平等な環境を提供Marketplaceのソースも公開ベンダー非依存Firefox Marketplace 以外にもストア、認証、課金も自由にhttps://marketplace.firefox.com/
- 107.
- 108.Firefox ＝ WebRT(WebRunTime)Gecko = アプリ環境Firefox = Gecko で XUL/JSWebApps = 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 = MarketplaceMarketplaceに縛られないWeb はアクセスすれば使えるMarketplace のアプリでなくともアプリ内課金 API が利用可能Web/Marketplace 横断検索Firefox Marketplace に登録されていないアプリも見つけられる
- 112.アプリも「ぐぐる」時代へ"まずインストール" は古いディレクトリ(分類)だけのマーケットでは Google以前の Web動的な Web アプリ環境インストール不要で使える検索も Market / Web 横断検索*1 everything.me ってサービスだから正確には「えぶる」かも？*1MarketplaceWeb
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.Firefox OS のアプリ開発Webアプリです。Web アプリです。Web アプリです。大事なこと３回
- 119.Firefox OS のアプリ開発Webアプリです。Web アプリです。Web アプリです。大事なこと３回
- 120.
- 121.アプリ開発の流れ普通に Web 開発デバッグもいつも通りmanifestファイルを用意メタ情報を JSON 形式で記載シミュレータや実機テストPC で動かない API は実機で確認Vibration や Sensor など...https://github.com/dynamis/firefoxos/wiki/simulator
- 122.manifest.webapp 追加するだけHosted AppWebから読み込むアプリWeb サイト + manifest.webappPackaged App従来型のダウンロードアプリサイト全体を ZIP するだけ
- 123.
- 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
- 127.
- 128.GAIA Building Blocks(UI 部品)Gaia (Firefox OS 標準) Appsのデザインを簡単に作れるhttp://buildingfirefoxos.com/使っても使わなくても OK好きな SDK/Library 使える自由な Web ですから！http://buildingfirefoxos.com/
- 129.
- 130.Firefox OS コミュニティを！http://FxOS.org/(https://groups.google.com/group/firefoxosにリダイレクト)http://FxOS.org/wiki(https://github.com/dynamis/firefoxos/wiki にリダイレクト)
- 131.