@ browser workshop 2011/8/20

1. Openness, Innovation
and Opptunity

2. About Mozilla
1998年 Netscape Communicator 5のコードのオープンソース化に
伴い、Mozilla.orgが設立
2003年 Mozilla Foundationが設立
2004年 Mozilla Europe / Mozilla Japan設立
2005年 Mozilla China (Mozilla Online)設立
2005年 FirefoxとThunderbirdの開発等を行う組織、Mozilla
Corporationを設立
2008年 Thunderbirdの開発等を行う組織、Mozilla Messagingが設
立
2011年 Mozilla MessagingをMozilla Labsへ編入

3. Engineering @ mozilla
• Platform
• Firefox UX
• WebDev
• MDN – developer.mozilla.org
• SUMO – support.mozilla.org
• Labs
• Thunderbird
• Many projects…

4. Mozilla Labs
• WebブラウザのUXやWeb Technologyの実験の
場所
• すべてが実装ありきの話ではない
• FirefoxやThunderbirdとは関係ないものも含
まれる
• 将来のFirefoxで取り入れられることも
• Firefox Sync etc

6. Many Projects…
• デザインのアイデア
• UI/UXの研究
• 他のWebサービスとの統合
• Web API

7. DESIGN CHALLENGE

8. Design Challenge
• ある特定のテーマを決めて、そのデザイン/モッ
クのアイデアを募る

9. Design Challenge
• Contact in browser
• http://design-
challenge.mozillalabs.com/contacts/
• Home Tab
• http://design-
challenge.mozillalabs.com/winter09/

10. CONCEPT SERIES

11. Concept Series
• ブラウザやデバイスなどの様々なデザインを一緒
に考える場所
• 実装ではなくて、あくまでも”アイデア”

12. Ex. Seabird

13. Ex. seabird

14. Ex. Seabird

15. Ex. Ubiquitous Firefox

16. Resource - Concept
Series
• Seabird
• http://mozillalabs.com/conceptseries/2010
/09/23/seabird/
• Ubiquitous Firefox
• https://mozillalabs.com/conceptseries/201
1/05/24/community-concepts-ubiquitous-
firefox-part-1-how-do-you-design-a-
debris-less-browser/

17. TEST PILOT

18. Test Pilot
• ユーザのブラウザの利用データを取得して解析す
るプロジェクト
• 収集用のアドオンをインストール
• 当然その結果は公開
• データが偏る傾向になりやすいため、偏りを取る
ような手法を利用している

19. Test Pilot - New Tab
Study

20. Test Pilot - Visualizing
Firefox 4 Beta Usage

21. Test Pilot – User
Interface
• Test case
• https://testpilot.mozillalabs.com/testcases/
betaui
• Result
• http://blog.mozilla.com/metrics/2010/09/1
4/heatmap/

22. More resource - Test
Pilot
• Rolling your own tool: test pilot
• http://www.slideshare.net/boltpeters/jono
-xia-rolling-your-own-tool-test-pilot
• Test case of Test Pilot
• https://testpilot.mozillalabs.com/testcases/

23. PROSPECTOR

24. Prospector
• ユーザが目的のサイトにたどり着くためのUXの
模索
• サーチ用ボックス or アドレスバーとの統合で
はない、別の考え方

25. Prospector
• Awesomebar HD
• http://mozillalabs.com/prospector/2011/0
5/09/quickly-switch-searches-with-
awesomebar-hd/
• Many add-ons for this concept
• http://mozillalabs.com/prospector/experim
ents

26. FIREFOX SHARE / F1

27. Firefox Share (F1)
• ソーシャルネットワークとの
統合
• http://f1.mozillamessaging
.com/

28. RAINBOW

29. Rainbow
• ブラウザ上で動画、音声のレコーディングを行う
APIを定義する
• 現在はWebRTCと統合を検討
• Web-based Karaoke
• http://mozillalabs.com/blog/2011/04/a-
web-based-karaoke-prototype-as-
technology-feedback-loop/

30. Q&A