Firefox OSでSVGをつかってみた

7,234 views

Published on

2013/11/23 に開催された「関西Firefox OS勉強会 5th GIG」で使ったプレゼンスライドです。

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,234
On SlideShare
0
From Embeds
0
Number of Embeds
3,932
Actions
Shares
0
Downloads
3
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Firefox OSでSVGをつかってみた

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

×