firefox osでsvgをつかってみた
DESCRIPTION
2013/11/23 に開催された「関西Firefox OS勉強会 5th GIG」で使ったプレゼンスライドです。TRANSCRIPT
![Page 1: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/1.jpg)
Firefox OSで SVGをつかってみた
2013/11/23 関西Firefox OS勉強会 @kadoppe
![Page 2: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/2.jpg)
自己紹介● 名前
● 門脇 恒平 @kadoppe
● 職業 ● ソフトウェアエンジニア
● Ruby / (Coffee|Java)Script / Objective-C
● 所属 ● 株式会社シェアウィズ & HTML5-WEST.jp
![Page 3: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/3.jpg)
本日のスライド
● スライド ● http://www.slideshare.net/kadoppe
● サンプルコード ● https://github.com/kadoppe/kansai-firefox-os-5th
![Page 4: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/4.jpg)
アジェンダ
● SVGってなんだろう ● Firefox OSでSVGをつかってみた ● Firefoxで発生したトラブルの検証
![Page 5: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/5.jpg)
SVGってなんだろう
![Page 6: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/6.jpg)
SVGとは
● S: Scalable(拡大可能な) ● V: Vector(ベクター形式の) ● G: Graphic(画像) ● 直訳すると「拡大可能なベクター画像」
![Page 7: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/7.jpg)
特徴1: 拡大・縮小してもきれい
点で画像を表現 線で画像を表現
![Page 8: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/8.jpg)
特徴2: XML形式のフォーマット● XML要素で円や線などの形を表現 ● テキストエディタで編集可能
![Page 9: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/9.jpg)
SVGの使い方 (1)
<img src=“sample.svg”>
img要素を使う
![Page 10: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/10.jpg)
SVGの使い方 (2)
.button {! background-image: url(“sample.svg”);!}
CSSで使う
![Page 11: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/11.jpg)
SVGの使い方 (3)
<html>!<body>! <h1>Inline SVGサンプル</h1>! <svg width=100 height=100>! <circle r=50 cx=50 cy=50 />! </svg>!</body>!</html>
svg要素を使う (Inline SVG)
![Page 12: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/12.jpg)
Inline SVGのメリット● 画像の見た目をCSSで変更
● 円の色、線の太さを変える、など
● JavaScriptで画像を操作 / イベント処理 ● 動的な画像生成
● マウスクリック、ドラッグなどのイベント
![Page 13: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/13.jpg)
SVGの活用事例
● 活用例1 ● ロゴやアイコン画像
● 活用例2 ● インタラクティブなWebアプリケーション
![Page 14: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/14.jpg)
ロゴやアイコン画像
![Page 15: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/15.jpg)
ロゴやアイコン画像
![Page 17: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/17.jpg)
Firefox OSで SVGをつかってみた
![Page 19: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/19.jpg)
開発環境
● Firefox 26 (2013/11/23現在 Beta) ● Firefox OS Simulator 1.2 ● yeoman + generator-firefox-os
●アプリのひな形作成に仕様
![Page 20: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/20.jpg)
結論: Firefoxと同じように使える
![Page 21: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/21.jpg)
img要素を使ったサンプル
● サンプルコード/html/img_element.html
![Page 22: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/22.jpg)
Inline SVGを使ったサンプル
● サンプルコード/html/svg_element.html
![Page 24: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/24.jpg)
![Page 25: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/25.jpg)
D3.jsを使ったサンプル● サンプルコード/html/d3.html /js/d3_sample.js
● Foursquareの友達関係を可視化
● 青:男性
● 赤:女性
![Page 26: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/26.jpg)
Snap.svg● SVGをJavaScriptから簡単に扱うためライブラリ ●動的な画像の生成
●アニメーション / イベントハンドリング
● Adobeのオープンソースプロジェクトhttp://snapsvg.io/
![Page 27: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/27.jpg)
![Page 28: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/28.jpg)
Snap.svgを使ったサンプル● サンプルコード/html/snap.html /js/snap_sample.js
● ボタンタップで円が増える
● 円がランダムに動き続ける
● 何個までスムーズに動く?
![Page 29: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/29.jpg)
Firefoxで発生した トラブルの検証
![Page 30: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/30.jpg)
Firefox OSでも 同じように発生するのか調べてみた
![Page 31: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/31.jpg)
text-decoration属性
<svg witdh=100 height=100>! <text text-decoration=underline x=0 y=20>Hello World</text>!</svg>
Firefox 24以下 その他ブラウザ
下線が表示される下線が表示されない
![Page 32: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/32.jpg)
Firefox OSでは
下線が表示される
![Page 33: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/33.jpg)
getBBox()
var textElm = document.getElementById('text'); var box = textElm.getBBox(); !alert(box.height); // text要素の高さ alert(box.width); // text要素の幅
要素の大きさを取得するためのAPI
![Page 34: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/34.jpg)
Firefoxでは
// display: none などで非表示になっている要素を取得 var hiddenElm = document.getElementById('hidden'); var box = hiddenElm.getBBox(); !例外 “NS_ERROR_FAILURE” が発生
![Page 35: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/35.jpg)
NS_ERROR_FAILURE?0x80004005),
意味
「なんかエラー」
![Page 36: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/36.jpg)
NS_ERROR_FAILURE?
23 /* Returned when a function fails */ 24 ERROR(NS_ERROR_FAILURE, 0x80004005),
0x80004005),
mozilla/xpcom/base/ErrorList.h
何らかの原因で関数の実行が失敗した時のエラー
![Page 37: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/37.jpg)
ちなみにChromeだと
// display: none などで非表示になっている要素を取得 var hiddenElm = document.getElementById('hidden'); var box = hiddenElm.getBBox(); !alert(box.height); // 0 alert(box.width); // 0
ちゃんと”0”が出力される
![Page 38: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/38.jpg)
Firefox OSでは
NS_ERROR_FAILURE
![Page 39: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/39.jpg)
対処方法: try-catch// display: none などで非表示になっている要素を取得 var hiddenElm = document.getElementById('hidden'); try { var box = hiddenElm.getBBox(); ! alert(box.height); // 0 alert(box.width); // 0 } catch (e) { // NS_ERROR_FAILURE発生時の処理 }
![Page 40: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/40.jpg)
開発者ツールのインスペクタHTML要素を選択した場合
SVG内の要素を選択した場合
ルールに適用されているスタイルが表示される
ルールに適用されているスタイルが表示されない
![Page 41: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/41.jpg)
Chromeでは
ちゃんと表示される
![Page 42: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/42.jpg)
Firefox OSでは
やっぱり表示されない
![Page 43: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/43.jpg)
デバッグしにくい(́・ω・`)
![Page 44: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/44.jpg)
対処方法:“計算済み” と…
スタイルエディタで頑張る
![Page 45: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/45.jpg)
まとめ● Firefox OS + SVG
●良くも悪くもFirefoxと同じように使える
● パフォーマンス ●実機がないので検証できなかった
![Page 46: Firefox OSでSVGをつかってみた](https://reader035.vdocuments.site/reader035/viewer/2022062513/557ad37cd8b42a2c0f8b52c5/html5/thumbnails/46.jpg)
おしまい