SlideShare a Scribd company logo
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要素を使う
<img src=“sample.svg”>
SVGの使い方 (2)
CSSで使う
.button {!
background-image: url(“sample.svg”);!
}
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>
Inline SVGのメリット
●

画像の見た目をCSSで変更
● 円の色、線の太さを変える、など

●

JavaScriptで画像を操作 / イベント処理
● 動的な画像生成
● マウスクリック、ドラッグなどのイベント
SVGの活用事例
●

活用例1
● ロゴやアイコン画像

●

活用例2
● インタラクティブなWebアプリケーション
ロゴやアイコン画像
ロゴやアイコン画像
Webアプリケーション

無料学習サイト ShareWis http://share-wis.com
Firefox OSで
SVGをつかってみた
サンプルアプリを公開

Firefox OSのブラウザで 

http://app.kadoppe.com にアクセス
開発環境
●

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
●

Web上でデータビジュアライゼーション
を作成するためのライブラリ

http://d3js.org/

●

SVGをデータの表現に利用
Firefox OSでSVGをつかってみた
D3.jsを使ったサンプル
●

サンプルコード

/html/d3.html

/js/d3_sample.js

●

Foursquareの友達関係を

可視化
●

青:男性

●

赤:女性
Snap.svg
●

SVGをJavaScriptから簡単に扱うため
ライブラリ
●
●

●

動的な画像の生成
アニメーション / イベントハンドリング

Adobeのオープンソースプロジェクト

http://snapsvg.io/
Firefox OSでSVGをつかってみた
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()
要素の大きさを取得するためのAPI
var textElm = document.getElementById('text');
var box = textElm.getBBox();
!

alert(box.height); // text要素の高さ
alert(box.width); // text要素の幅
Firefoxでは
// display: none などで非表示になっている要素を取得
var hiddenElm = document.getElementById('hidden');
var box = hiddenElm.getBBox();
!

例外 NS_ERROR_FAILURE が発生
NS_ERROR_FAILURE?
意味

「なんかエラー」
NS_ERROR_FAILURE?

23
24

/* Returned when a function fails */
ERROR(NS_ERROR_FAILURE,

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と同じように使える

パフォーマンス
●

実機がないので検証できなかった
おしまい

More Related Content

What's hot

なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
 
Snap.svg.jsチュートリアル
Snap.svg.jsチュートリアルSnap.svg.jsチュートリアル
Snap.svg.jsチュートリアル
誠人 堀口
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
 
モダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないためにモダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないために
YukiOniki
 
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
 
WebGLことはじめ
WebGLことはじめWebGLことはじめ
WebGLことはじめ
Kazuya Hiruma
 
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing  at HTML5 Conference 2016E2E CSS Testing  at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
 
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲームHTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
Takumi Ohashi
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
Taku AMANO
 
WebComponentsとPolymer
WebComponentsとPolymerWebComponentsとPolymer
WebComponentsとPolymer
Takahiro Maki
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
 
React+fluxを導入した話
React+fluxを導入した話React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
 
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらFlashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Hiroaki Okubo
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
 
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
 

What's hot (18)

なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
 
Snap.svg.jsチュートリアル
Snap.svg.jsチュートリアルSnap.svg.jsチュートリアル
Snap.svg.jsチュートリアル
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
 
モダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないためにモダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないために
 
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
 
WebGLことはじめ
WebGLことはじめWebGLことはじめ
WebGLことはじめ
 
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing  at HTML5 Conference 2016E2E CSS Testing  at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
 
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲームHTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 
WebComponentsとPolymer
WebComponentsとPolymerWebComponentsとPolymer
WebComponentsとPolymer
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScript
 
React+fluxを導入した話
React+fluxを導入した話React+fluxを導入した話
React+fluxを導入した話
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらFlashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
 
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
 

Viewers also liked

Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリPebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
Kohei Kadowaki
 
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピングCapybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
Koji Nakamura
 
Webでもできるデータビジュアライゼーション
WebでもできるデータビジュアライゼーションWebでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Kohei Kadowaki
 
WebSocketことはじめ
WebSocketことはじめWebSocketことはじめ
WebSocketことはじめ
Kohei Kadowaki
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
Kohei Kadowaki
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
 
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
 
Clase+de+tarnsporte
Clase+de+tarnsporteClase+de+tarnsporte
Clase+de+tarnsporte
Fernando Blanco
 
Privacy-Aware Data Management in Information Networks - SIGMOD 2011 Tutorial
Privacy-Aware Data Management in Information Networks - SIGMOD 2011 TutorialPrivacy-Aware Data Management in Information Networks - SIGMOD 2011 Tutorial
Privacy-Aware Data Management in Information Networks - SIGMOD 2011 Tutorial
Kun Liu
 
[KGC 2013] Online Game Security in China
[KGC 2013] Online Game Security in China[KGC 2013] Online Game Security in China
[KGC 2013] Online Game Security in China
Seungmin Shin
 
Эффективные кампании в интернете для разных задач МСБ.
Эффективные кампании в интернете для разных задач МСБ.Эффективные кампании в интернете для разных задач МСБ.
Эффективные кампании в интернете для разных задач МСБ.
Serhii Stasko
 
Presentation 1112 for blog 2
Presentation 1112 for blog 2Presentation 1112 for blog 2
Presentation 1112 for blog 2
katie_higson
 
Turkey is a New Kind Of Silicon Valley
Turkey is a New Kind Of Silicon ValleyTurkey is a New Kind Of Silicon Valley
Turkey is a New Kind Of Silicon Valley
Zafer Elcik
 
ESauers par spk 59paragrafu
ESauers par spk 59paragrafuESauers par spk 59paragrafu
ESauers par spk 59paragrafu
Edijs Sauers
 
Open il vol4
Open il vol4Open il vol4
Open il vol4
榎本 優樹
 
Google analytics konferenz gtm hands on alkan_cem_webalytics
Google analytics konferenz gtm hands on alkan_cem_webalyticsGoogle analytics konferenz gtm hands on alkan_cem_webalytics
Google analytics konferenz gtm hands on alkan_cem_webalytics
e-dialog GmbH
 
CloudSurance - We backup web application data
CloudSurance - We backup web application dataCloudSurance - We backup web application data
CloudSurance - We backup web application data
Sam Bowen
 
World Computer Congress Keynote
World Computer Congress KeynoteWorld Computer Congress Keynote
World Computer Congress Keynote
fabricapo
 

Viewers also liked (20)

Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリPebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
 
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピングCapybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
 
Webでもできるデータビジュアライゼーション
WebでもできるデータビジュアライゼーションWebでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
 
WebSocketことはじめ
WebSocketことはじめWebSocketことはじめ
WebSocketことはじめ
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
 
AndroidでWebSocket
AndroidでWebSocketAndroidでWebSocket
AndroidでWebSocket
 
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
 
Clase+de+tarnsporte
Clase+de+tarnsporteClase+de+tarnsporte
Clase+de+tarnsporte
 
Privacy-Aware Data Management in Information Networks - SIGMOD 2011 Tutorial
Privacy-Aware Data Management in Information Networks - SIGMOD 2011 TutorialPrivacy-Aware Data Management in Information Networks - SIGMOD 2011 Tutorial
Privacy-Aware Data Management in Information Networks - SIGMOD 2011 Tutorial
 
[KGC 2013] Online Game Security in China
[KGC 2013] Online Game Security in China[KGC 2013] Online Game Security in China
[KGC 2013] Online Game Security in China
 
Эффективные кампании в интернете для разных задач МСБ.
Эффективные кампании в интернете для разных задач МСБ.Эффективные кампании в интернете для разных задач МСБ.
Эффективные кампании в интернете для разных задач МСБ.
 
Presentation 1112 for blog 2
Presentation 1112 for blog 2Presentation 1112 for blog 2
Presentation 1112 for blog 2
 
Turkey is a New Kind Of Silicon Valley
Turkey is a New Kind Of Silicon ValleyTurkey is a New Kind Of Silicon Valley
Turkey is a New Kind Of Silicon Valley
 
Hopes, plans and pleasures of children
Hopes, plans and pleasures of childrenHopes, plans and pleasures of children
Hopes, plans and pleasures of children
 
ESauers par spk 59paragrafu
ESauers par spk 59paragrafuESauers par spk 59paragrafu
ESauers par spk 59paragrafu
 
Open il vol4
Open il vol4Open il vol4
Open il vol4
 
Google analytics konferenz gtm hands on alkan_cem_webalytics
Google analytics konferenz gtm hands on alkan_cem_webalyticsGoogle analytics konferenz gtm hands on alkan_cem_webalytics
Google analytics konferenz gtm hands on alkan_cem_webalytics
 
CloudSurance - We backup web application data
CloudSurance - We backup web application dataCloudSurance - We backup web application data
CloudSurance - We backup web application data
 
World Computer Congress Keynote
World Computer Congress KeynoteWorld Computer Congress Keynote
World Computer Congress Keynote
 

Similar to Firefox OSでSVGをつかってみた

Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
 
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashインタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
 
SVG事始め
SVG事始めSVG事始め
SVG事始め
Nemoto Yusuke
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Yasunobu Ikeda
 
開発を彩る技術たち
開発を彩る技術たち開発を彩る技術たち
開発を彩る技術たち
Oda Shinsuke
 
Java scriptの進化
Java scriptの進化Java scriptの進化
Java scriptの進化
maruyama097
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
 
javascript を Xcode でテスト
javascript を Xcode でテストjavascript を Xcode でテスト
javascript を Xcode でテスト
Yoichiro Sakurai
 
おふとんから眺めるSVG
おふとんから眺めるSVGおふとんから眺めるSVG
おふとんから眺めるSVG
cocu_628496
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
 
Vue.js with Go
Vue.js with GoVue.js with Go
Vue.js with Go
Kazuhiro Kubota
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
 
スマホにおけるWebGL入門
スマホにおけるWebGL入門スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
 
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
VOYAGE GROUP
 
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
AdvancedTechNight
 
SwaggerとAPIのデザイン
SwaggerとAPIのデザインSwaggerとAPIのデザイン
SwaggerとAPIのデザイン
Kazuhiro Hara
 
Cocoa関西勉強会#49
Cocoa関西勉強会#49Cocoa関西勉強会#49
Cocoa関西勉強会#49
yashigani
 
Scala.jsはじめました!
Scala.jsはじめました!Scala.jsはじめました!
Scala.jsはじめました!
K Kinzal
 
Play jjug2012spring
Play jjug2012springPlay jjug2012spring
Play jjug2012spring
Takafumi Ikeda
 
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
Kazuhiro Kosaka
 

Similar to Firefox OSでSVGをつかってみた (20)

Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
 
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashインタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
 
SVG事始め
SVG事始めSVG事始め
SVG事始め
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
 
開発を彩る技術たち
開発を彩る技術たち開発を彩る技術たち
開発を彩る技術たち
 
Java scriptの進化
Java scriptの進化Java scriptの進化
Java scriptの進化
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
 
javascript を Xcode でテスト
javascript を Xcode でテストjavascript を Xcode でテスト
javascript を Xcode でテスト
 
おふとんから眺めるSVG
おふとんから眺めるSVGおふとんから眺めるSVG
おふとんから眺めるSVG
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
 
Vue.js with Go
Vue.js with GoVue.js with Go
Vue.js with Go
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 
スマホにおけるWebGL入門
スマホにおけるWebGL入門スマホにおけるWebGL入門
スマホにおけるWebGL入門
 
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
 
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
 
SwaggerとAPIのデザイン
SwaggerとAPIのデザインSwaggerとAPIのデザイン
SwaggerとAPIのデザイン
 
Cocoa関西勉強会#49
Cocoa関西勉強会#49Cocoa関西勉強会#49
Cocoa関西勉強会#49
 
Scala.jsはじめました!
Scala.jsはじめました!Scala.jsはじめました!
Scala.jsはじめました!
 
Play jjug2012spring
Play jjug2012springPlay jjug2012spring
Play jjug2012spring
 
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
 

More from Kohei Kadowaki

プログラマーのお仕事
プログラマーのお仕事プログラマーのお仕事
プログラマーのお仕事
Kohei Kadowaki
 
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
 
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONGUnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
Kohei Kadowaki
 
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
Kohei Kadowaki
 
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみたゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Kohei Kadowaki
 
SocketStream入門
SocketStream入門SocketStream入門
SocketStream入門
Kohei Kadowaki
 

More from Kohei Kadowaki (6)

プログラマーのお仕事
プログラマーのお仕事プログラマーのお仕事
プログラマーのお仕事
 
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
 
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONGUnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
 
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
 
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみたゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
 
SocketStream入門
SocketStream入門SocketStream入門
SocketStream入門
 

Recently uploaded

論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
Toru Tamaki
 
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ..."ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
たけおか しょうぞう
 
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit IntroductionMatsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo Lab
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
Takayuki Nakayama
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
Sony - Neural Network Libraries
 
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
chisatotakane
 
Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)
Natsutani Minoru
 
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログLoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
CRI Japan, Inc.
 
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
Sony - Neural Network Libraries
 
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit IntroductionMatsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo Lab
 
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
Toru Tamaki
 
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo Lab
 

Recently uploaded (12)

論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
 
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ..."ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
 
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit IntroductionMatsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit Introduction
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
 
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
 
Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)
 
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログLoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
 
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
 
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit IntroductionMatsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit Introduction
 
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
 
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
 

Firefox OSでSVGをつかってみた