0
HTML2013 : Web=OS Slides @ HTML5 Carnival Fukuoka     by Tomoya Asai (dynamis)                          Last Update: 2013/...
HTML2013 : Web=OSSlides @ HTML5 Conference Miyazaki 2013        by Tomoya Asai (dynamis)                             Last ...
WWeebb  が  OOSS  になるってどういうこと?             何だか分かんないけど            とっても楽しそうだね!
about:me
about:dynamis                   Mozilla Japan               http://dynamis.jp                @dynamitter            facebo...
about:mozilla  in 2012
https://twitter.com/lindwurm_/status/288558397119397888
https://twitter.com/lindwurm_/status/288558397119397888
https://twitter.com/lindwurm_/status/288558397119397888
MMoozziillllaa  ステキでしょ?              世界をもっとステキに              しようと頑張ってます
Topics
本日のトピックぼくおやつ   Introduction担当ねっ!        HTML2013        Firefox OS        App Dev        Marketplace
about:foxkeh       今日もプレゼンを手伝って     くれるフォクすけを紹介します
ぼくフォクすけ   いつか僕も Firefox みたいな   立派なブラウザになるんだ!
サーバ (Apache Camel) の上にクライアント (Firefox)
君と一緒にお出     かけしたいな!ぼくのステッカーを君のPC とスマホに貼ってね!
Introduction
みんな大好き  ""HHTTMMLL55""              Mozilla と Firefox も             みんな大好きだよね!
"HTML5" の目的       アプリ のための HTML        HTML は文書専用じゃない       互換性 のある実装に        ブラウザの挙動を厳密に定義       マルチデバイス Web        どこでも同...
Web 標準プラットフォーム                プラットフォーム                  としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
独自プラットフォーム    ネイティブアプリ     機能も速度もネイティブ優先    アプリエコシステム     専用のストアや課金システム    Web は WebView     Web は 一機能、独自 API 推奨
独自プラットフォーム i       a        f       cプラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある
標準技術 のオープンな世界      vs独自技術 による囲い込み    「ブラウザ戦争」の時代はとっくに終わりました
独自プラットフォームの課題    プラットフォーム依存     それぞれ異なる言語や API    不透明な継続性・再利用性     ベンダー依存の運命共同体    Fragmentation・実装依存     同一プラットフォームでも非互換
独自プラットフォームの課題    プラットフォーム依存     それぞれ異なる言語や API    不透明な継続性・再利用性     ベンダー依存の運命共同体    Fragmentation・実装依存     同一プラットフォームでも非互換
Fragmentation...http://i0.wp.com/cerebrux.files.wordpress.com/2012/09/                                     androidclones.jpg
"HTML5" への期待      次世代プラットフォーム       Web 技術で何でも可能に      Web アプリ開発を簡単に       API の充実と互換性確保      マルチデバイス対応       開発言語や API の共通化
Web が共通プラットフォーム                プラットフォーム                  としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
Multi           Media      Mouse,  HTML5               Key ev.  Forms            W3C                            OfflineHTML5...
Canvas                                 Web         WHATWG                 Messag-                                  ing    ...
Canvas                                 Web         WHATWG                 Messag-                                  ing    ...
Khronos              SMIL              Vibra-                                                   tion                 WebGL...
Khronos              SMIL              Vibra-                     MP3  WebCL                                              ...
HTML5 = WebKit の方が良い?       それどの WebKit?        IE6 vs IE10 以上に違う現実       その API と実装で大丈夫?        複数実装でより良い標準に       イノベーショ...
I am sad that the Web didn t handle small screens ̶     and later, touch UI ̶ that well. ... snip ...For touch, though, I ...
独占やクローズド仕様は残念…    タッチイベントが残念…     ドラッグ&ドロップは?     ピンチとホイールの対応は?    密室で作られたから…     最初の人気タッチブラウザ実装     Web 技術知らない奴らが作った     ...
The drag-and-drop API is           horrible,but it has one thing goingfor it: IE6 implements it, as   do Safari and Firefo...
Drag & Drop API は酷いけど、採用する理由がひとつある。つまり、IE6 だけでなく Safari や Firefox でも実装されているということだ。     by Ian Hickson: http://twitter.com/...
オープンなモバイルでイノベーションを加速!     オープンと競争は革新の源泉
HTML2013
""HHTTMMLL55""  は今年どんな進化をするの?         未来に向かって走り続ける!         ぼくは足短いから遅いけど…
Web で可能になってたこと     マルチメディア      Audio, Video, Animation, 3D ...     アプリケーション      Offline, Storage, Indexed DB...     高度な通信...
Web ではできなかったこと     システムステータス      WiFi 情報, モバイル通信...     各種センサー      光センサー, 近接センサー...     低レベルハードウェア制御      USB, BlueTooth...
Khronos              SMIL              Vibra-                     MP3  WebCL                                              ...
Opus              H.264             Web                               Audio        Notifi-                      Web        ...
ブラウザの技術からプラットフォームへ    僕はまず立派なブラウザになり   いつかは立派な OS にならなきゃ
2012 年実装 Web APIAlarm                  File Handle         Push Notificationsattention screen       FM Radio            Set...
Next Web APIBackground Services              PaymentBluetooth-***                    QuotaCalendar                        ...
WWeebb  技術で未来を創ろう!    未来に向かって走り続けなきゃ!    ぼくは足短いから走るの遅いけど
Web 標準を充実させよう!     Web = Native に      不足機能はすべて定義・実装     W3C の WG などで標準化      実装と平行して標準化      Device API, System Apps...  ...
Web API の標準化Device API, System Application, Web Apps WG が主  実装面では圧倒的に Firefox がリードしている               FYI: http://www.w3.or...
これなら  WWeebb  がOOSS  になれるね!       どんなアプリでも作れそう!       ボクもいろいろ作りた∼い!
Firefox OS
FFiirreeffooxx  OOSS  って どんなん感じ?               フォクすけもわくわく。
ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も  その他なんでも...
ステータスバー (通知、      電波強度、電池残量...)も      カメラやラジオも      ビデオや音楽の再生も      マーケットプレイスも      システムの環境設定も      ホーム画面や壁紙も      電話や SMS...
Firefox OS (Boot to Gecko)          Web 技術が「ネイティブ」           HTML5, JavaScript, Web API...           Java に匹敵する速度も目指して    ...
Firefox OS = スマート(軽量) OS既存プラットフォーム              Firefox OS  Web Browser/    Platform   Native API-           HTML5 User   ...
Firefox OS エコシステムの魅力          ネイティブに負けない           提供される API も充実           一部処理は速度面でも匹敵          スリムな HTML5 実行環境          ...
開発者の多いプラットフォーム                          800万人 10万人         45万人Web プラットフォームの開発者は iOS の 80 倍、Android の 18 倍!
透明性や自由度の              高いプラットフォーム       既存の独占的                          Firefox OS による      プラットフォーム                       ...
Global アプリパートナーまだまだあるけど入り切りません。一部ロゴ古いかも。ゴメンね。
*1アプリも「ぐぐる」時代へ          "まずインストール" は古い           ディレクトリ(紹介)だけのマーケッ           トでは Google 以前の Web と同じ          動的な Web アプリ環境...
Firefox OS とセキュリティ       ユーザがアプリ権限管理可        「インストール時に全て許可」の        モデルではプライバシー守れない        インストール時と実行時に権限を        許可するハイブリ...
開発パートナーと製品化         Telefónica が最初に製品化           世界 4 位のキャリア           最初はブラジルで発売予定           Qualcomm ローエンド∼ミッド         現...
Firefox OS のパートナー現時点で公表済みの一部パートナーのみ。続報は 24 日にね。
ステキ。   僕もスマホになって君と  一緒にお出かけしたいな!
Apps Dev
Firefox OS のアプリ開発       Web アプリです。       Web アプリです。       Web アプリです。       大事なこと3回
Firefox OS のアプリ開発       Web アプリです。       Web アプリです。       Web アプリです。       大事なこと3回
Firefox OS のアプリ開発       いつもの開発ツール       いつものエディタ       いつものライブラリ       いつもと一緒だ       から安心だね!
アプリ開発の流れ    普通に Web 開発     デバッグもいつも通り    manifest ファイルを用意     メタ情報を JSON 形式で記載    シミュレータや実機テスト     PC で動かない API は実機で確認    ...
manifest ファイル{  "name":	 "フォクすけアプリ",  "description":	 "あのフォクすけが遂にアプリに!",  "launch_path":	 "/index.html",  "icons":	 {    "...
Firefox OS Simulator               再起動不要の拡張機能                 https://addons.mozilla.org/ja/                 firefox/addon/...
Firefox OS Simulator (r2d2b2g)          プロファイル付きデスクトップビルドにホームボタンを追加       コンソールやディレクトリからアプリケーションを読み込む機能も
シミュレータにインストール    Add Directory ボタン     manifest ファイルを選択     zip されて packaged app として     インストールされ、起動する    Update ボタンで更新   ...
つーるきっととかは?        Firefox OS 標準の     ライブラリとかあるの?
GAIA Building Blocks (UI 部品)          Gaia (Firefox OS 標準) Apps          のデザインを簡単に作れる           http://buildingfirefoxos.co...
Marketplace
まーけっと?   Web アプリの配信方法は?
Firefox Marketplace          Device, OS 横断マーケット           Web Platform のためのストア           Firefox 限定にならない設計          現在テスター...
オープンなアプリストア    全てを Web 技術で実装     安定・平等な環境を提供     Marketplace のソースも公開    ベンダー非依存     Firefox Marketplace 以外にも     ストア、認証、課金...
オープンなレビューシステム                     コミュニティレビュー                        Firefox のアドオンと同じ                        レビュー基準もレビュアーもす...
自分のサイトで配布               install() 関数使うだけ                 navigator.mozApps.install()                 manifest ファイル URL を渡す...
navigator.mozApps.install()var	 Apps	 =	 navigator.mozApps;var	 manifest	 	 	 	 =	 "http://apps.dynamis.jp/manifest.webapp...
Firefox = WebRT (WebRunTime) どろいど君    Gecko は Web エンジンとも仲良し!           Firefox = Gecko で XUL/JS           WebApps = Gecko ...
Android に Web アプリ環境を        Web App = Native App に          ホームスクリーンへの追加や          独立してフル画面起動など          ネイティブ同様の利用体験     ...
PC にも Web アプリ環境を      Web App = Native App に       プログラムフォルダ (アプリケー       ションディレクトリ) への追加       ウィンドウはもちろんプロセスも       データも...
WWeebb  だからどこにでも!      Web らしいシステムだね!
実機で開発したい?     僕の手でも使えるかな?
Developer Preview Phone   Telefónica と Geeksphone が作る開発者向けテスト端末
Developer Preview Phone      近日発売予定      Keon:       Snapdragon 1GHz, 4GB ROM,       512MB RAM, 3.5" HVGA      Peak:      ...
もっと知りたい?     僕はもっと知りたい!
Firefox OS コミュニティを!       http://FxOS.org/        (https://groups.google.com/group/        firefoxos にリダイレクト)       http://...
Summary      WebRT as an OS...
今年  WWeebb  技術が      僕はまず立派なブラウザになり      いつか立派な OS になるんだ!
今年  WWeebb  技術が OOSS  になる!      僕はまず立派なブラウザになり      いつか立派な OS になるんだ!
質問ある?ぼくには難しいことは分からないけど許してね。
See Also...
開発者ツール紹介    一通りの機能と使い方    Firefox 標準の開発者ツール     隠し設定やビルトイン関数のリ     ファレンスなども含めています    Firebug とその拡張機能     アイコンや背景画像を変更する   ...
JavaScript.Next          JavaScript の最新仕様           ECMAScript 5th のポイント          JavaScript 次世代仕様           ECMAScript 6t...
セキュリティ関連機能紹介    セキュリティ大事!     知っておくべき機能です    Content Security Policy     次世代セキュリティポリシー     Same Origin Policy はもう古い       ...
HTML2013 Web=OS
HTML2013 Web=OS
HTML2013 Web=OS
HTML2013 Web=OS
HTML2013 Web=OS
HTML2013 Web=OS
HTML2013 Web=OS
HTML2013 Web=OS
Upcoming SlideShare
Loading in...5
×

HTML2013 Web=OS

7,176

Published on

HTML5 Carnival Fukuoka および HTML5 Conference Miyazaki 2013 で使用したスライド

Published in: Technology

Transcript of "HTML2013 Web=OS"

  1. 1. HTML2013 : Web=OS Slides @ HTML5 Carnival Fukuoka by Tomoya Asai (dynamis) Last Update: 2013/02/09
  2. 2. HTML2013 : Web=OSSlides @ HTML5 Conference Miyazaki 2013 by Tomoya Asai (dynamis) Last Update: 2013/02/10
  3. 3. WWeebb が OOSS になるってどういうこと? 何だか分かんないけど とっても楽しそうだね!
  4. 4. about:me
  5. 5. about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  6. 6. about:mozilla in 2012
  7. 7. https://twitter.com/lindwurm_/status/288558397119397888
  8. 8. https://twitter.com/lindwurm_/status/288558397119397888
  9. 9. https://twitter.com/lindwurm_/status/288558397119397888
  10. 10. MMoozziillllaa ステキでしょ? 世界をもっとステキに しようと頑張ってます
  11. 11. Topics
  12. 12. 本日のトピックぼくおやつ Introduction担当ねっ! HTML2013 Firefox OS App Dev Marketplace
  13. 13. about:foxkeh 今日もプレゼンを手伝って くれるフォクすけを紹介します
  14. 14. ぼくフォクすけ いつか僕も Firefox みたいな 立派なブラウザになるんだ!
  15. 15. サーバ (Apache Camel) の上にクライアント (Firefox)
  16. 16. 君と一緒にお出 かけしたいな!ぼくのステッカーを君のPC とスマホに貼ってね!
  17. 17. Introduction
  18. 18. みんな大好き ""HHTTMMLL55"" Mozilla と Firefox も みんな大好きだよね!
  19. 19. "HTML5" の目的 アプリ のための HTML HTML は文書専用じゃない 互換性 のある実装に ブラウザの挙動を厳密に定義 マルチデバイス Web どこでも同じ Web 技術で
  20. 20. Web 標準プラットフォーム プラットフォーム としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
  21. 21. 独自プラットフォーム ネイティブアプリ 機能も速度もネイティブ優先 アプリエコシステム 専用のストアや課金システム Web は WebView Web は 一機能、独自 API 推奨
  22. 22. 独自プラットフォーム i a f cプラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある
  23. 23. 標準技術 のオープンな世界 vs独自技術 による囲い込み 「ブラウザ戦争」の時代はとっくに終わりました
  24. 24. 独自プラットフォームの課題 プラットフォーム依存 それぞれ異なる言語や API 不透明な継続性・再利用性 ベンダー依存の運命共同体 Fragmentation・実装依存 同一プラットフォームでも非互換
  25. 25. 独自プラットフォームの課題 プラットフォーム依存 それぞれ異なる言語や API 不透明な継続性・再利用性 ベンダー依存の運命共同体 Fragmentation・実装依存 同一プラットフォームでも非互換
  26. 26. Fragmentation...http://i0.wp.com/cerebrux.files.wordpress.com/2012/09/ androidclones.jpg
  27. 27. "HTML5" への期待 次世代プラットフォーム Web 技術で何でも可能に Web アプリ開発を簡単に API の充実と互換性確保 マルチデバイス対応 開発言語や API の共通化
  28. 28. Web が共通プラットフォーム プラットフォーム としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
  29. 29. Multi Media Mouse, HTML5 Key ev. Forms W3C OfflineHTML5 HTML5 SupportParser WAI- XHTML5 ARIA Semantic Elements
  30. 30. 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
  31. 31. 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 Queries Layout Micro- HTML Data TransCSS3~ form Regions Anim ation Filters
  32. 32. 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 Queries Layout Micro- HTML Data Trans CSS3~ OGP XPath form Regions RSS Anim Math ation Filters ML WOFF DOM4
  33. 33. 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 Media SQL USB Workers Queries Layout Flex File Micro- Box Sys HTML Data Trans CSS3~ Battery Status OGP XPath form Regions Proxi- Anim mitySchema RSS Math ation Filters .org ML WOFF RDF DOM4
  34. 34. HTML5 = WebKit の方が良い? それどの WebKit? IE6 vs IE10 以上に違う現実 その API と実装で大丈夫? 複数実装でより良い標準に イノベーションは競争から 独占が進化を止めてたよね…
  35. 35. I am sad that the Web didn t handle small screens ̶ and later, touch UI ̶ that well. ... snip ...For touch, though, I wish we had done a better job ofmapping the UI to the Web s generic events. A touch gets mapped to a click event easily enough, butdrag-and-drop never got mapped, pinch gestures didn t get mapped to wheel events, etc. Mainly I think this is because the first truly successful touch browser set the standard, and it was developedmostly in secret with a small team many of whom, as I understand it, weren t Web veterans. Ian Hickson のインタビューより
  36. 36. 独占やクローズド仕様は残念… タッチイベントが残念… ドラッグ&ドロップは? ピンチとホイールの対応は? 密室で作られたから… 最初の人気タッチブラウザ実装 Web 技術知らない奴らが作った オープンな標準は世界の英知の結晶
  37. 37. The drag-and-drop API is horrible,but it has one thing goingfor it: IE6 implements it, as do Safari and Firefox. by Ian Hickson: http://twitter.com/Hixie/status/4075253361
  38. 38. Drag & Drop API は酷いけど、採用する理由がひとつある。つまり、IE6 だけでなく Safari や Firefox でも実装されているということだ。 by Ian Hickson: http://twitter.com/Hixie/status/4075253361
  39. 39. オープンなモバイルでイノベーションを加速! オープンと競争は革新の源泉
  40. 40. HTML2013
  41. 41. ""HHTTMMLL55"" は今年どんな進化をするの? 未来に向かって走り続ける! ぼくは足短いから遅いけど…
  42. 42. Web で可能になってたこと マルチメディア Audio, Video, Animation, 3D ... アプリケーション Offline, Storage, Indexed DB... 高度な通信制御 双方向通信, Server-Sent Event... 2011 年にはできていたことの一例
  43. 43. Web ではできなかったこと システムステータス WiFi 情報, モバイル通信... 各種センサー 光センサー, 近接センサー... 低レベルハードウェア制御 USB, BlueTooth, NFC... 2011 年にはできなかったことの一例
  44. 44. 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 Media SQL USB Workers Queries Layout Flex File Micro- Box Sys HTML Data Trans CSS3~ Battery Status OGP XPath form Regions Proxi- Anim mitySchema RSS Math ation Filters .org ML WOFF RDF DOM4
  45. 45. Opus H.264 Web Audio Notifi- Web cation RTC この辺りが SPDY DNT TCP Socket Tel FileAPI CSP Radio Net2012 年の進化 ECMA Info 6th Indexed Device DB Storage Flex File Box Sys CSS3~ Battery Status Regions Proxi- mity Filters
  46. 46. ブラウザの技術からプラットフォームへ 僕はまず立派なブラウザになり いつかは立派な OS にならなきゃ
  47. 47. 2012 年実装 Web APIAlarm File Handle Push Notificationsattention screen FM Radio SettingsArchive IdleAPI SMSAudio Policy Mouse Lock Screen OrientationBackground Sensor Mobile Connection System XHRBrowser Network Events TCP SocketCamera Network Stats Web TelephonyContacts Manage Time ManagerDesktop Notification Payment Open Web AppsDevice Storage Permissions WiFi ManagementEmbed Apps Power Management などなど... 実装状況などのまとめ表: https://wiki.mozilla.org/WebAPI
  48. 48. Next Web APIBackground Services PaymentBluetooth-*** QuotaCalendar Resource LockDatabase Migration (temp to Simple Storagepermanent storage) Social APIFileSystem? SPDY Server PushNFC SpellcheckHTTP-cache UDB Datagram SocketKeyboard/IME USB (low-level)Log USB file-readingMPEG DASH WebRTC - CameraOpen Web Apps WebRTC - P2PParallel Array などなど... どこまで今年中にサポートされるか楽しみ!
  49. 49. WWeebb 技術で未来を創ろう! 未来に向かって走り続けなきゃ! ぼくは足短いから走るの遅いけど
  50. 50. Web 標準を充実させよう! Web = Native に 不足機能はすべて定義・実装 W3C の WG などで標準化 実装と平行して標準化 Device API, System Apps... そのほか IETF などでも https://wiki.mozilla.org/WebAPI
  51. 51. Web API の標準化Device API, System Application, Web Apps WG が主 実装面では圧倒的に Firefox がリードしている FYI: http://www.w3.org/Mobile/mobile-web-app-state/
  52. 52. これなら WWeebb がOOSS になれるね! どんなアプリでも作れそう! ボクもいろいろ作りた∼い!
  53. 53. Firefox OS
  54. 54. FFiirreeffooxx OOSS って どんなん感じ? フォクすけもわくわく。
  55. 55. ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も その他なんでも...
  56. 56. ステータスバー (通知、 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも...すべて Web 技術で!
  57. 57. Firefox OS (Boot to Gecko) Web 技術が「ネイティブ」 HTML5, JavaScript, Web API... Java に匹敵する速度も目指して Gecko エンジンだけ起動 Kernel 上に Gecko を Java VM などの中間レイヤなし Gecko = Firefox 描画エンジン プロジェクト名は今でも Boot to Gecko
  58. 58. Firefox OS = スマート(軽量) OS既存プラットフォーム Firefox OS Web Browser/ Platform Native API- HTML5 User based UI Experience/ Content APIs Web Engine/ Standard Device APIs Kernel (e.g. Android, iOS, Kernel Win7, etc.) Device (phone, tablet, Device desktop) Web プラットフォームの実行環境としては圧倒的にスマート!
  59. 59. Firefox OS エコシステムの魅力 ネイティブに負けない 提供される API も充実 一部処理は速度面でも匹敵 スリムな HTML5 実行環境 $100 スマホでも十分動作 $100 タブレットは当たり前 圧倒的な開発者数... 急速な高速化が続き、型推論の効く処理は既に Dalvik/Java にも匹敵
  60. 60. 開発者の多いプラットフォーム 800万人 10万人 45万人Web プラットフォームの開発者は iOS の 80 倍、Android の 18 倍!
  61. 61. 透明性や自由度の 高いプラットフォーム 既存の独占的 Firefox OS による プラットフォーム Open プラットフォーム 開発者/OEM/キャリア market 開発者/OEM/ / キャリア Apple Google MS App Store Play MarketplaceiPhone/iPad 端末 端末 ユーザ ユーザ ユーザ ユーザ 端末
  62. 62. Global アプリパートナーまだまだあるけど入り切りません。一部ロゴ古いかも。ゴメンね。
  63. 63. *1アプリも「ぐぐる」時代へ "まずインストール" は古い ディレクトリ(紹介)だけのマーケッ トでは Google 以前の Web と同じ 動的な Web アプリ環境 Web サイトや Web アプリはアク セスするだけで使える アプリを検索してまず試し、 気に入ったらホームに追加する *1 everything.me ってサービスだから正確には「えぶる」かも?
  64. 64. Firefox OS とセキュリティ ユーザがアプリ権限管理可 「インストール時に全て許可」の モデルではプライバシー守れない インストール時と実行時に権限を 許可するハイブリッド方式 ユーザが理解できるか。プライバ シーに関わるかなどで分類。
  65. 65. 開発パートナーと製品化 Telefónica が最初に製品化 世界 4 位のキャリア 最初はブラジルで発売予定 Qualcomm ローエンド∼ミッド 現在は Dev Phone by ZTE コードネームは「うなぎ」 Softbank の Sprint 買収が確定したら Telefónica は 5 位になる
  66. 66. Firefox OS のパートナー現時点で公表済みの一部パートナーのみ。続報は 24 日にね。
  67. 67. ステキ。 僕もスマホになって君と 一緒にお出かけしたいな!
  68. 68. Apps Dev
  69. 69. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  70. 70. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  71. 71. Firefox OS のアプリ開発 いつもの開発ツール いつものエディタ いつものライブラリ いつもと一緒だ から安心だね!
  72. 72. アプリ開発の流れ 普通に Web 開発 デバッグもいつも通り manifest ファイルを用意 メタ情報を JSON 形式で記載 シミュレータや実機テスト PC で動かない API は実機で確認 Vibration, Touch, Sensor... https://github.com/dynamis/firefoxos/wiki/simulator
  73. 73. manifest ファイル{  "name": "フォクすけアプリ",  "description": "あのフォクすけが遂にアプリに!",  "launch_path": "/index.html",  "icons": {    "128": "/icons/foxkeh-128.png"  },  "developer": {    "name": "dynamis",    "url": "http://dynamis.jp/"  },  "default_locale": "ja"}// 注意: ローカルファイルで / -> /index.html 変換はない https://developer.mozilla.org/en-US/docs/Apps/Manifest
  74. 74. Firefox OS Simulator 再起動不要の拡張機能 https://addons.mozilla.org/ja/ firefox/addon/firefox-os-simulator/ ポチッと押すだけ Web 開発メニューに追加される Firefox デスクトップビルド+ プロファイル+Alpha 詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator
  75. 75. Firefox OS Simulator (r2d2b2g) プロファイル付きデスクトップビルドにホームボタンを追加 コンソールやディレクトリからアプリケーションを読み込む機能も
  76. 76. シミュレータにインストール Add Directory ボタン manifest ファイルを選択 zip されて packaged app として インストールされ、起動する Update ボタンで更新 同じディレクトリのファイルを zip し直して、起動する https://github.com/dynamis/firefoxos/wiki/simulator
  77. 77. つーるきっととかは? Firefox OS 標準の ライブラリとかあるの?
  78. 78. GAIA Building Blocks (UI 部品) Gaia (Firefox OS 標準) Apps のデザインを簡単に作れる http://buildingfirefoxos.com/ 使っても使わなくても OK 好きな SDK/Library 使える 自由な Web ですから! http://buildingfirefoxos.com/
  79. 79. Marketplace
  80. 80. まーけっと? Web アプリの配信方法は?
  81. 81. Firefox Marketplace Device, OS 横断マーケット Web Platform のためのストア Firefox 限定にならない設計 現在テスター向け公開中 対象は Firefox OS と Android 版 Firefox Aurora/Nightly PC で見るには UA 書き換え... https://marketplace.firefox.com/
  82. 82. オープンなアプリストア 全てを Web 技術で実装 安定・平等な環境を提供 Marketplace のソースも公開 ベンダー非依存 Firefox Marketplace 以外にも ストア、認証、課金も自由に https://marketplace.firefox.com/
  83. 83. オープンなレビューシステム コミュニティレビュー Firefox のアドオンと同じ レビュー基準もレビュアーもすべ てオープンなマーケット 動作まではレビューしない あくまで最低限のフィルタhttps://developer.mozilla.org/en-US/docs/Apps/Marketplace_review_criteria
  84. 84. 自分のサイトで配布 install() 関数使うだけ navigator.mozApps.install() manifest ファイル URL を渡す その他の Apps API: navigator.mozApps.getSelf() navigator.mozApps.getInstalled() installPackage() は FxOS 限定 https://developer.mozilla.org/en-US/docs/Apps/Apps_JavaScript_API
  85. 85. navigator.mozApps.install()var Apps = navigator.mozApps;var manifest = "http://apps.dynamis.jp/manifest.webapp";var request = Apps.install(manifest);request.onsuccess = function() {  // 成功時の処理};request.onerror = function() {  // 失敗時の処理};
  86. 86. Firefox = WebRT (WebRunTime) どろいど君 Gecko は Web エンジンとも仲良し! Firefox = Gecko で XUL/JS WebApps = Gecko で HTML/JS マルチデバイス対応 PC, Android, Firefox OS... 同じコードでどこでも動く マーケットもマルチデバイス
  87. 87. Android に Web アプリ環境を Web App = Native App に ホームスクリーンへの追加や 独立してフル画面起動など ネイティブ同様の利用体験 Firefox = WebRT for Androidホームにインストール、アプリを起動した画面、マーケットをブラウズ
  88. 88. PC にも Web アプリ環境を Web App = Native App に プログラムフォルダ (アプリケー ションディレクトリ) への追加 ウィンドウはもちろんプロセスも データも全て独立 Firefox = WebRT for PC
  89. 89. WWeebb だからどこにでも! Web らしいシステムだね!
  90. 90. 実機で開発したい? 僕の手でも使えるかな?
  91. 91. Developer Preview Phone Telefónica と Geeksphone が作る開発者向けテスト端末
  92. 92. 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/
  93. 93. もっと知りたい? 僕はもっと知りたい!
  94. 94. Firefox OS コミュニティを! http://FxOS.org/ (https://groups.google.com/group/ firefoxos にリダイレクト) http://FxOS.org/wiki (https://github.com/dynamis/firefoxos/ wiki にリダイレクト) みんな参加してね。 みんなよろしく!
  95. 95. Summary WebRT as an OS...
  96. 96. 今年 WWeebb 技術が 僕はまず立派なブラウザになり いつか立派な OS になるんだ!
  97. 97. 今年 WWeebb 技術が OOSS になる! 僕はまず立派なブラウザになり いつか立派な OS になるんだ!
  98. 98. 質問ある?ぼくには難しいことは分からないけど許してね。
  99. 99. See Also...
  100. 100. 開発者ツール紹介 一通りの機能と使い方 Firefox 標準の開発者ツール 隠し設定やビルトイン関数のリ ファレンスなども含めています Firebug とその拡張機能 アイコンや背景画像を変更する カスタマイズにも言及してます http://r.dynamis.jp/devtools
  101. 101. JavaScript.Next JavaScript の最新仕様 ECMAScript 5th のポイント JavaScript 次世代仕様 ECMAScript 6th や Harmony http://r.dynamis.jp/jsnext
  102. 102. セキュリティ関連機能紹介 セキュリティ大事! 知っておくべき機能です Content Security Policy 次世代セキュリティポリシー Same Origin Policy はもう古い http://r.dynamis.jp/sec
  1. A particular slide catching your eye?

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

×