Your SlideShare is downloading. ×
Firefox OSでSVGをつかってみた
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Firefox OSでSVGをつかってみた

5,653
views

Published on

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

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

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,653
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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