SlideShare ist ein Scribd-Unternehmen logo
1 von 14
FirefoxとMozillaでのSVGの取り組み

              加藤 誠
  Technical Advisor, Mozilla Japan
About Mozilla

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



                   2
Firefox

• Mozilla Application Suite (Webブラウザ、
  メールクライアント、HTMLエディタを統合し
  たもの)からブラウザ部分を切り出し、軽量化
  したもの
• 柔軟な拡張機能を持つ
 • Firefox自体が一種の拡張機能を利用して作られて
   いる
• レンダリングエンジンは、独自開発のGecko
• 2004年11月にバージョン1.0をリリース
• 最新版は、2010年1月にリリースされた3.6
Firefox

• 現在開発を主に行っているのは、Mozilla
  Corporation (本拠地: 米国マウンテンビュー)
• いくつかの地域(米国、カナダ、オーストラリ
  アなど)に開発オフィスが存在
• 開発者は全世界に散らばっている。当然日本に
  も
Firefox

• 正式にリリースされているプラットフォーム
 • Windows
 • Mac OS X
 • Linux (GTK+)
• 上記以外にも、SolarisやBSD等にも対応
• 英語版、日本語版以外の様々な言語版
 • 70言語版以上を提供
 • 外部貢献者のおかげで様々な言語版が提供できて
   いる



                     5
モバイル版Firefox
• Nokia N900版がリリース済み
 • Maemo 5用
• 現在、以下のプラットフォーム版を開発中
 • Windows Mobile Professional 6.x (アルファ版リ
   リース済み)
 • Android
• デスクトップ版とまったく同一のレンダリング
  エンジンを採用
 • Firefox Mobile 1.0は、Firefox 3.6とまったく同
   一のエンジンを採用
 • モバイルに制限を加えない
Gecko

• FirefoxなどMozillaの製品で利用されているレ
  ンダリングエンジン
 • SVG / MathMLサポートも含まれる
• 最新版は、Firefox 3.6で利用されているバー
  ジョン1.9.2
• さまざまなプラットフォームに移植されている
 • Windows / Mac OS X / Linux / Solarisなど
• グラフィックライブラリには、cairo
  (http://www.cairographics.org/)を使用
XUL (XML User Interface Language)

• XMLを用いたユーザーインターフェイス記述言
  語
• Firefox自体がXULで書かれている
 • Firefox = Gecko + XUL
• Firefoxで使われる拡張機能は、XULで記述




                     8
MozillaにおけるSVG
• Mozillaでの最初のSVGのコードは、2001年か
  ら
 • 実際には、1999年から検討開始
 • SVGを利用するには、ソースコードをコンパイル
   する必要があった
• Firefoxでは、1.5 (2005年11月リリース)から
  デフォルトで利用可能
 • リリースしている全プラットフォーム(Windows /
   Mac OS X / Linux)で利用可能
 • 現在のバージョンでは、プラットフォーム独立な
   グラフィックライブラリを利用してるため、どの
   プラットフォームでも同じ描画
MozillaにおけるSVG

• SVGについては、外部貢献者の協力が非常に大
  きい
 • オープンソースモデル
 • IBM、ボランティア貢献者など
• 現在でもSVGの実装については、Mozilla
  Foundation / Mozilla Corporation以外がメイ
  ン
テストツール

• 描画結果に関しては、reftestと呼ばれるテス
  トツールを常に利用。DOM操作については、
  MochiTestを利用
• ソースコードが変更された時に自動的にテスト
  が実行される
• Regressionが発見されれば、すぐ対処。対処
  できなければ、ソースコードを元に戻す
 • 速度の低下に関しても同様
• 新たな要素の実装を行った場合には、テスト項
  目も作成する必要がある


             11
SVGに関する主な問題
• SVGフォントモジュールをサポートしていない
 •   Bug 119490 – Implement SVG fonts
 •   そのためAcid 3 Testが100点ではない
• <svg:image>要素でSVGが利用不可能
 •   Bug 272288 - Allow SVG source for <svg:image>
• 報告されている問題は、Bugzillaを参照のこと
 •   https://bugzilla.mozilla.org/buglist.cgi?query_form
     at=advanced;bug_status=UNCONFIRMED;bug_sta
     tus=NEW;bug_status=ASSIGNED;bug_status=RE
     OPENED;component=SVG;product=Core;classificat
     ion=Components
その他ドキュメント

• Mozilla SVG Project
  •   https://wiki.mozilla.org/SVG:Home_Page
• Mozilla Developer Center / SVG
  •   https://developer.mozilla.org/en/SVG
• SVGの実装状況
  •   https://developer.mozilla.org/en/SVG_in_Firefox
• メーリングリスト
  •   news://news.mozilla.org/mozilla.dev.tech.svg
  •   http://groups.google.com/group/mozilla.dev.tech.
      svg/topics


                          13
Any Question?




      14

Weitere ähnliche Inhalte

Was ist angesagt?

OSC名古屋2012 concrete5名古屋ユーザーグループ
OSC名古屋2012 concrete5名古屋ユーザーグループOSC名古屋2012 concrete5名古屋ユーザーグループ
OSC名古屋2012 concrete5名古屋ユーザーグループ
hirokey76724
 

Was ist angesagt? (14)

WordPress on Movable Type
WordPress on Movable TypeWordPress on Movable Type
WordPress on Movable Type
 
20090828 Webconlocal
20090828 Webconlocal20090828 Webconlocal
20090828 Webconlocal
 
フロントエンド開発環境
フロントエンド開発環境フロントエンド開発環境
フロントエンド開発環境
 
Xamarin 開発に必要な環境
Xamarin 開発に必要な環境Xamarin 開発に必要な環境
Xamarin 開発に必要な環境
 
前略,Xamarin.Mac使いより
前略,Xamarin.Mac使いより前略,Xamarin.Mac使いより
前略,Xamarin.Mac使いより
 
OSC名古屋2012 concrete5名古屋ユーザーグループ
OSC名古屋2012 concrete5名古屋ユーザーグループOSC名古屋2012 concrete5名古屋ユーザーグループ
OSC名古屋2012 concrete5名古屋ユーザーグループ
 
Microsoftテクノロジーの今をご紹介
Microsoftテクノロジーの今をご紹介Microsoftテクノロジーの今をご紹介
Microsoftテクノロジーの今をご紹介
 
Modern frontend overview_r3
Modern frontend overview_r3Modern frontend overview_r3
Modern frontend overview_r3
 
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
 
Silverlight+COMにチャレンジ
Silverlight+COMにチャレンジSilverlight+COMにチャレンジ
Silverlight+COMにチャレンジ
 
Tdd cpp utest環境構築_mac版
Tdd cpp utest環境構築_mac版Tdd cpp utest環境構築_mac版
Tdd cpp utest環境構築_mac版
 
Concrete5×さくら
Concrete5×さくらConcrete5×さくら
Concrete5×さくら
 
Openness, Innovation and Opptunity
Openness, Innovation and OpptunityOpenness, Innovation and Opptunity
Openness, Innovation and Opptunity
 
Java de TFS
Java de TFSJava de TFS
Java de TFS
 

Ähnlich wie FirefoxとMozillaでのSVGの取り組み

Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internals
Makoto Kato
 
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
神戸ITフェスティバル2013「Firefox開発ツールコレクション」神戸ITフェスティバル2013「Firefox開発ツールコレクション」
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
Noritada Shimizu
 
Firefoxの開発プロセス
Firefoxの開発プロセスFirefoxの開発プロセス
Firefoxの開発プロセス
Makoto Kato
 
Silverlightをあれこれ紹介
Silverlightをあれこれ紹介Silverlightをあれこれ紹介
Silverlightをあれこれ紹介
mizusawa
 

Ähnlich wie FirefoxとMozillaでのSVGの取り組み (20)

Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internals
 
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
神戸ITフェスティバル2013「Firefox開発ツールコレクション」神戸ITフェスティバル2013「Firefox開発ツールコレクション」
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
 
Firefoxの開発プロセス
Firefoxの開発プロセスFirefoxの開発プロセス
Firefoxの開発プロセス
 
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and laterWeb Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
 
Firefox と Mozilla のテクノロジー
Firefox と Mozilla のテクノロジーFirefox と Mozilla のテクノロジー
Firefox と Mozilla のテクノロジー
 
Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編
Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編
Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編
 
Swiftアプリ制作入門 かんたんシューティングゲーム
Swiftアプリ制作入門 かんたんシューティングゲームSwiftアプリ制作入門 かんたんシューティングゲーム
Swiftアプリ制作入門 かんたんシューティングゲーム
 
Firefox OSのアーキテクチャと構成技術
Firefox OSのアーキテクチャと構成技術Firefox OSのアーキテクチャと構成技術
Firefox OSのアーキテクチャと構成技術
 
ブラウザの歴史
ブラウザの歴史ブラウザの歴史
ブラウザの歴史
 
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
 
Mozillaのビルドインフラ
MozillaのビルドインフラMozillaのビルドインフラ
Mozillaのビルドインフラ
 
20060419
2006041920060419
20060419
 
XPagesDay 2013 Closing Session
XPagesDay 2013 Closing SessionXPagesDay 2013 Closing Session
XPagesDay 2013 Closing Session
 
JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話
JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話
JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話
 
Eclipse xtext 紹介
Eclipse xtext 紹介Eclipse xtext 紹介
Eclipse xtext 紹介
 
.NET vNext
.NET vNext.NET vNext
.NET vNext
 
GitHubのリポジトリ(32個)を 覗いてみよう。 ただし、READMEだけね
GitHubのリポジトリ(32個)を 覗いてみよう。 ただし、READMEだけねGitHubのリポジトリ(32個)を 覗いてみよう。 ただし、READMEだけね
GitHubのリポジトリ(32個)を 覗いてみよう。 ただし、READMEだけね
 
Firefox で快適 WordPress 生活
Firefox で快適 WordPress 生活Firefox で快適 WordPress 生活
Firefox で快適 WordPress 生活
 
Introduction to VSCode
Introduction to VSCodeIntroduction to VSCode
Introduction to VSCode
 
Silverlightをあれこれ紹介
Silverlightをあれこれ紹介Silverlightをあれこれ紹介
Silverlightをあれこれ紹介
 

Mehr von Makoto Kato (14)

Active scripting
Active scriptingActive scripting
Active scripting
 
e10sとアプリ間通信
e10sとアプリ間通信e10sとアプリ間通信
e10sとアプリ間通信
 
Emoji
EmojiEmoji
Emoji
 
Moz2D
Moz2DMoz2D
Moz2D
 
Mobile Web
Mobile WebMobile Web
Mobile Web
 
Mobile addon
Mobile addonMobile addon
Mobile addon
 
keep it real
keep it realkeep it real
keep it real
 
Think.next
Think.nextThink.next
Think.next
 
Firefox for mobile
Firefox for mobileFirefox for mobile
Firefox for mobile
 
"Open"
"Open""Open"
"Open"
 
Raindrop
RaindropRaindrop
Raindrop
 
CSS3の最新事情
CSS3の最新事情CSS3の最新事情
CSS3の最新事情
 
Thunderbird 3のご紹介と企業に求められるカスタマイズ
Thunderbird 3のご紹介と企業に求められるカスタマイズThunderbird 3のご紹介と企業に求められるカスタマイズ
Thunderbird 3のご紹介と企業に求められるカスタマイズ
 
js-ctypes - ネイティブコードを呼び出す新しいカタチ
js-ctypes - ネイティブコードを呼び出す新しいカタチjs-ctypes - ネイティブコードを呼び出す新しいカタチ
js-ctypes - ネイティブコードを呼び出す新しいカタチ
 

Kürzlich hochgeladen

Kürzlich hochgeladen (12)

論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 

FirefoxとMozillaでのSVGの取り組み

  • 1. FirefoxとMozillaでのSVGの取り組み 加藤 誠 Technical Advisor, Mozilla Japan
  • 2. About Mozilla • 1998年、Netscape Communicator 5のコード のオープンソース化に伴い、Mozilla.orgが設立 • 2003年、Mozilla Foundationが設立 • 2004年、Mozilla Europe / Mozilla Japan設立 • 2005年、Mozilla China設立 • 2005年、FirefoxとThunderbirdの開発等を行う 組織、Mozilla Corporationを設立 • 2008年、Thunderbirdの開発等を行う組織、 Mozilla Messagingが設立 2
  • 3. Firefox • Mozilla Application Suite (Webブラウザ、 メールクライアント、HTMLエディタを統合し たもの)からブラウザ部分を切り出し、軽量化 したもの • 柔軟な拡張機能を持つ • Firefox自体が一種の拡張機能を利用して作られて いる • レンダリングエンジンは、独自開発のGecko • 2004年11月にバージョン1.0をリリース • 最新版は、2010年1月にリリースされた3.6
  • 4. Firefox • 現在開発を主に行っているのは、Mozilla Corporation (本拠地: 米国マウンテンビュー) • いくつかの地域(米国、カナダ、オーストラリ アなど)に開発オフィスが存在 • 開発者は全世界に散らばっている。当然日本に も
  • 5. Firefox • 正式にリリースされているプラットフォーム • Windows • Mac OS X • Linux (GTK+) • 上記以外にも、SolarisやBSD等にも対応 • 英語版、日本語版以外の様々な言語版 • 70言語版以上を提供 • 外部貢献者のおかげで様々な言語版が提供できて いる 5
  • 6. モバイル版Firefox • Nokia N900版がリリース済み • Maemo 5用 • 現在、以下のプラットフォーム版を開発中 • Windows Mobile Professional 6.x (アルファ版リ リース済み) • Android • デスクトップ版とまったく同一のレンダリング エンジンを採用 • Firefox Mobile 1.0は、Firefox 3.6とまったく同 一のエンジンを採用 • モバイルに制限を加えない
  • 7. Gecko • FirefoxなどMozillaの製品で利用されているレ ンダリングエンジン • SVG / MathMLサポートも含まれる • 最新版は、Firefox 3.6で利用されているバー ジョン1.9.2 • さまざまなプラットフォームに移植されている • Windows / Mac OS X / Linux / Solarisなど • グラフィックライブラリには、cairo (http://www.cairographics.org/)を使用
  • 8. XUL (XML User Interface Language) • XMLを用いたユーザーインターフェイス記述言 語 • Firefox自体がXULで書かれている • Firefox = Gecko + XUL • Firefoxで使われる拡張機能は、XULで記述 8
  • 9. MozillaにおけるSVG • Mozillaでの最初のSVGのコードは、2001年か ら • 実際には、1999年から検討開始 • SVGを利用するには、ソースコードをコンパイル する必要があった • Firefoxでは、1.5 (2005年11月リリース)から デフォルトで利用可能 • リリースしている全プラットフォーム(Windows / Mac OS X / Linux)で利用可能 • 現在のバージョンでは、プラットフォーム独立な グラフィックライブラリを利用してるため、どの プラットフォームでも同じ描画
  • 10. MozillaにおけるSVG • SVGについては、外部貢献者の協力が非常に大 きい • オープンソースモデル • IBM、ボランティア貢献者など • 現在でもSVGの実装については、Mozilla Foundation / Mozilla Corporation以外がメイ ン
  • 11. テストツール • 描画結果に関しては、reftestと呼ばれるテス トツールを常に利用。DOM操作については、 MochiTestを利用 • ソースコードが変更された時に自動的にテスト が実行される • Regressionが発見されれば、すぐ対処。対処 できなければ、ソースコードを元に戻す • 速度の低下に関しても同様 • 新たな要素の実装を行った場合には、テスト項 目も作成する必要がある 11
  • 12. SVGに関する主な問題 • SVGフォントモジュールをサポートしていない • Bug 119490 – Implement SVG fonts • そのためAcid 3 Testが100点ではない • <svg:image>要素でSVGが利用不可能 • Bug 272288 - Allow SVG source for <svg:image> • 報告されている問題は、Bugzillaを参照のこと • https://bugzilla.mozilla.org/buglist.cgi?query_form at=advanced;bug_status=UNCONFIRMED;bug_sta tus=NEW;bug_status=ASSIGNED;bug_status=RE OPENED;component=SVG;product=Core;classificat ion=Components
  • 13. その他ドキュメント • Mozilla SVG Project • https://wiki.mozilla.org/SVG:Home_Page • Mozilla Developer Center / SVG • https://developer.mozilla.org/en/SVG • SVGの実装状況 • https://developer.mozilla.org/en/SVG_in_Firefox • メーリングリスト • news://news.mozilla.org/mozilla.dev.tech.svg • http://groups.google.com/group/mozilla.dev.tech. svg/topics 13