Upload
dynamis-
View
3.233
Download
5
Embed Size (px)
DESCRIPTION
Android の会 12 月定例会で使用したスライド https://www.android-group.jp/event/event16.html
Citation preview
Last Update: 2012/12/03
Pure Web AppsSlides @ Android Group Japan
by Tomoya Asai (dynamis)
about:me
about:dynamisMozilla Japan
http://dynamis.jp@dynamitter
facebook.com/dynamisレッサーパンダが好き。
mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
Topics
本日のトピック
about:IntroductionWeb PlatformPure Web AppsSummary
about:foxkeh
ときどきプレゼン手伝ってくれるフォクすけを紹介します
ぼくフォクすけ
いつか僕も Firefox みたいな立派なブラウザになるんだ!
ぼくフォクすけ
フォクすけ のぬいぐるみです
出荷前のフォクすけたちです。
取りあえず 48 人並べてみました
FFXXKK 4488!
後ろ姿の方がもふもふ!
FFXXKK 4488!
明日からのキャンペーンが最後のチャンス!
明日から最後のチャンス!
Introduction
みんな大好き ""HHTTMMLL55""
Mozilla と Firefox もみんな大好きだよね?
"HTML5" への期待
次世代プラットフォームアプリ開発のプラットフォーム
Web アプリ開発を簡単に互換性のある範囲の拡大
マルチデバイス展開言語と API を共通化
Web が共通プラットフォーム
Web がプラットフォームなら標準技術でアプリ環境が統一される
プラットフォームとしての Web
もっともっと WWeebb を進化させなきゃ!
Web をどんどん進化させて魅力的なプラットフォームに!
Web Platform
今の ""HHTTMMLL55"" で満足してちゃだめ!
未来に向かって走り続けなきゃ!ぼくは足短いから走るの遅いけど
Web で可能になったこと
マルチメディアAudio, Video, Animation, 3D ...
アプリケーションOffline, Storage, File ...
高度な通信制御双方向通信, DNT ...
2011 年にはできていたことの一例
Web ではできなかったこと
システムステータスWiFi 情報, モバイル通信...
各種センサー光センサー, 近接センサー...
低レベルハードウェア制御USB, BlueTooth, NFC...
2011 年にはできなかったことの一例
SemanticElements
MultiMedia
HTML5Forms
OfflineSupportHTML5HTML5
Parser
Mouse,Key ev.
XHTML5WAI-ARIA
W3C
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
Server-Sent ev.
WebSockets
WebStorage
HTML5HTML5Parser
Mouse,Key ev.
XHTML5
WebWorkers
WebMessag-
ing
WAI-ARIA
W3C
WHATWG
HTML
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
Server-Sent ev.
WebSockets
WebStorage
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
XHTML5
WebWorkers
WebMessag-
ing
WAI-ARIA
W3C
WHATWG
HTML
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
WebGL
IndexedDB
SVG
Server-Sent ev.
WebSockets
WebSockets
Geo-location
FileAPI
WebStorage
XHR2
MathML
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
ECMAScript
CSP
SPDY
XHTML5
Orien-tation
WebWorkers
WebMessag-
ing
DOM4
SMIL Vibra-tion
XPathRSS
OGP
WAI-ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
HTML
DNT
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Webm
H.264
Micro-Data
WebGL
WebSQL
IndexedDB
SVG
Server-Sent ev.
WebSockets
WebSockets
Geo-location
FileAPI
WebStorage
XHR2
MathML
WebAudio
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
Opus
ECMAScript ECMA
6th
USB
CSP
SPDY
WebCL
WebRTC
NetInfo
MP3
DeviceStorage
TCPSocket
NFC
File Sys
Notifi-cation
XHTML5
Orien-tation
WebWorkers
WebMessag-
ing
DOM4
SMIL Vibra-tion
Proxi-mity
XPathRSS
RDF
OGPSchema
.org
WAI-ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
BatteryStatus
Radio
Tel
HTML
DNT
WWeebb 技術で未来を創ろう!
未来に向かって走り続けなきゃ!ぼくは足短いから走るの遅いけど
Web 標準を充実させよう!
不足機能は実装&標準化Web = Native とする
W3C の WG などで標準化実装と平行して標準化Device API, System Apps...そのほか IETF などでも
https://wiki.mozilla.org/WebAPI
Web API の標準化
W3C Device API WG, System Application WG が主実装面では圧倒的に Firefox がリードしている
FYI: http://www.w3.org/Mobile/mobile-web-app-state/
JavaScript の進化
次世代 JS 最高!Firefox が最も実装進んでる慣れると現 JS 書くのがツライ
高速化やデバッグ容易化Class, TypedArray, ParallelArray ...静的解析でコンパイル時エラーを出しやすい言語仕様に
JavaScript が常に勝つ!
すべて問題解決してきた速度遅い → 高速化ミス多発 → Strict Modeスレッドがない → WorkersGPU 使えない → WebGL, WebCLClass 使いたい → 入るよ*** できない → API 増加中
写真は JavaScript の父 Brendan Eich (Mozilla CTO) です
See Also: JavaScript.Next
JavaScript の最新仕様ECMAScript 5th のポイント
JavaScript 次世代仕様ECMAScript 6th や Harmony
http://r.dynamis.jp/jsnext
ストレージ系の進化
IndexedDBLocal Storage は縮小化の方向
FileReader, FileHandleFileWriter, FileSystem も?
Device StorageArchive (ZIP 読み出し)
File System API 周りの話
Google:ネイティブと一緒で良いじゃんファイルシステム使おうぜ!
Mozilla:ファイルシステムなんて前近代的抽象化したコレクションにすべき
いまのところ平行線
Web デザインの進化
レイアウトGrid, Regions, Exclusions...Flexbox (XUL 的レイアウト)
フィルターSVG Filter, CSS Filter
CSS 構文の進化@document, variable ...
CSS Exclusions
自由な形の領域にテキストを流し込めますChrome Canary - http://html.adobe.com/webstandards/cssexclusions/
CSS Regions
複数領域にテキストを流し込み方向やサイズに応じたレイアウトも簡単
Chrome Canary - http://html.adobe.com/webstandards/cssregions/
CSS Filters
ぼかしや色調整などのフィルタ効果や曲げたり回したり変形も自由自在に
Chrome Canary - http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/
SVG Filter & CSS Filter
Mozilla:既にある SVG 使おうぜ!
WebKit:SVG なんてシラネ。俺は何でも CSS でやるぜ!
Mozilla:仕方ないな…
アニメーションの進化
乱立しすぎ&連携無しJavaScript AnimationCanvas 2D, WebGLSVG & SMILCSS Transisions, Animations
Web Animations で連携へ
Web Animations へ
Apple (Flash 代替技術として):CSS でアニメーション!
Mozilla & Opera:ダメ構文は直して標準化
Mozilla, Google, Adobe:JS と一括管理できる API 作ろう
Web Animations は Mozilla Japan の Brian さん頑張ってます
マルチメディアの進化
Opus Audio Codec (RFC6716)Web Audio, Audio DataWeb Audio にも Firefox 近日対応
Camera API (Media Capture)WebRTC - getUserMedia電話会議などは簡単に
WebRTC (getUserMedia)
カメラを使ったデータ処理も可能ビデオ会議やリアルタイム動画分析に
Nightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/
インタラクティブ系の進化
Touch EventVibrationGamepadPointer Lockポインタを隠して移動量を取得
インタラクティブ系の進化
Touch EventVibrationGamepadPointer Lockポインタを隠して移動量を取得
Banana Bread
3D ゲームも普通に作れるプラットフォームファーストパーソンシューティングの例
https://developer.mozilla.org/ja/demos/detail/bananabread
センサー系の進化
従来からの Web APIGeolocation (位置情報)Orientation (加速度)
Sensor APIAmbient Light (環境光)Proximity (近接)Android 版 Firefox は実装済み
ネットワーク系の進化
WebSocketServer-Sent EventSPDY v2, v3 ... HTTP 2.0WebRTC - Peer to PeerTCP Socket, HTTP-cacheUDP Datagram Socket
Browser Quest
リアルタイムに多人数で同時プレイ (MMORPG)柔軟な画面サイズ対応と双方向通信による
http://browserquest.mozilla.org/
デバイス間連携の進化
Web IntentsWeb ActivitiesPush Notification
この辺の話はカエルさん(小松さん)に聞きましょう
デバイス間連携はこれから本番
Mozilla:Web Activities!
Google:Web Intents!
Mozilla & Google:WHATWG で標準化議論中共に将来非互換になる見込み
この辺の話はカエルさん(小松さん)に聞きましょう
Web Intents×TCP Socket
Web Intents でデバイス間連携 (PC - TV)TCP Socket 開いて家電と通信 (DLNA)
http://www.youtube.com/watch?v=hjUhSWKiwmw
Social 連携の進化
Social APIFirefox×Facebook 導入済みまもなくマルチプロバイダ対応用途は "Social" に限らないある意味サイドバー API...
Social API×WebRTC
https://blog.mozilla.org/futurereleases/2012/11/30/webrtc-makes-social-api-even-more-social/
ステータス系の進化
WiFi InformationMobile ConnectionNetwork Info (通信速度等)Battery Status電池残量に応じた処理を
ハードウェア系の進化
BluetoothUSBUSB file-readingFM RadioNFC
これなら WWeebb で大丈夫だね!
どんなアプリでも作れそう!ボクもいろいろ作りた~い!
Pure Web Apps
WebRT as an OS...
システムレベルまですべて WWeebb 技術で!
システム系の API もあればすべて Web 技術にできるよね
System 系の進化
Resource Lockスリープや WiFi オフなどの禁止
Settings (システム設定)Alarm (時刻指定処理)Background ServiceIdle, Log
アプリプラットフォーム化
Open Web Appsアプリとしてインストール
Paymentいわゆる課金システム
Android でも実装済み
開発版での画面です
セキュリティ面での進化
Content Security Policy特に XSS 対策に有効Firefox 4~ や Chrome 実装済み
Permission APIアプリが使える API の管理
アプリの権限管理はユーザが自由に制御可能重要な API は実行時にユーザに許可を求める
アプリの権限管理
See Also: セキュリティ系機能
セキュリティ大事!知っておくべき機能です
Content Security Policy次世代セキュリティポリシーSame Origin Policy はもう古い
http://r.dynamis.jp/sec
スマホ系の進化
SMS (ショートメッセージ)Telephony (電話)Contacts (電話帳)
Firefox OS (Boot to Gecko)
Web 技術が「ネイティブ」HTML5, JavaScript, Web API...ホーム画面もすべて Web 技術で
Gecko エンジンだけ起動Linux Kernel 上に Gecko をJava VM などの中間レイヤなしGecko = Firefox 描画エンジン
プロジェクト名は今も Boot to Gecko
ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も
その他なんでも...
ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も
その他なんでも...
すべて Web 技術で実現済み!
iOS のようなハイエンド端末専用 OS ではない
Firefox OSミニなのは、要求仕様だけ
See Also: Firefox OS Group
Google Group ありますhttps://groups.google.com/group/firefoxos
参加歓迎。(・・).
楽しみ楽しみ!
僕もスマホになって君と一緒にお出かけしたいな!
Summary
WebRT as an OS...
ブラウザの技術からプラットフォームへ
僕はまず立派なブラウザになりいつかは立派な OS にならなきゃ
See Also...
Firefox OS & Marketplace
Web プラットフォームWeb API が進化を続けている
MarketplaceWeb アプリ配信システム
Firefox OSWeb がネイティブな OS
http://r.dynamis.jp/fxos
CSS 最新機能紹介
CSS の新機能紹介新機能や昨年から変わった点
http://r.dynamis.jp/css2012
開発者ツール紹介
一通りの機能と使い方Firefox 標準の開発者ツール隠し設定やビルトイン関数のリファレンスなども含めています
Firebug とその拡張機能アイコンや背景画像を変更するカスタマイズにも言及してます
http://r.dynamis.jp/devtools