Android の会 12 月定例会で使用したスライド https://www.android-group.jp/event/event16.html

1. Pure Web Apps
Slides @ Android Group Japan
by Tomoya Asai (dynamis)
Last Update: 2012/12/03

2. about:me

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

4. Topics

5. 本日のトピック
about:
Introduction
Web Platform
Pure Web Apps
Summary

6. about:foxkeh
ときどきプレゼン手伝って
くれるフォクすけを紹介します

7. ぼくフォクすけ
ぼくフォクすけ
いつか僕も Firefox みたいな
立派なブラウザになるんだ！

8. フォクすけ のぬいぐるみです

9. 出荷前のフォクすけたちです。

10. FFXXKK 4488！
取りあえず 48 人並べてみました

11. FFXXKK 4488！
後ろ姿の方がもふもふ！

12. 明日から最後
のチャンス！
明日からのキャンペーンが最後のチャンス！

13. Introduction

14. みんな大好き ""HHTTMMLL55""
Mozilla と Firefox も
みんな大好きだよね？

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

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

17. もっともっと WWeebb を
進化させなきゃ！
Web をどんどん進化させて
魅力的なプラットフォームに！

18. Web Platform

19. 今の ""HHTTMMLL55"" で
満足してちゃだめ！
未来に向かって走り続けなきゃ！
ぼくは足短いから走るの遅いけど

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

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

23. Multi
Media Mouse,
HTML5 Key ev.
Forms
W3C
Offline
HTML5 HTML5 Support
Parser
WAI-
XHTML5 ARIA
Semantic
Elements

24. Canvas
Web
WHATWG Messag-
ing
Multi Web
Media Mouse, Sockets
HTML5 Key ev.
Forms
W3C Server-
Offline
HTML5 HTML5 Support
Sent ev.
Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web
Workers
Micro-
HTML Data

25. Canvas
Web
WHATWG Messag-
ing
Multi Web
Media Mouse, Sockets
HTML5 Key ev.
Forms
W3C Server-
Offline
HTML5 HTML5 Support
Sent ev.
Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web Media
Workers Layout Queries
Micro-
HTML Data
TransCSS3~ Flex
Box
form
Anim
Regions
ation

26. 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

27. 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

28. WWeebb 技術で
未来を創ろう！
未来に向かって走り続けなきゃ！
ぼくは足短いから走るの遅いけど

29. Web 標準を充実させよう！
不足機能は実装＆標準化
Web ＝ Native とする
W3C の WG などで標準化
実装と平行して標準化
Device API, System Apps...
そのほか IETF などでも
https://wiki.mozilla.org/WebAPI

30. Web API の標準化
W3C Device API WG, System Application WG が主
実装面では圧倒的に Firefox がリードしている
FYI: http://www.w3.org/Mobile/mobile-web-app-state/

31. JavaScript の進化
次世代 JS 最高！
Firefox が最も実装進んでる
慣れると現 JS 書くのがツライ
高速化やデバッグ容易化
Class, TypedArray, ParallelArray ...
静的解析でコンパイル時エラーを
出しやすい言語仕様に

32. JavaScript が常に勝つ！
すべて問題解決してきた
速度遅い → 高速化
ミス多発 → Strict Mode
スレッドがない → Workers
GPU 使えない → WebGL, WebCL
Class 使いたい → 入るよ
*** できない → API 増加中
写真は JavaScript の父 Brendan Eich (Mozilla CTO) です

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

34. ストレージ系の進化
IndexedDB
Local Storage は縮小化の方向
FileReader, FileHandle
FileWriter, FileSystem も？
Device Storage
Archive (ZIP 読み出し)

35. File System API 周りの話
Google:
ネイティブと一緒で良いじゃん
ファイルシステム使おうぜ！
Mozilla:
ファイルシステムなんて前近代的
抽象化したコレクションにすべき
いまのところ平行線

36. Web デザインの進化
レイアウト
Grid, Regions, Exclusions...
Flexbox (XUL 的レイアウト)
フィルター
SVG Filter, CSS Filter
CSS 構文の進化
@document, variable ...

37. CSS Exclusions
自由な形の領域にテキストを流し込めます
Chrome Canary - http://html.adobe.com/webstandards/cssexclusions/

38. CSS Regions
複数領域にテキストを流し込み
方向やサイズに応じたレイアウトも簡単
Chrome Canary - http://html.adobe.com/webstandards/cssregions/

39. CSS Filters
ぼかしや色調整などのフィルタ効果や
曲げたり回したり変形も自由自在に
Chrome Canary - http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/

40. SVG Filter & CSS Filter
Mozilla:
既にある SVG 使おうぜ！
WebKit:
SVG なんてシラネ。
俺は何でも CSS でやるぜ！
Mozilla:
仕方ないな…

41. アニメーションの進化
乱立しすぎ＆連携無し
JavaScript Animation
Canvas 2D, WebGL
SVG & SMIL
CSS Transisions, Animations
Web Animations で連携へ

42. Web Animations へ
Apple (Flash 代替技術として):
CSS でアニメーション！
Mozilla & Opera:
ダメ構文は直して標準化
Mozilla, Google, Adobe:
JS と一括管理できる API 作ろう
Web Animations は Mozilla Japan の Brian さん頑張ってます

43. マルチメディアの進化
Opus Audio Codec (RFC6716)
Web Audio, Audio Data
Web Audio にも Firefox 近日対応
Camera API (Media Capture)
WebRTC - getUserMedia
電話会議などは簡単に

44. WebRTC (getUserMedia)
カメラを使ったデータ処理も可能
ビデオ会議やリアルタイム動画分析に
Nightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/

45. インタラクティブ系の進化
Touch Event
Vibration
Gamepad
Pointer Lock
ポインタを隠して移動量を取得

46. インタラクティブ系の進化
Touch Event
Vibration
Gamepad
Pointer Lock
ポインタを隠して移動量を取得

47. Banana Bread
３D ゲームも普通に作れるプラットフォーム
ファーストパーソンシューティングの例
https://developer.mozilla.org/ja/demos/detail/bananabread

48. センサー系の進化
従来からの Web API
Geolocation (位置情報)
Orientation (加速度)
Sensor API
Ambient Light (環境光)
Proximity (近接)
Android 版 Firefox は実装済み

49. ネットワーク系の進化
WebSocket
Server-Sent Event
SPDY v2, v3 ... HTTP 2.0
WebRTC - Peer to Peer
TCP Socket, HTTP-cache
UDP Datagram Socket

50. Browser Quest
リアルタイムに多人数で同時プレイ (MMORPG)
柔軟な画面サイズ対応と双方向通信による
http://browserquest.mozilla.org/

51. デバイス間連携の進化
Web Intents
Web Activities
Push Notification
この辺の話はカエルさん(小松さん)に聞きましょう

52. デバイス間連携はこれから本番
Mozilla:
Web Activities!
Google:
Web Intents!
Mozilla & Google:
WHATWG で標準化議論中
共に将来非互換になる見込み
この辺の話はカエルさん(小松さん)に聞きましょう

53. Web Intents×TCP Socket
Web Intents でデバイス間連携 (PC - TV)
TCP Socket 開いて家電と通信 (DLNA)
http://www.youtube.com/watch?v=hjUhSWKiwmw

54. Social 連携の進化
Social API
Firefox×Facebook 導入済み
まもなくマルチプロバイダ対応
用途は "Social" に限らない
ある意味サイドバー API...

55. Social API×WebRTC
https://blog.mozilla.org/futurereleases/2012/11/30
/webrtc-makes-social-api-even-more-social/

56. ステータス系の進化
WiFi Information
Mobile Connection
Network Info (通信速度等)
Battery Status
電池残量に応じた処理を

57. ハードウェア系の進化
Bluetooth
USB
USB file-reading
FM Radio
NFC

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

59. Pure Web Apps
WebRT as an OS...

60. システムレベルまで
すべて WWeebb 技術で！
システム系の API もあれば
すべて Web 技術にできるよね

61. System 系の進化
Resource Lock
スリープや WiFi オフなどの禁止
Settings (システム設定)
Alarm (時刻指定処理)
Background Service
Idle, Log

62. アプリプラットフォーム化
Open Web Apps
アプリとしてインストール
Payment
いわゆる課金システム

63. ホンモノの Web "アプリ"
ブラウザという枠を飛び出して動作

64. Android でも実装済み
開発版での画面です

65. セキュリティ面での進化
Content Security Policy
特に XSS 対策に有効
Firefox 4 や Chrome 実装済み
Permission API
アプリが使える API の管理

66. アプリの権限管理
アプリの権限管理はユーザが自由に制御可能
重要な API は実行時にユーザに許可を求める

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

68. スマホ系の進化
SMS (ショートメッセージ)
Telephony (電話)
Contacts (電話帳)

69. Firefox OS (Boot to Gecko)
Web 技術が「ネイティブ」
HTML5, JavaScript, Web API...
ホーム画面もすべて Web 技術で
Gecko エンジンだけ起動
Linux Kernel 上に Gecko を
Java VM などの中間レイヤなし
Gecko = Firefox 描画エンジン
プロジェクト名は今も Boot to Gecko

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

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

73. Firefox OS
ミニなのは、
要求仕様だけ
iOS のようなハイエンド端末専用 OS ではない

74. See Also: Firefox OS Group
Google Group あります
https://groups.google.com/group/
firefoxos
参加歓迎。(・・).

75. 楽しみ楽しみ！
僕もスマホになって君と
一緒にお出かけしたいな！

76. Summary
WebRT as an OS...

77. ブラウザの技術から
プラットフォームへ
僕はまず立派なブラウザになり
いつかは立派な OS にならなきゃ

78. See Also...

79. Firefox OS & Marketplace
Web プラットフォーム
Web API が進化を続けている
Marketplace
Web アプリ配信システム
Firefox OS
Web がネイティブな OS
http://r.dynamis.jp/fxos

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

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