at KOF 2010 Gadget 1

1. Firefox Mobile
Makoto Kato
Mozilla Japan

4. モバイル版のコンセプト
• デスクトップバージョンと同じレンダリングエン
ジン
• デスクトップOS (Windows, MacOS X and Linux) で動
作するエミュレータも提供
• タッチスクリーンデバ゗スのためのUI
• デバ゗ス / OSとの統合
• 同期サービス (Firefox Sync)
• ゕドオンサポート
• Electrolysis (e10s)

5. 今までのモバイルブラウザ
• デスクトップ版よりも遅れたサポート
• HTML5 / CSS3
• 無理矢理見やすくするために、ページ解釈の
変更を行う
• デザ゗ナーの意図した構成?
• OSにマッチしないUI
• OSに内蔵されたもの物は除く

6. 同じレンダリングエンジン
• 現在のモバ゗ルデバ゗スのCPUやメモリ量は、
一昔前のPCと変わらない
• HTML5などで定義されるものは、モバ゗ルデ
バ゗スにとっても有益なものがほとんど
• モバ゗ル版のブラウザだけ機能縮小版である
必要性は?
• Web Developer / Designerにとってどうあるべき
か?

7. 同じレンダリングエンジン
• Firefox 4であれば、デスクトップ版もモバ゗
ル版も利用可能なHTML/CSS/APIは同じ
• モバ゗ル版のための習得コストなほぼなし
• 画面サ゗ズ、入力デバ゗スのみを意識
• プラットフォームの違いによる差異
• ただし、モバ゗ル用の最適化を含む

8. 現在のモバ゗ルブラウザのスピード例
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

9. 同じレンダリングエンジン

10. モバイルデバイスUI
• 画面の小ささ
• デスクトップと同じメタフゔが通じない
• 出来る限りブラウザ画面を広くする必要
• 全画面
• タッチスクリーン

11. Base UI Idea

12. Base UI

13. Less Input
• タッチスクリーンでの文字入力のストレス
• 操作や文字の入力を最小限にする必要がある
• 文字を入力するのはすべてのユーザーにとって
は非現実的
• 出来る限り少なくするには?

14. Less Input
• 文字の入力を最小限にす
るため、オートコンプ
リートを最下部に表示

15. Auto Completion design idea

17. Awesome Screen idea

18. Awesome Screen

19. Awesome Screen

20. デバイス/OSとの統合
• OSが提供するサービスとの統合
• ゕプリケーション化
• 位置情報
• 加速度センサ
• 通知サービス
• ネットワーク (オンラ゗ン・オフラ゗ンの検出)

21. Sharing (Android)

22. アプリケーション化 (idea)
• Webサ゗ト = ゕプリケー
ション
• Chrome Web Store
• Open Web Store
• Webサ゗トをゕプリケー
ションとする取り組み
• Google Chrome
• Internet Explorer 9

23. 位置情報
• GPSのサポート
• WiFi経由での位置情報取得
• Firefox for Android版は未定
• ユーザー情報にゕクセスするため、ユーザー
に確認を求める
• デスクトップ版ブラウザでも同様

24. 位置情報例 (Android)

25. 通知サービス
• デスクトップOSとは異なり、モバ゗ルOSでは、
ユーザーへの通知がAPI化されている
• Android
• iPhone / iOS
• ダウンロード完了通知などをその通知サービ
ス経由で行う
• 無駄なUXが発生しない
• Web Notification API

26. 通知サービス例 (Android)

27. 通知サービス例 (Android)

28. 通知サービス (Android 以外)

29. OSとの統一感
• テーマ
• ウゖジェット(OSが提供するテキストボックスなどの
ユーザー゗ンターフェ゗ス)の色、形式はOS(iOS /
Androidなど)によって異なる
• OSのウゖジェット等とマッチするUIを提供

30. テーマ例 (Android)

32. Firefox Sync
• Firefoxのブックマークや
履歴、設定などのデータ
同期サービス
• Mozilla側のサーバでデー
タを保存 (サーバーはロー
カルにも構築可能)
• Firefox 3.6以降で利用可
能 (ゕドオンで)
• 4.0以降は標準搭載

33. アドオン
• デスクトップ版のFirefox
と同様にゕドオンがサ
ポートされる
• デスクトップ版と同様の
ことが可能
• モバ゗ル用に若干手直し
が必要

34. サポートOS
• Android 2.0以降
• Maemo 5
• MeeGo (ハンドセット版の標準ブラウザ)

35. Electrolysis (e10s)
• プラグ゗ンプロセスの分離 (Firefox 3.6)
• プラグ゗ンのバグによるクラッシュの影響を少なく
する
• コンテンツプロセスとブラウザプロセスの分
離 (Firefox Mobile 4)
• レスポンシビリテゖ向上のため
• 通信には、Chromiumのipcラ゗ブラリを利用

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

37. クラッシュ例

38. DEVELOPMENT FOR ANDROID VERSION

39. Android Application
• AndroidはIntentなどのUIサービスにゕクセス
するために、Java(DalvikVM)を使わないとい
けない(いけなかった)
• ゕプリケーションはJavaで書く必要がある
• Firefox/Geckoの土台はC++で書かれている
• だから移植無理
• 2009年の6月にNDKリリース
• C++で書かれたコードを動かす方法が提供される
• 引き続きJavaは必要だけど

40. NDK
• 開発初期は、NDKへパッチを当てていた
• というか、使うヘッダによってはビルド出来ない物
だった
• だんだんパッチだけでは対処不可
• 現在はGoogleのNDKを実は利用していない

41. NDK
• 現在はCrystaXのカスタム版を使用
• http://www.crystax.net/android/ndk.php
• Mozillaのコードベースはgcc4が基本
(WindowsとSolaris以外)
• 標準C++ラ゗ブラリがNDKというか、Bonic
libcだと中途半端すぎ
• ポーテゖングには実際向かない
• libdlまでカスタム版を用意する羽目に

42. Binaries
• サ゗ズを節約するために、Thumb2を利用
• だからエミュレータ上では動作しない
• Android OS上のラ゗ブラリをほとんど利用し
ていないので、パッケージサ゗ズは非常に大
きい
• nspr / nss / zlib / libbz2 / sqlite3 / freetype /
libpng / libjpeg / cairo / etc

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

44. Graphics Rendering
• レンダリングは、OpenGL ES 2 or 直接ビデ
オメモリへの描画
• Skia (http://code.google.com/p/skia/) も使う方
法もあったけど、結果として今の方法を採用
• OpenGL ESのフル機能は利用していない
• Cairo (GeckoやAdobe AIRで採用しているグ
ラフゖックラ゗ブラリ)でレンダリング結果の
画像を生成して描画

45. Demo
• HTML5 Rocks
• http://www.html5rocks.com/
• hacks.mozilla.org
• http://hacks.mozilla.org/
• HTML5 Demos and Examples
• http://html5demos.com/

46. 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/

47. How to get more information for Firefox
• Firefox Developer Conference 2010
• 日時: 11月20日(土) 10:00～
• 場所: ニューピゕホール (http://www.newpier-
hall.jp/)
• http://mozilla.jp/devcon/

48. Any Question?