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