Firefox OSでSVGをつかってみた
•
4 j'aime•8,227 vues
2013/11/23 に開催された「関西Firefox OS勉強会 5th GIG」で使ったプレゼンスライドです。
Recommandé
Contenu connexe
Tendances
Tendances (18)
En vedette
En vedette (20)
Similaire à Firefox OSでSVGをつかってみた
Similaire à Firefox OSでSVGをつかってみた (20)
Plus de Kohei Kadowaki
Dernier
Dernier (11)
Firefox OSでSVGをつかってみた
- 1. Firefox OSで SVGをつかってみた 2013/11/23 関西Firefox OS勉強会 @kadoppe
- 2. 自己紹介 ● 名前 ● 門脇 恒平 @kadoppe ● 職業 ● ソフトウェアエンジニア ● Ruby / (Coffee¦Java)Script / Objective-C ● 所属 ● 株式会社シェアウィズ & HTML5-WEST.jp
- 5. SVGってなんだろう
- 6. SVGとは ● S: Scalable（拡大可能な） ● V: Vector（ベクター形式の） ● G: Graphic（画像） ● 直訳すると「拡大可能なベクター画像」
- 10. SVGの使い方 (2) CSSで使う .button {! background-image: url(“sample.svg”);! }
- 11. SVGの使い方 (3) svg要素を使う (Inline SVG) <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で画像を操作 / イベント処理 ● 動的な画像生成 ● マウスクリック、ドラッグなどのイベント
- 14. ロゴやアイコン画像
- 15. ロゴやアイコン画像
- 19. 開発環境 ● Firefox 26 (2013/11/23現在 Beta) ● Firefox OS Simulator 1.2 ● yeoman + generator-firefox-os ● アプリのひな形作成に仕様
- 31. text-decoration属性 <svg witdh=100 height=100>! <text text-decoration=underline x=0 y=20>Hello World</text>! </svg> Firefox 24以下 下線が表示されない その他ブラウザ 下線が表示される
- 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 が発生
- 36. NS_ERROR_FAILURE? 23 24 /* Returned when a 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 が出力される
- 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発生時の処理 }
- 43. デバッグしにくい(́・ω・｀)
- 45. まとめ ● Firefox OS + SVG ● ● 良くも悪くもFirefoxと同じように使える パフォーマンス ● 実機がないので検証できなかった
- 46. おしまい