Firefox Panorama: タブを制覇せよ!

4,975 views

Published on

Firefox 4 に搭載される新しいタブ管理インターフェース、Panorama は毎日あらゆるサイトを多数のタブで管理する時代のための真新しいコンセプトです。Panorama のデザイン、開発思想から技術詳細やハックまでを Panorama 開発チームの一員が紹介します。

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,975
On SlideShare
0
From Embeds
0
Number of Embeds
275
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Firefox Panorama: タブを制覇せよ!

  1. 1. Firefox Panorama タブを制覇せよ! mozilla mitcho アーリーワイン・マイケル芳貴 Firefox Developers’ Conference 2010 東京
  2. 2. mitcho @themitcho ubiquity, Panorama, Add-on SDK
  3. 3. 今日は「タブ」のお話
  4. 4. 「タブ」という問題 ナニコレ!? • 一度に多くは使いにくい • タブバー自体に限りがある • 移動、管理するのは面倒 • 分類する事が出来ない • 特定のタブだけを見たい
  5. 5. testpilot.mozillalabs.com/testcases/tab-open-close/results.html 一度に開いているタブ数 確率
  6. 6. タブの管理は面倒
  7. 7. 目をつぶってください。 さて。
  8. 8. 空間 CC-BY: flickr.com/photos/wingsofahero/3374370563/
  9. 9. CC-BY-NC-SA: flickr.com/photos/tokyogoat/8417139/
  10. 10. Aza Raskin CC-BY-NC: flickr.com/photos/ santheo/2360961001/
  11. 11. デモ
  12. 12. デモ
  13. 13. Firefox Panorama 4 に搭載!
  14. 14. デモ
  15. 15. #mypanorama
  16. 16. Panorama のこれまで • 2010年2月 TabCandy アドオン開発開始 • jQuery を使用 • 5月 Panorama 専用の jQuery、”iQ”を作成 • 6月 アドオン開発を終了 • mozilla-central の branch で開発が続く • 8月 TabView という名で mozilla-central に載る • 8月下旬 正式に Panorama という名称がつく
  17. 17. Panorama 技術詳細 • タブバーは browser.visibleTabs に限定 • しかし、グループ情報等は Panorama 初期化ま でアクセス不可能 • Panorama は iframe#tab-view で実行 • chrome://browser/content/tabview.html • グループ情報は iframe 内の GroupItems • Panorama 初期化後、各 xul:tab エレメントに .tabItem プロパティを追加 (参考 bug 611715) • canvas.drawWindow でサムネールを表示
  18. 18. • Firefox/Panorama に特化した jQuery • Panorama で不要な機能を削除 • Firefox/Gecko 専用に: • アニメーションは全て -moz-transition • IE, WebKit用コードを削除 • JS 1.8, HTML5 API 用に書き換えた部分も • http://tinyurl.com/iq-latest
  19. 19. Stephen Horlander 氏と Sean Martell 氏によるテーマ http://mozilla.seanmartell.com/tabcandy/
  20. 20. Stephen Horlander 氏と Sean Martell 氏によるテーマ http://mozilla.seanmartell.com/tabcandy/index-win.html
  21. 21. CC-BY-NC-SA: flickr.com/photos/iampeas/4324282810/ 整理整頓
  22. 22. 楽々レイアウト • タブ、グループの表示位置をより管理しやすくする • trench (溝) で奇麗なレイアウトを (デモ) • 場所がなくなったら全てを縮小 • 参考 bug 601534, デモ • ドラッグ操作でタブを自然に並び替える • 参考 bug 587503, デモ
  23. 23. Panorama の㊙設定 • about:config で設定 • browser.panorama.experienced_first_run • false 設定で説明ビデオを再度表示 • browser.panorama.animate_zoom • false 設定でズームアニメーションを無効化 • Gomitaさんありがとう! (bug 595804) • 秘密の BarTab 機能: (Panorama じゃないけど...) • browser.sessionstore.max_concurrent_tabs = 0
  24. 24. Panorama アドオン術 • Observer でタイミングを見計らって... • tabviewframeinitialized = 初期化 • tabviewshown = 表示 • tabviewhidden = 未表示 • window.document.getElementById( tab- view ).contentWindow.GroupItems をアクセス • 必要なタブ、グループにイベントリスナーを独 自にたてる... 超面倒!
  25. 25. Panorama アドオン術 • Add-on SDK で require( panorama ); • 初期化後、(仮) TabItems, iQ オブジェクトが アクセス可能に • 将来的には GroupItems も • Add-on SDK を使用しない方も参考に • github.com/mitcho/badges
  26. 26. デモ
  27. 27. これからも進化する Panorama • Firefox Sync をグループ対応化 • グループをブックマークとして保存、使用 • 全てのウインドウのタブをまとめて表示 • 参考 bug 578512, デモ • アドオン用 API
  28. 28. Panorama に貢献しよう! • 今からでもおそくない! ^^; • irc.mozilla.org #tabcandy • Bugzilla: Component: TabCandy • wiki.mozilla.org/Firefox/Projects/TabCandy/ Work#Bugs • Firefox 4 リリースまで • 主に最適化、バグ修正 • ちょっとした CSS 関連のバグ等も複数
  29. 29. Aza Raskin @azaaza Ian Gilman @iangilman Raymond Lee @raymondlee Sean Dunn @somenotes mitcho @themitcho Kevin Hanes @mr_yuk ザ・Panorama チーム
  30. 30. mitcho アーリーワイン・マイケル芳貴 by-nc-sa mitcho.com @themitcho ありがとうございます!

×