Web is the OS (Firefox OS)

  • 12,023 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
12,023
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
45
Comments
0
Likes
29

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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