Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Firefox Mobile

1,578 views

Published on

at KOF 2010 Gadget 1

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Firefox Mobile

  1. 1. Firefox Mobile Makoto Kato Mozilla Japan
  2. 2. モバイル版のコンセプト • デスクトップバージョンと同じレンダリングエン ジン • デスクトップOS (Windows, MacOS X and Linux) で動 作するエミュレータも提供 • タッチスクリーンデバ゗スのためのUI • デバ゗ス / OSとの統合 • 同期サービス (Firefox Sync) • ゕドオンサポート • Electrolysis (e10s)
  3. 3. 今までのモバイルブラウザ • デスクトップ版よりも遅れたサポート • HTML5 / CSS3 • 無理矢理見やすくするために、ページ解釈の 変更を行う • デザ゗ナーの意図した構成? • OSにマッチしないUI • OSに内蔵されたもの物は除く
  4. 4. 同じレンダリングエンジン • 現在のモバ゗ルデバ゗スのCPUやメモリ量は、 一昔前のPCと変わらない • HTML5などで定義されるものは、モバ゗ルデ バ゗スにとっても有益なものがほとんど • モバ゗ル版のブラウザだけ機能縮小版である 必要性は? • Web Developer / Designerにとってどうあるべき か?
  5. 5. 同じレンダリングエンジン • Firefox 4であれば、デスクトップ版もモバ゗ ル版も利用可能なHTML/CSS/APIは同じ • モバ゗ル版のための習得コストなほぼなし • 画面サ゗ズ、入力デバ゗スのみを意識 • プラットフォームの違いによる差異 • ただし、モバ゗ル用の最適化を含む
  6. 6. 現在のモバ゗ルブラウザのスピード例 23176.4 16280.9 12201.5 0 5000 10000 15000 20000 25000 Verizon Droid (OMAP3 550MHz) + Android 2.1 Browser PC (Atom 2GHz) + IE8 Verizon Droid (OMAP3 550MHz) + Firefox Mobile 4 (ms) SunSpider 0.9.1
  7. 7. 同じレンダリングエンジン
  8. 8. モバイルデバイスUI • 画面の小ささ • デスクトップと同じメタフゔが通じない • 出来る限りブラウザ画面を広くする必要 • 全画面 • タッチスクリーン
  9. 9. Base UI Idea
  10. 10. Base UI
  11. 11. Less Input • タッチスクリーンでの文字入力のストレス • 操作や文字の入力を最小限にする必要がある • 文字を入力するのはすべてのユーザーにとって は非現実的 • 出来る限り少なくするには?
  12. 12. Less Input • 文字の入力を最小限にす るため、オートコンプ リートを最下部に表示
  13. 13. Auto Completion design idea
  14. 14. Awesome Screen idea
  15. 15. Awesome Screen
  16. 16. Awesome Screen
  17. 17. デバイス/OSとの統合 • OSが提供するサービスとの統合 • ゕプリケーション化 • 位置情報 • 加速度センサ • 通知サービス • ネットワーク (オンラ゗ン・オフラ゗ンの検出)
  18. 18. Sharing (Android)
  19. 19. アプリケーション化 (idea) • Webサ゗ト = ゕプリケー ション • Chrome Web Store • Open Web Store • Webサ゗トをゕプリケー ションとする取り組み • Google Chrome • Internet Explorer 9
  20. 20. 位置情報 • GPSのサポート • WiFi経由での位置情報取得 • Firefox for Android版は未定 • ユーザー情報にゕクセスするため、ユーザー に確認を求める • デスクトップ版ブラウザでも同様
  21. 21. 位置情報例 (Android)
  22. 22. 通知サービス • デスクトップOSとは異なり、モバ゗ルOSでは、 ユーザーへの通知がAPI化されている • Android • iPhone / iOS • ダウンロード完了通知などをその通知サービ ス経由で行う • 無駄なUXが発生しない • Web Notification API
  23. 23. 通知サービス例 (Android)
  24. 24. 通知サービス例 (Android)
  25. 25. 通知サービス (Android 以外)
  26. 26. OSとの統一感 • テーマ • ウゖジェット(OSが提供するテキストボックスなどの ユーザー゗ンターフェ゗ス)の色、形式はOS(iOS / Androidなど)によって異なる • OSのウゖジェット等とマッチするUIを提供
  27. 27. テーマ例 (Android)
  28. 28. Firefox Sync • Firefoxのブックマークや 履歴、設定などのデータ 同期サービス • Mozilla側のサーバでデー タを保存 (サーバーはロー カルにも構築可能) • Firefox 3.6以降で利用可 能 (ゕドオンで) • 4.0以降は標準搭載
  29. 29. アドオン • デスクトップ版のFirefox と同様にゕドオンがサ ポートされる • デスクトップ版と同様の ことが可能 • モバ゗ル用に若干手直し が必要
  30. 30. サポートOS • Android 2.0以降 • Maemo 5 • MeeGo (ハンドセット版の標準ブラウザ)
  31. 31. Electrolysis (e10s) • プラグ゗ンプロセスの分離 (Firefox 3.6) • プラグ゗ンのバグによるクラッシュの影響を少なく する • コンテンツプロセスとブラウザプロセスの分 離 (Firefox Mobile 4) • レスポンシビリテゖ向上のため • 通信には、Chromiumのipcラ゗ブラリを利用
  32. 32. e10s on Android • org.mozilla.fennecというDalvikVM上で動く ブラウザプロセス • plugin-containerというコンテンツプロセス app_44 28117 18481 278064 60072 ffffffff afe0c9fc S org.mozilla.fennec app_44 28182 28117 113440 65136 ffffffff 8122f908 D /data/data/org.mozilla.fennec/plugin-container
  33. 33. クラッシュ例
  34. 34. DEVELOPMENT FOR ANDROID VERSION
  35. 35. Android Application • AndroidはIntentなどのUIサービスにゕクセス するために、Java(DalvikVM)を使わないとい けない(いけなかった) • ゕプリケーションはJavaで書く必要がある • Firefox/Geckoの土台はC++で書かれている • だから移植無理 • 2009年の6月にNDKリリース • C++で書かれたコードを動かす方法が提供される • 引き続きJavaは必要だけど
  36. 36. NDK • 開発初期は、NDKへパッチを当てていた • というか、使うヘッダによってはビルド出来ない物 だった • だんだんパッチだけでは対処不可 • 現在はGoogleのNDKを実は利用していない
  37. 37. NDK • 現在はCrystaXのカスタム版を使用 • http://www.crystax.net/android/ndk.php • Mozillaのコードベースはgcc4が基本 (WindowsとSolaris以外) • 標準C++ラ゗ブラリがNDKというか、Bonic libcだと中途半端すぎ • ポーテゖングには実際向かない • libdlまでカスタム版を用意する羽目に
  38. 38. Binaries • サ゗ズを節約するために、Thumb2を利用 • だからエミュレータ上では動作しない • Android OS上のラ゗ブラリをほとんど利用し ていないので、パッケージサ゗ズは非常に大 きい • nspr / nss / zlib / libbz2 / sqlite3 / freetype / libpng / libjpeg / cairo / etc
  39. 39. For DalvikVM • Javaを使う部分はAndroidのDalvikVM/Java API (JNI)を使うためのラッパー • Java使ってるのは、これだけ -rw-r--r-- 1 makoto users 3907 Oct 8 13:04 AlertNotification.java -rw-r--r-- 1 makoto users 18600 Oct 8 13:04 GeckoApp.java -rw-r--r-- 1 makoto users 20783 Oct 8 13:04 GeckoAppShell.java -rw-r--r-- 1 makoto users 7065 Aug 5 10:57 GeckoEvent.java -rw-r--r-- 1 makoto users 17950 Aug 25 13:58 GeckoInputConnection.java -rw-r--r-- 1 makoto users 10167 Oct 14 15:11 GeckoSurfaceView.java
  40. 40. Graphics Rendering • レンダリングは、OpenGL ES 2 or 直接ビデ オメモリへの描画 • Skia (http://code.google.com/p/skia/) も使う方 法もあったけど、結果として今の方法を採用 • OpenGL ESのフル機能は利用していない • Cairo (GeckoやAdobe AIRで採用しているグ ラフゖックラ゗ブラリ)でレンダリング結果の 画像を生成して描画
  41. 41. Demo • HTML5 Rocks • http://www.html5rocks.com/ • hacks.mozilla.org • http://hacks.mozilla.org/ • HTML5 Demos and Examples • http://html5demos.com/
  42. 42. References • Firefox Mobile • http://www.mozilla.com/en-US/mobile/ • Firefox Home • http://www.mozilla.com/en-US/mobile/home/ • Download Firefox Mobile / Firefox Home • http://www.mozilla.com/en- US/mobile/download/
  43. 43. How to get more information for Firefox • Firefox Developer Conference 2010 • 日時: 11月20日(土) 10:00~ • 場所: ニューピゕホール (http://www.newpier- hall.jp/) • http://mozilla.jp/devcon/
  44. 44. Any Question?

×