Download to read offline
Uploaded byKohei Kadowaki
Firefox OSでSVGをつかってみた
2013/11/23 に開催された「関西Firefox OS勉強会 5th GIG」で使ったプレゼンスライドです。
More Related Content
![[KGC 2013] Online Game Security in China](https://cdn.slidesharecdn.com/ss_thumbnails/kgc2013-20130926-23-f-s-130926030828-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Firefox OSでSVGをつかってみた
- 1. Firefox OSで SVGをつかってみた 2013/11/23 関西FirefoxOS勉強会 @kadoppe
- 2. 自己紹介 ● 名前 ● 門脇 恒平@kadoppe ● 職業 ● ソフトウェアエンジニア ● Ruby / (Coffee¦Java)Script / Objective-C ● 所属 ● 株式会社シェアウィズ & HTML5-WEST.jp
- 3.
- 4.
- 5.
- 6. SVGとは ● S: Scalable（拡大可能な） ● V: Vector（ベクター形式の） ● G:Graphic（画像） ● 直訳すると「拡大可能なベクター画像」
- 7.
- 8.
- 9.
- 10. SVGの使い方 (2) CSSで使う .button {! background-image:url(“sample.svg”);! }
- 11. SVGの使い方 (3) svg要素を使う (InlineSVG) <html>! <body>! <h1>Inline SVGサンプル</h1>! <svg width=100 height=100>! <circle r=50 cx=50 cy=50 />! </svg>! </body>! </html>
- 12. Inline SVGのメリット ● 画像の見た目をCSSで変更 ● 円の色、線の太さを変える、など ● JavaScriptで画像を操作/ イベント処理 ● 動的な画像生成 ● マウスクリック、ドラッグなどのイベント
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. 開発環境 ● Firefox 26 (2013/11/23現在Beta) ● Firefox OS Simulator 1.2 ● yeoman + generator-firefox-os ● アプリのひな形作成に仕様
- 20.
- 21.
- 22.
- 23.
- 25.
- 26.
- 28.
- 29.
- 30.
- 31. text-decoration属性 <svg witdh=100 height=100>! <texttext-decoration=underline x=0 y=20>Hello World</text>! </svg> Firefox 24以下 下線が表示されない その他ブラウザ 下線が表示される
- 32.
- 33. getBBox() 要素の大きさを取得するためのAPI var textElm =document.getElementById('text'); var box = textElm.getBBox(); ! alert(box.height); // text要素の高さ alert(box.width); // text要素の幅
- 34. Firefoxでは // display: noneなどで非表示になっている要素を取得 var hiddenElm = document.getElementById('hidden'); var box = hiddenElm.getBBox(); ! 例外 NS_ERROR_FAILURE が発生
- 35.
- 36. NS_ERROR_FAILURE? 23 24 /* Returned whena function fails */ ERROR(NS_ERROR_FAILURE, 0x80004005), 何らかの原因で関数の実行が失敗した時のエラー mozilla/xpcom/base/ErrorList.h
- 37. ちなみにChromeだと // display: noneなどで非表示になっている要素を取得 var hiddenElm = document.getElementById('hidden'); var box = hiddenElm.getBBox(); ! alert(box.height); // 0 alert(box.width); // 0 ちゃんと 0 が出力される
- 38.
- 39. 対処方法: 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発生時の処理 }
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. まとめ ● Firefox OS +SVG ● ● 良くも悪くもFirefoxと同じように使える パフォーマンス ● 実機がないので検証できなかった
- 46.