Firefox OS について HTML5とか勉強会＠KDDI で解説した時に使用したスライド

1. Firefox OS
Slides @ html5j.org 35th
by Tomoya Asai (dynamis)
Last Update: 2013/01/22

2. about:me

3. about:dynamis
Tomoya Asai @ Mozilla Japan
http://dynamis.jp
@dynamitter
facebook.com/ dynamis
レッサーパンダが好き。
mailto: Tomoya ASAI <dynamis@mozilla-japan.org>

4. about:events

5. 今週末は大阪でおさわり！
http://m2.cap-ut.co.jp/event/semi07.html

6. 今週末は東京でもおさわり！
http://atnd.org/events/36267

7. Firefox OS イベント共催募集
2012.11.03:
デザイナーズハック, Tizen Japan コ
いっしょに ンソーシアムと共催
おさわり！ 2012.12.09:
HTML5＋α @福岡と共催
2013.01.26:
まにまにカレッジと共催
次はあなたと！

8. about: Firefox OS group
http://FxOS.org/
(https://groups.google.com/
group/firefoxos にリダイレクト)
コミュニティ一緒に作ってくれる
人を募集しています。(・・).
みんないっしょに！

9. Firefox OS 情報集めてます
http://FxOS.org/wiki
(https://github.com/dynamis/
firefoxos/wiki にリダイレクト)
随時更新しています。
みんなよろしく！

10. about:mozilla
in 2012

11. https://twitter.com/lindwurm_/status/288558397119397888

12. https://twitter.com/lindwurm_/status/288558397119397888

13. https://twitter.com/lindwurm_/status/288558397119397888

14. MMoozziillllaa ステキでしょ？
ステキな世界を作るため
よりいっそう頑張ってます

15. Topics

16. 本日のトピック
about:
Why Firefox OS?
Firefox OS
Web = OS
Marketplace
Apps Dev

17. Why Firefox OS?
html5j.org ですし、
HTML5 的な視点から

18. どうして FFiirreeffooxx が
OOSS になるの？

19. "HTML5" の目的
アプリのための HTML
すべてを Web 技術で実現
互換性のある実装に
ブラウザの挙動を厳密に定義
マルチデバイス Web
どこでも同じ "One Web"

20. Web 標準プラットフォーム
プラットフォーム
としての Web
Web がプラットフォームなら業界標準技術でアプリ環境が統一される

21. 独占プラットフォームの支配
ネイティブアプリ
機能も速度もネイティブ優先
アプリエコシステム
専用のストアや課金システム
WebView
Web は中に取り込んでしまう

22. 独占的プラットフォーム
i a f c
プラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある

23. 独占プラットフォームの問題
プラットフォーム依存
それぞれ異なる言語や API
不透明な継続性・再利用性
ベンダーと運命共同体
囲われた世界での自由
ビジネス的な制約も多い

24. Web 標準のオープンな世界
vs
独自技術による囲い込み
「ブラウザ戦争」の時代はとっくに終わりました

25. "HTML5" への期待
次世代プラットフォーム
アプリ開発のプラットフォーム
Web アプリ開発を簡単に
互換性のある範囲の拡大
マルチデバイス展開
言語と API を共通化

26. Web が共通プラットフォーム
プラットフォーム
としての Web
Web がプラットフォームなら業界標準技術でアプリ環境が統一される

27. Web ベースで透明性や自由度
の高いプラットフォームへ
既存の独占的 Firefox OS による
プラットフォーム Open プラットフォーム
開発者/OEM/キャリア market 開発者/OEM/
/ キャリア
Apple Google MS
App Store Play Marketplace
iPhone/iPad 端末 端末
ユーザ
ユーザ ユーザ ユーザ 端末

28. オープンなモバイルで
イノベーションを加速！
オープンと競争は革新の源泉

29. Web = OS
Web が OS となる時代が来ました

30. うぇぶがおーえす？
Web が OS になるって
どーいうことなんでしょう？

31. Web で可能になったこと
マルチメディア
Audio, Video, Animation, 3D ...
アプリケーション
Offline, Storage, File ...
高度な通信制御
双方向通信, DNT ...

32. Web ではできなかったこと
システムステータス
WiFi 情報, モバイル通信...
各種センサー
光センサー, 近接センサー...
低レベルハードウェア制御
USB, BlueTooth, NFC...

33. 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 ECMA
HTML5 HTML5 Support
Sent ev. ECMA
Script
Parser
Indexed
Web
WAI- DB
XHTML5 Storage
ARIA
Semantic
Elements Web Media
Workers Layout Queries
Micro-
HTML Data
Trans CSS3~ Flex
Box
OGP XPath form
RSS Anim
Math Regions
ation
ML WOFF
DOM4

34. 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 ECMA
HTML5 HTML5 Support
Sent ev. ECMA
Script ECMA
NFC
Parser 6th
Indexed
Web Device
WAI- DB
Storage Storage
XHTML5 ARIA
Semantic Web
Elements Web SQL
Media
USB
Workers Layout Queries
File
Micro- Sys
HTML Data
Trans CSS3~ Flex
Box
Battery
Status
OGP XPath form Proxi-
Anim mity
Schema RSS Math Regions
.org ation
ML WOFF
RDF DOM4

35. Web APIs
Alarm Device Storage Settings
attention screen Embed Apps Web SMS
Audio Policy FM Radio Storage
Background Geolocation System XHR
Sensor IdleAPI TCP Socket
Background Mobile Web Telephony
services Connection Time Manager
Browser Network Events Voicemail
Camera Network Stats Open Web Apps
Contacts Manage
WiFi Management
Desktop Power
などなど...
Notification Management
実装状況などのまとめ表: https://wiki.mozilla.org/WebAPI

36. Web API は標準化
不足機能は実装＆標準化
Web ＝ Native とする
W3C などで標準化
実装と平行して標準化
Device API, System Apps...
そのほか IETF などでも
http://bit.ly/systemlevelapi

37. これなら WWeebb で
大丈夫だね！
どんなアプリでも作れそう！
ボクもいろいろ作りた∼い！

38. Firefox OS
Web = OS を現実に実装

39. FFiirreeffooxx OOSS って
どんなんだろう？
フォクすけもわくわく。

45. ステータスバー (通知、
電波強度、電池残量...)も
カメラやラジオも
ビデオや音楽の再生も
マーケットプレイスも
システムの環境設定も
ホーム画面や壁紙も
電話や SMS の送受信も
もちろん ブラウザ も
その他なんでも...

46. ステータスバー (通知、
電波強度、電池残量...)も
カメラやラジオも
ビデオや音楽の再生も
マーケットプレイスも
システムの環境設定も
ホーム画面や壁紙も
電話や SMS の送受信も
もちろん ブラウザ も
その他なんでも...
すべて Web 技術で！

47. Firefox OS (Boot to Gecko)
Web 技術が「ネイティブ」
HTML5, JavaScript, Web API...
Java に匹敵する速度も目指して
Gecko エンジンだけ起動
Kernel 上に Gecko を
Java VM などの中間レイヤなし
Gecko = Firefox 描画エンジン
プロジェクト名は今も Boot to Gecko

48. 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 プラットフォームの実行環境としては圧倒的にスマート！

49. Firefox OS エコシステムの魅力
ネイティブに負けない
提供される API も充実
一部処理は速度面でも匹敵
スリムな HTML5 実行環境
$100 スマホでも十分動作
$100 タブレットは当たり前
圧倒的な開発者数...

50. 開発者の多いプラットフォーム
800万人
10万人 45万人
Web プラットフォームの開発者は iOS の 80 倍、Android の 18 倍！

51. Global アプリパートナー
まだまだあるけど入り切りません。一部ロゴ古いかも。ゴメンね。

52. *1
アプリも「ぐぐる」時代へ
"まずインストール" は古い
ディレクトリ(紹介)だけのマーケッ
トでは Google 以前の Web と同じ
動的な Web アプリ環境
Web サイトや Web アプリはアク
セスするだけで使える
アプリを検索してまず試し、
気に入ったらホームに追加する
*1 everything.me ってサービスだから正確には「えぶる」かも？

53. Firefox OS とセキュリティ
ユーザがアプリ権限管理可
「インストール時に全て許可」の
モデルではプライバシー守れない
インストール時と実行時に権限を
許可するハイブリッド方式
ユーザが理解できるか。プライバ
シーに関わるかなどで分類。

54. 開発パートナーと製品化
Telefónica が最初に製品化
世界 5 位のキャリア
最初はブラジルで発売予定
Qualcomm ローエンドチップ
現在は Dev Phone by ZTE
コードネームは「うなぎ」

55. Open Web Device パートナー
現時点で公表済みの一部パートナーのみ。続報は来月ね。

56. スマホ OS の Web 度
iOS:
WebView は速度 1/3 制限あり
Android:
WebView 埋め込みでハイブリッド
？
Tizen, Ubuntu:
HTML5 でもアプリ開発可能
Firefox OS:
HTML5 に最適化設計された OS
下に行くほど Web 技術の活用範囲が広い

57. ステキなモバイル OS はどれ？
Web 技術の最適化 ◎ ○ ×
マーケットの自由度 ◎ ○ ×
製品化の自由度 ◎ ○ ×
オープン ◎ ○ *1
×
アプリの権限管理 ◎ × ○
PC/Mobile 共通アプリ ◎ × ×
ネイティブアプリ × ◎ ◎
開発者コミュニティ 8000K 450K 100K
*1 できあがってから部分的にだけ公開する Delayed Open
*1 タブ毎のプロセス分離の弊害 *2 デフォルトブラウザは OS 側に含まれるため

58. ステキ。
僕もスマホになって君と
一緒にお出かけしたいな！

59. Marketplace
Open Web Apps...

60. まーけっと？
Web アプリの配信方法は？

61. Firefox Marketplace
Device, OS 横断マーケット
Web Platform のためのストア
Firefox 限定にならない設計
現在テスター向け公開中
対象は Firefox OS と Android 版
Firefox Aurora/Nightly
PC で見るには UA 書き換え...
https://marketplace.firefox.com/

62. オープンなアプリストア
全てを Web 技術で実装
安定・平等な環境を提供
どこでも配信＆インストール
ベンダー非依存
Firefox Marketplace 以外にも
ストア、認証、課金も自由に
https://marketplace.firefox.com/

63. Android に HTML5 アプリ環境
マルチデバイスマーケット
PC, Android, Firefox OS...
Web App = Native App に
ホームスクリーンへの追加や
独立してフル画面起動など
ネイティブ同様の利用体験
Firefox = WebRT for Android
ホームにインストール、アプリを起動した画面、マーケットをブラウズ

64. WWeebb だから
どこにでも！
Web らしいシステムだね！

65. Apps Dev
Open Web Apps...

66. Firefox OS のアプリ開発
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと３回
いつもと一緒で
あんしんだね！

67. Firefox OS Simulator
再起動不要の拡張機能
https://addons.mozilla.org/ja/
firefox/addon/firefox-os-simulator/
ポチッと押すだけ
Web 開発メニューに追加される
Firefox デスクトップビルド＋
プロファイル＋Alpha
https://github.com/dynamis/firefoxos/wiki/simulator

68. GAIA Building Blocks (UI 部品)
Gaia (Firefox OS 標準) Apps
のデザインを簡単に作れる
https://wiki.mozilla.org/Gaia/
Design/BuildingBlocks
使っても使わなくても OK
好きな SDK/Library 使える
自由な Web ですから！
http://mozilla-b2g.github.com/Gaia-UI-Building-Blocks/

71. 実機で開発したい？
僕の手でも使えるかな？

72. Developer Preview Phone
Telefónica と Geeksphone で作られた開発者向けテスト端末

73. Developer Preview Phone
2013/02 発売予定
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/

74. もっと知りたい？
僕はもっと知りたい！

75. Firefox OS コミュニティを！
http://FxOS.org/
(https://groups.google.com/group/
firefoxos にリダイレクト)
http://FxOS.org/wiki
(https://github.com/dynamis/firefoxos/
wiki にリダイレクト)
みんな参加してね。
みんなよろしく！

76. See Also...

77. 開発者ツール紹介
一通りの機能と使い方
Firefox 標準の開発者ツール
隠し設定やビルトイン関数のリ
ファレンスなども含めています
Firebug とその拡張機能
アイコンや背景画像を変更する
カスタマイズにも言及してます
http://r.dynamis.jp/devtools

78. CSS 最新機能紹介
CSS の新機能紹介
新機能や昨年から変わった点
http://r.dynamis.jp/css2012

79. JavaScript.Next
JavaScript の最新仕様
ECMAScript 5th のポイント
JavaScript 次世代仕様
ECMAScript 6th や Harmony
http://r.dynamis.jp/jsnext

80. セキュリティ関連機能紹介
セキュリティ大事！
知っておくべき機能です
Content Security Policy
次世代セキュリティポリシー
Same Origin Policy はもう古い
http://r.dynamis.jp/sec