Firefox OSでSVGをつかってみた

'JSFGPY04Ͱ 47(Λ͔ͭͬͯΈͨ ؔ੢'JSFGPY04ษڧձ!LBEPQQF

ࣗݾ঺հ • ໊લ • ໳࿬߃ฏ!LBEPQQF • ৬ۀ • ιϑτ΢ΣΞΤϯδχΞ •
3VCZ $P⒎FFc+BWB 4DSJQU0CKFDUJWF$ • ॴଐ • גࣜձࣾγΣΞ΢Οζ)5.-8&45KQ

ຊ೔ͷεϥΠυ • εϥΠυ • IUUQXXXTMJEFTIBSFOFULBEPQQF • αϯϓϧίʔυ • IUUQTHJUIVCDPNLBEPQQFLBOTBJ pSFGPYPTUI

ΞδΣϯμ • 47(ͬͯͳΜͩΖ͏ • 'JSFGPY04Ͱ47(Λ͔ͭͬͯΈͨ • 'JSFGPYͰൃੜͨ͠τϥϒϧͷݕূ

47(ͬͯͳΜͩΖ͏

47(ͱ͸ • 44DBMBCMFʢ֦େՄೳͳʣ • 77FDUPSʢϕΫλʔܗࣜͷʣ • ((SBQIJDʢը૾ʣ • ௚༁͢Δͱʮ֦େՄೳͳϕΫλʔը૾ʯ

ಛ௃֦େɾॖখͯ͠΋͖Ε͍ ఺Ͱը૾Λදݱ ઢͰը૾Λදݱ

ಛ௃9.-ܗࣜͷϑΥʔϚοτ • 9.-ཁૉͰԁ΍ઢͳͲͷܗΛදݱ • ςΩετΤσΟλͰฤूՄೳ

47(ͷ࢖͍ํ <img src=“sample.svg”> imgཁૉΛ࢖͏

47(ͷ࢖͍ํ .button {! background-image: url(“sample.svg”);! } $44Ͱ࢖͏

47(ͷ࢖͍ํ <html>! <body>! <h1>Inline SVGαϯϓϧ</h1>! <svg width=100 height=100>! <circle
r=50 cx=50 cy=50 />! </svg>! </body>! </html> svgཁૉΛ࢖͏ *OMJOF47(

*OMJOF47(ͷϝϦοτ • ը૾ͷݟͨ໨Λ$44Ͱมߋ • ԁͷ৭ɺઢͷଠ͞Λม͑ΔɺͳͲ • +BWB4DSJQUͰը૾Λૢ࡞Πϕϯτॲཧ • ಈతͳը૾ੜ੒ •
Ϛ΢εΫϦοΫɺυϥοάͳͲͷΠϕϯτ

47(ͷ׆༻ࣄྫ • ׆༻ྫ̍ • ϩΰ΍ΞΠίϯը૾ • ׆༻ྫ̎ • ΠϯλϥΫςΟϒͳ8FCΞϓϦέʔγϣϯ

ϩΰ΍ΞΠίϯը૾

8FCΞϓϦέʔγϣϯ ແྉֶशαΠτ4IBSF8JTIUUQTIBSFXJTDPN

'JSFGPY04Ͱ 47(Λ͔ͭͬͯΈͨ

αϯϓϧΞϓϦΛެ։ 'JSFGPY04ͷϒϥ΢βͰ  IUUQBQQLBEPQQFDPNʹΞΫηε

։ൃ؀ڥ • 'JSFGPY ݱࡏ#FUB • 'JSFGPY044JNVMBUPS • ZFPNBO HFOFSBUPSpSFGPYPT
• ΞϓϦͷͻͳܗ࡞੒ʹ࢓༷

݁࿦ɿ 'JSFGPYͱಉ͡Α͏ʹ࢖͑Δ

JNHཁૉΛ࢖ͬͨαϯϓϧ • αϯϓϧίʔυ  IUNMJNH@FMFNFOUIUNM

*OMJOF47(Λ࢖ͬͨαϯϓϧ • αϯϓϧίʔυ  IUNMTWH@FMFNFOUIUNM

%KT • 8FC্ͰσʔλϏδϡΞϥΠθʔγϣϯ Λ࡞੒͢ΔͨΊͷϥΠϒϥϦ  IUUQEKTPSH • 47(Λσʔλͷදݱʹར༻

%KTΛ࢖ͬͨαϯϓϧ • αϯϓϧίʔυ  IUNMEIUNM  KTE@TBNQMFKT • 'PVSTRVBSFͷ༑ୡؔ܎Λ  ՄࢹԽ • ੨ɿஉੑ
• ੺ɿঁੑ

4OBQTWH • 47(Λ+BWB4DSJQU͔Β؆୯ʹѻ͏ͨΊ ϥΠϒϥϦ • ಈతͳը૾ͷੜ੒ • ΞχϝʔγϣϯΠϕϯτϋϯυϦϯά • "EPCFͷΦʔϓϯιʔεϓϩδΣΫτ 
IUUQTOBQTWHJP

4OBQTWHΛ࢖ͬͨαϯϓϧ • αϯϓϧίʔυ  IUNMTOBQIUNM  KTTOBQ@TBNQMFKT • ϘλϯλοϓͰԁ͕૿͑Δ • ԁ͕ϥϯμϜʹಈ͖ଓ͚Δ •
Կݸ·ͰεϜʔζʹಈ͘ʁ

'JSFGPYͰൃੜͨ͠ τϥϒϧͷݕূ

'JSFGPY04Ͱ΋ ಉ͡Α͏ʹൃੜ͢Δͷ͔ௐ΂ͯΈͨ

UFYUEFDPSBUJPOଐੑ <svg witdh=100 height=100>! <text text-decoration=underline x=0 y=20>Hello World</text>! </svg>
'JSFGPYҎԼ ͦͷଞϒϥ΢β Լઢ͕දࣔ͞ΕΔ Լઢ͕දࣔ͞Εͳ͍

'JSFGPY04Ͱ͸ Լઢ͕දࣔ͞ΕΔ

HFU##PY var textElm = document.getElementById('text'); var box = textElm.getBBox(); !
alert(box.height); // textཁૉͷߴ͞ alert(box.width); // textཁૉͷ෯ ཁૉͷେ͖͞Λऔಘ͢ΔͨΊͷ"1*

'JSFGPYͰ͸ // display: none ͳͲͰඇදࣔʹͳ͍ͬͯΔཁૉΛऔಘ var hiddenElm = document.getElementById('hidden'); var
box = hiddenElm.getBBox(); ! ྫ֎l/4@&3303@'"*-63&z͕ൃੜ

/4@&3303@'"*-63& ҙຯ ʮͳΜ͔Τϥʔʯ

/4@&3303@'"*-63& 23 /* Returned when a function fails */ 24
ERROR(NS_ERROR_FAILURE, 0x80004005), NP[JMMBYQDPNCBTF&SSPS-JTUI ԿΒ͔ͷݪҼͰؔ਺ͷ࣮ߦ͕ࣦഊͨ࣌͠ͷΤϥʔ

ͪͳΈʹ$ISPNFͩͱ // display: none ͳͲͰඇදࣔʹͳ͍ͬͯΔཁૉΛऔಘ var hiddenElm = document.getElementById('hidden'); var
box = hiddenElm.getBBox(); ! alert(box.height); // 0 alert(box.width); // 0 ͪΌΜͱzz͕ग़ྗ͞ΕΔ

'JSFGPY04Ͱ͸ /4@&3303@'"*-63&

ରॲํ๏USZDBUDI // 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ൃੜ࣌ͷॲཧ }

։ൃऀπʔϧͷΠϯεϖΫλ )5.-ཁૉΛબ୒ͨ͠৔߹ 47(಺ͷཁૉΛબ୒ͨ͠৔߹ ϧʔϧʹద༻͞Ε͍ͯΔελΠϧ͕දࣔ͞ΕΔ ϧʔϧʹద༻͞Ε͍ͯΔελΠϧ͕දࣔ͞Εͳ͍

$ISPNFͰ͸ ͪΌΜͱදࣔ͞ΕΔ

'JSFGPY04Ͱ͸ ΍ͬͺΓදࣔ͞Εͳ͍

σόοά͠ʹ͍͘ ɾТɾʆ

ରॲํ๏ lܭࢉࡁΈzͱʜ ελΠϧΤσΟλͰؤுΔ

·ͱΊ • 'JSFGPY04 47( • ྑ͘΋ѱ͘΋'JSFGPYͱಉ͡Α͏ʹ࢖͑Δ • ύϑΥʔϚϯε • ࣮ػ͕ͳ͍ͷͰݕূͰ͖ͳ͔ͬͨ

͓͠·͍

Firefox OSでSVGをつかってみた

Firefox OSでSVGをつかってみた

More Decks by kadoppe

Other Decks in Technology

Featured

Transcript