• Like
Pure Web Apps
Upcoming SlideShare
Loading in...5
×

Pure Web Apps

  • 3,206 views
Uploaded on

Android の会 12 月定例会で使用したスライド …

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

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
3,206
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
51
Comments
0
Likes
9

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. Pure Web AppsSlides @ 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 年にはできなかったことの一例
  • 22. Multi Media Mouse, HTML5 Key ev. Forms W3C OfflineHTML5 HTML5 SupportParser WAI- XHTML5 ARIA Semantic Elements
  • 23. 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
  • 24. 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 Layout Queries Micro- HTML Data TransCSS3~ Flex Box form Anim Regions ation
  • 25. 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 Layout Queries Micro- HTML Data Trans CSS3~ Flex Box OGP XPath form RSS Anim Math Regions ation ML WOFF DOM4
  • 26. 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 SQL Media USB Workers Layout Queries File Micro- Sys HTML Data Trans CSS3~ Flex Box Battery Status OGP XPath form Proxi- Anim mitySchema RSS Math Regions .org ation ML WOFF RDF DOM4
  • 27. WWeebb 技術で未来を創ろう! 未来に向かって走り続けなきゃ! ぼくは足短いから走るの遅いけど
  • 28. Web 標準を充実させよう! 不足機能は実装&標準化 Web = Native とする W3C の WG などで標準化 実装と平行して標準化 Device API, System Apps... そのほか IETF などでも https://wiki.mozilla.org/WebAPI
  • 29. Web API の標準化W3C Device API WG, System Application WG が主 実装面では圧倒的に Firefox がリードしている FYI: http://www.w3.org/Mobile/mobile-web-app-state/
  • 30. JavaScript の進化 次世代 JS 最高! Firefox が最も実装進んでる 慣れると現 JS 書くのがツライ 高速化やデバッグ容易化 Class, TypedArray, ParallelArray ... 静的解析でコンパイル時エラーを 出しやすい言語仕様に
  • 31. JavaScript が常に勝つ! すべて問題解決してきた 速度遅い → 高速化 ミス多発 → Strict Mode スレッドがない → Workers GPU 使えない → WebGL, WebCL Class 使いたい → 入るよ *** できない → API 増加中 写真は JavaScript の父 Brendan Eich (Mozilla CTO) です
  • 32. See Also: JavaScript.Next JavaScript の最新仕様 ECMAScript 5th のポイント JavaScript 次世代仕様 ECMAScript 6th や Harmony http://r.dynamis.jp/jsnext
  • 33. ストレージ系の進化 IndexedDB Local Storage は縮小化の方向 FileReader, FileHandle FileWriter, FileSystem も? Device Storage Archive (ZIP 読み出し)
  • 34. File System API 周りの話 Google: ネイティブと一緒で良いじゃん ファイルシステム使おうぜ! Mozilla: ファイルシステムなんて前近代的 抽象化したコレクションにすべき いまのところ平行線
  • 35. Web デザインの進化 レイアウト Grid, Regions, Exclusions... Flexbox (XUL 的レイアウト) フィルター SVG Filter, CSS Filter CSS 構文の進化 @document, variable ...
  • 36. CSS Exclusions自由な形の領域にテキストを流し込めますChrome Canary - http://html.adobe.com/webstandards/cssexclusions/
  • 37. CSS Regions 複数領域にテキストを流し込み方向やサイズに応じたレイアウトも簡単Chrome Canary - http://html.adobe.com/webstandards/cssregions/
  • 38. CSS Filters ぼかしや色調整などのフィルタ効果や 曲げたり回したり変形も自由自在にChrome Canary - http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/
  • 39. SVG Filter & CSS Filter Mozilla: 既にある SVG 使おうぜ! WebKit: SVG なんてシラネ。 俺は何でも CSS でやるぜ! Mozilla: 仕方ないな…
  • 40. アニメーションの進化 乱立しすぎ&連携無し JavaScript Animation Canvas 2D, WebGL SVG & SMIL CSS Transisions, Animations Web Animations で連携へ
  • 41. Web Animations へ Apple (Flash 代替技術として): CSS でアニメーション! Mozilla & Opera: ダメ構文は直して標準化 Mozilla, Google, Adobe: JS と一括管理できる API 作ろう Web Animations は Mozilla Japan の Brian さん頑張ってます
  • 42. マルチメディアの進化 Opus Audio Codec (RFC6716) Web Audio, Audio Data Web Audio にも Firefox 近日対応 Camera API (Media Capture) WebRTC - getUserMedia 電話会議などは簡単に
  • 43. WebRTC (getUserMedia) カメラを使ったデータ処理も可能 ビデオ会議やリアルタイム動画分析にNightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/
  • 44. インタラクティブ系の進化 Touch Event Vibration Gamepad Pointer Lock ポインタを隠して移動量を取得
  • 45. インタラクティブ系の進化 Touch Event Vibration Gamepad Pointer Lock ポインタを隠して移動量を取得
  • 46. Banana Bread3D ゲームも普通に作れるプラットフォーム ファーストパーソンシューティングの例 https://developer.mozilla.org/ja/demos/detail/bananabread
  • 47. センサー系の進化 従来からの Web API Geolocation (位置情報) Orientation (加速度) Sensor API Ambient Light (環境光) Proximity (近接) Android 版 Firefox は実装済み
  • 48. ネットワーク系の進化 WebSocket Server-Sent Event SPDY v2, v3 ... HTTP 2.0 WebRTC - Peer to Peer TCP Socket, HTTP-cache UDP Datagram Socket
  • 49. Browser Questリアルタイムに多人数で同時プレイ (MMORPG) 柔軟な画面サイズ対応と双方向通信による http://browserquest.mozilla.org/
  • 50. デバイス間連携の進化 Web Intents Web Activities Push Notification この辺の話はカエルさん(小松さん)に聞きましょう
  • 51. デバイス間連携はこれから本番 Mozilla: Web Activities! Google: Web Intents! Mozilla & Google: WHATWG で標準化議論中 共に将来非互換になる見込み この辺の話はカエルさん(小松さん)に聞きましょう
  • 52. Web Intents×TCP SocketWeb Intents でデバイス間連携 (PC - TV) TCP Socket 開いて家電と通信 (DLNA) http://www.youtube.com/watch?v=hjUhSWKiwmw
  • 53. Social 連携の進化 Social API Firefox×Facebook 導入済み まもなくマルチプロバイダ対応 用途は "Social" に限らない ある意味サイドバー API...
  • 54. Social API×WebRTC https://blog.mozilla.org/futurereleases/2012/11/30 /webrtc-makes-social-api-even-more-social/
  • 55. ステータス系の進化 WiFi Information Mobile Connection Network Info (通信速度等) Battery Status 電池残量に応じた処理を
  • 56. ハードウェア系の進化 Bluetooth USB USB file-reading FM Radio NFC
  • 57. これなら WWeebb で 大丈夫だね! どんなアプリでも作れそう! ボクもいろいろ作りた∼い!
  • 58. Pure Web Apps WebRT as an OS...
  • 59. システムレベルまですべて WWeebb 技術で! システム系の API もあれば すべて Web 技術にできるよね
  • 60. System 系の進化 Resource Lock スリープや WiFi オフなどの禁止 Settings (システム設定) Alarm (時刻指定処理) Background Service Idle, Log
  • 61. アプリプラットフォーム化 Open Web Apps アプリとしてインストール Payment いわゆる課金システム
  • 62. ホンモノの Web "アプリ" ブラウザという枠を飛び出して動作
  • 63. Android でも実装済み 開発版での画面です
  • 64. セキュリティ面での進化 Content Security Policy 特に XSS 対策に有効 Firefox 4 や Chrome 実装済み Permission API アプリが使える API の管理
  • 65. アプリの権限管理アプリの権限管理はユーザが自由に制御可能重要な API は実行時にユーザに許可を求める
  • 66. See Also: セキュリティ系機能 セキュリティ大事! 知っておくべき機能です Content Security Policy 次世代セキュリティポリシー Same Origin Policy はもう古い http://r.dynamis.jp/sec
  • 67. スマホ系の進化 SMS (ショートメッセージ) Telephony (電話) Contacts (電話帳)
  • 68. Firefox OS (Boot to Gecko) Web 技術が「ネイティブ」 HTML5, JavaScript, Web API... ホーム画面もすべて Web 技術で Gecko エンジンだけ起動 Linux Kernel 上に Gecko を Java VM などの中間レイヤなし Gecko = Firefox 描画エンジン プロジェクト名は今も Boot to Gecko
  • 69. ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も その他なんでも...
  • 70. ステータスバー (通知、 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも...すべて Web 技術で実現済み!
  • 71. Firefox OSミニなのは、要求仕様だけ iOS のようなハイエンド端末専用 OS ではない
  • 72. See Also: Firefox OS Group Google Group あります https://groups.google.com/group/ firefoxos 参加歓迎。(・・).
  • 73. 楽しみ楽しみ! 僕もスマホになって君と 一緒にお出かけしたいな!
  • 74. Summary WebRT as an OS...
  • 75. ブラウザの技術からプラットフォームへ 僕はまず立派なブラウザになり いつかは立派な OS にならなきゃ
  • 76. See Also...
  • 77. Firefox OS & Marketplace Web プラットフォーム Web API が進化を続けている Marketplace Web アプリ配信システム Firefox OS Web がネイティブな OS http://r.dynamis.jp/fxos
  • 78. CSS 最新機能紹介 CSS の新機能紹介 新機能や昨年から変わった点 http://r.dynamis.jp/css2012
  • 79. 開発者ツール紹介 一通りの機能と使い方 Firefox 標準の開発者ツール 隠し設定やビルトイン関数のリ ファレンスなども含めています Firebug とその拡張機能 アイコンや背景画像を変更する カスタマイズにも言及してます http://r.dynamis.jp/devtools