Submit Search
Upload
ShareWisをFirefoxで動かすためのSVG的とりくみ
•
3 likes
•
1,857 views
Kohei Kadowaki
Follow
Firefox Developers Conference 2012 in Osakaのライトニングトークで使った発表資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 20
Download now
Download to read offline
Recommended
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
Kohei Kadowaki
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
Kohei Kadowaki
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Kohei Kadowaki
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
Kohei Kadowaki
使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと
Kasumi Morita
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
Naoki Matsuda
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Recommended
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
Kohei Kadowaki
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
Kohei Kadowaki
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Kohei Kadowaki
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
Kohei Kadowaki
使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと
Kasumi Morita
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
Naoki Matsuda
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
I want Make full svg website
I want Make full svg website
Hidetsugu Takahashi
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
Takumi Ohashi
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
WebGLことはじめ
WebGLことはじめ
Kazuya Hiruma
WebComponentsとPolymer
WebComponentsとPolymer
Takahiro Maki
モダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないために
YukiOniki
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
Snap.svg.jsチュートリアル
Snap.svg.jsチュートリアル
誠人 堀口
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
HTML5-20100626
HTML5-20100626
Taku AMANO
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
楽しいShaderToy
楽しいShaderToy
Masaki Sasaki
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Yasunobu Ikeda
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
More Related Content
What's hot
I want Make full svg website
I want Make full svg website
Hidetsugu Takahashi
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
Takumi Ohashi
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
WebGLことはじめ
WebGLことはじめ
Kazuya Hiruma
WebComponentsとPolymer
WebComponentsとPolymer
Takahiro Maki
モダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないために
YukiOniki
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
Snap.svg.jsチュートリアル
Snap.svg.jsチュートリアル
誠人 堀口
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
HTML5-20100626
HTML5-20100626
Taku AMANO
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
楽しいShaderToy
楽しいShaderToy
Masaki Sasaki
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
What's hot
(19)
I want Make full svg website
I want Make full svg website
スマホにおけるWebGL入門
スマホにおけるWebGL入門
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
WebGLことはじめ
WebGLことはじめ
WebComponentsとPolymer
WebComponentsとPolymer
モダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないために
React+fluxを導入した話
React+fluxを導入した話
Snap.svg.jsチュートリアル
Snap.svg.jsチュートリアル
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Flux react現状確認会
Flux react現状確認会
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
HTML5-20100626
HTML5-20100626
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
楽しいShaderToy
楽しいShaderToy
React を導入したフロントエンド開発
React を導入したフロントエンド開発
Similar to ShareWisをFirefoxで動かすためのSVG的とりくみ
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Yasunobu Ikeda
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
Naoki Matsuda
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
Takuya Ueda
WebGIS初級編 - OpenLayersで簡単作成
WebGIS初級編 - OpenLayersで簡単作成
Hideo Harada
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
Toshihito Gamo
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
Canvas勉強会
Canvas勉強会
Tsutomu Kawamura
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
フロント作業の効率化
フロント作業の効率化
Yuto Yoshinari
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング
Kiyokazu Kaba
Similar to ShareWisをFirefoxで動かすためのSVG的とりくみ
(20)
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Web制作勉強会 #2
Web制作勉強会 #2
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
WebGIS初級編 - OpenLayersで簡単作成
WebGIS初級編 - OpenLayersで簡単作成
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Canvas勉強会
Canvas勉強会
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
フロント作業の効率化
フロント作業の効率化
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング
More from Kohei Kadowaki
Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
Kohei Kadowaki
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Kohei Kadowaki
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
Kohei Kadowaki
プログラマーのお仕事
プログラマーのお仕事
Kohei Kadowaki
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
Kohei Kadowaki
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
Kohei Kadowaki
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Kohei Kadowaki
SocketStream入門
SocketStream入門
Kohei Kadowaki
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
AndroidでWebSocket
AndroidでWebSocket
Kohei Kadowaki
WebSocketことはじめ
WebSocketことはじめ
Kohei Kadowaki
More from Kohei Kadowaki
(13)
Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
プログラマーのお仕事
プログラマーのお仕事
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
SocketStream入門
SocketStream入門
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
AndroidでWebSocket
AndroidでWebSocket
WebSocketことはじめ
WebSocketことはじめ
Recently uploaded
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Recently uploaded
(11)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
ShareWisをFirefoxで動かすためのSVG的とりくみ
1.
ShareWisをFirefoxで 動かすためのSVG的とりくみ 2012/6/30 Firefox Developers
Conference 2012 in OSAKA ShareWis Inc. / HTML5-West.jp Kohei Kadowaki 1
2.
自己紹介 • 名前:門脇
恒平 @kadoppe • 職業:エンジニア • ShareWis Inc. CTO / HTML5-West.jpコアメンバー 2
3.
ShareWisって? • 社会人向けのオンライン学習サイト • 知識の地図で学習コンテンツのつながり/進捗状況を 可視化 •
SVGをつかって地図のインタフェースを実装 3
4.
動きはこんな感じです。
4
5.
ShareWisの当面の課題
5
6.
6
7.
7
8.
なぜFirefoxに対応してないのか • 経緯 •
素直に作ったらChromeで想定通りに動作 • Firefoxでは想定とは少し違った動作 • 開発リソース不足 → 対応できないままズルズルと ブラウザ間のSVGの挙動に違いに対応する必要あり 8
9.
違いその1: スクロールのスムーズさ
9
10.
なぜかスムーズにうごかない(もっさり)
10
11.
もっさりする原因 <svg> <circle
cx=”10” cy=”20”> <!-- 円 --> <circle cx=”15” cy=”25”> <!-- 円 --> <line x1=”10” y1=”20” x2=”15” y2=”25”> <!-- 直線 --> (略) </svg> • ドラッグイベントが発生するたびに全要素の表示位置を 計算/更新 • 全要素に対して計算/更新処理を行うので時間がかかる →ドラッグイベントの処理が遅れる → もっさり 11
12.
解決方法 <svg> <g
transform=”translate(40, 30)”> <!-- グループ --> <circle cx=”10” cy=”20”> <line x1=”10” y1=”20” x2=”15” y2=”25”> </g> </svg> • 全要素をg(group)要素で囲む • g要素のtransform属性の値を計算/更新してスクロール 計算/更新が一度で済むのでもっさり感が解消するはず 12
13.
比較的スムーズにスクロールするように
13
14.
違いその2: text要素のunderline
14
15.
マウスオーバーでテキストに下線を表示 <svg> <text
text-decoration=”underline”>英語</text> </svg> 下線表示 下線非表示 15
16.
下線が表示されない原因 • 2005年11月のBugzilla@Mozillaへの投稿 •
317196 ‒ Support the 'text-decoration' property in SVG (underline, etc.) https://bugzilla.mozilla.org/show_bug.cgi?id=317196 SVG Textのレンダリング方式の都合上 まだ下線は表示できない?詳しい方教えてください 16
17.
解決方法 <svg> <g
id=”text”> <text>英語</text><line> </g> </svg> <script> textElm = getElementById(‘text’); height = textElm.getBBox().height; width = textElm.getBBox().width; (略:line要素の表示位置調整処理) </script> line要素で下線を擬似的に表現 • line要素の表示位置 →getBBox()メソッドで取得した要素の幅/高さを用いて計算 17
18.
他にも • 同じSVGなのに違った表示になる場合がいくつかある • 自分のSVGの書き方が間違ってる?
or ブラウザの問 題? or SVGの仕様? Chrome Firefox 18
19.
まとめ •
学んだこと • もっさりするのをブラウザのせいにせず、 自分の実装を見なおそう • 実装できない問題に直面しても、 何か別の泥臭い方法で代用できないかトライしよう • 自分のコード or ブラウザ どちらの問題なのか しっかり切り分けて考えよう 19
20.
おしまい
To Be Continued... 20
Download now