“関西Firefox OS勉強会 5th GIG”でSVGについて発表してきました

2013年11月23日に大阪で開催された「関西Firefox OS勉強会 5th GIG」で、SVGについて発表してきました。Firefox OSに初挑戦!

関西Firefox OS勉強会 5th GIG : ATND

プレゼンスライド

サンプルコード

kadoppe/kansai-firefox-os-5th

つくったFirefox OS用アプリ

http://app.kadoppe.com

Firefox OSのブラウザでアクセスし、右上の「+」ボタンをタップすると、端末にインストールできます。

ふりかえり

11月頭にひょんなことからプレゼンすることが決まったこの勉強会。それまでFirefox OSに触ったことがなかったので、開発環境の構築からまず挑戦。

開発環境は無事整ったので、次はどんなテーマでプレゼンするかの検討。普段仕事でよく使っているSVGという画像フォーマットが、Firefox OSでもちゃんと動くのかどうか確かめたかったので、試しにサンプルアプリをつくってみて、それについて紹介することに。

結論をさっさと言ってしまうと、SVGはFirefox OSでPC版Firefoxと同じように動きます。

「同じように」というのは、良い面も悪い面も含めてです。PC版Firefoxで発生する問題はFirefox OSでも同様に発生しました(非表示の要素に対してgetBBox()を呼び出すとNS_ERROR_FAILUREが発生する問題)。ただ、同じように動いてくれるのは、開発者としては本当に助かります。コード内の分岐を増やす必要がなくなりますからね。

レンダリングのパフォーマンスについても検証したかったんですが、実機を持っていなかったので一人ではどうにもならず。今回作ったD3.jsとSnap.svgのサンプルは、Mac上のシミュレータで確認した限りは問題なく動く感じでした。若干D3.jsのサンプルにもっさりさを感じるくらい。

プレゼン後に実機を貸していただき、いざ検証スタート。D3.jsのサンプルは動きがかなりカクカクしちゃいましたが、Snap.svgのサンプルは比較的スムーズに動きました。このあたりはシミュレータの処理能力を考慮した上で実装する必要がありますね。

おわりに

SVGは単なるベクター画像フォーマットではありません。CSSやJavaScriptと組み合わせることで、開発できるWebアプリケーションの幅を大きく広げることができます。

Firefox OSでも問題なく利用できることが今回のプレゼンでわかったので、Firefox OS用アプリ開発のモチベーションもぐんぐん高まりますね。勉強会に参加された方にとって、僕のプレゼンがSVGを使ってみるきっかけになればとても嬉しいです。

あと、今回の勉強会では、さまざまなレイヤーの濃い話が聞けて本当に面白かったです。すごく勉強になったので、また参加したいと思っています。運営の皆様、ありがとうございました!

それでは!