Firefox OSでSVGをつかってみた

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

Transcript

1. 'JSFGPY
   04Ͱ
   47(Λ͔ͭͬͯΈͨ 
   ؔ੢'JSFGPY
   04ษڧձ
   !LBEPQQF
2. ࣗݾ঺հ • ໊લ
   • ໳࿬
   ߃ฏ
   !LBEPQQF
   • ৬ۀ
   • ιϑτ΢ΣΞΤϯδχΞ
   • 3VCZ
   
   $P⒎FFc+BWB 4DSJQU
   
   0CKFDUJWF$
   • ॴଐ
   • גࣜձࣾγΣΞ΢Οζ
   
   )5.-8&45KQ
3. ຊ೔ͷεϥΠυ • εϥΠυ
   • IUUQXXXTMJEFTIBSFOFULBEPQQF
   • αϯϓϧίʔυ
   • IUUQTHJUIVCDPNLBEPQQFLBOTBJ pSFGPYPTUI
4. ΞδΣϯμ • 47(ͬͯͳΜͩΖ͏
   • 'JSFGPY
   04Ͱ47(Λ͔ͭͬͯΈͨ
   • 'JSFGPYͰൃੜͨ͠τϥϒϧͷݕূ
5. 47(ͬͯͳΜͩΖ͏
6. 47(ͱ͸ • 4
   4DBMBCMFʢ֦େՄೳͳʣ
   • 7
   7FDUPSʢϕΫλʔܗࣜͷʣ
   • (
   (SBQIJDʢը૾ʣ
   • ௚༁͢Δͱʮ֦େՄೳͳϕΫλʔը૾ʯ
7. ಛ௃
   ֦େɾॖখͯ͠΋͖Ε͍ ఺Ͱը૾Λදݱ ઢͰը૾Λදݱ
8. ಛ௃
   9.-ܗࣜͷϑΥʔϚοτ • 9.-ཁૉͰԁ΍ઢͳͲͷܗΛදݱ
   • ςΩετΤσΟλͰฤूՄೳ
9. 47(ͷ࢖͍ํ
    <img src=“sample.svg”> imgཁૉΛ࢖͏
10. 47(ͷ࢖͍ํ
     .button {! background-image: url(“sample.svg”);! } $44Ͱ࢖͏
11. 47(ͷ࢖͍ํ
     <html>! <body>! <h1>Inline SVGαϯϓϧ</h1>! <svg width=100 height=100>! <circle r=50 cx=50 cy=50 />! </svg>! </body>! </html> svgཁૉΛ࢖͏
    *OMJOF
    47(
12. *OMJOF
    47(ͷϝϦοτ • ը૾ͷݟͨ໨Λ$44Ͱมߋ
    • ԁͷ৭ɺઢͷଠ͞Λม͑ΔɺͳͲ
    • +BWB4DSJQUͰը૾Λૢ࡞
    
    Πϕϯτॲཧ
    • ಈతͳը૾ੜ੒
    • Ϛ΢εΫϦοΫɺυϥοάͳͲͷΠϕϯτ
13. 47(ͷ׆༻ࣄྫ • ׆༻ྫ̍
    • ϩΰ΍ΞΠίϯը૾
    • ׆༻ྫ̎
    • ΠϯλϥΫςΟϒͳ8FCΞϓϦέʔγϣϯ
14. ϩΰ΍ΞΠίϯը૾
15. ϩΰ΍ΞΠίϯը૾
16. 8FCΞϓϦέʔγϣϯ ແྉֶशαΠτ
    4IBSF8JT
    IUUQTIBSFXJTDPN
17. 'JSFGPY
    04Ͱ
    47(Λ͔ͭͬͯΈͨ
18. αϯϓϧΞϓϦΛެ։ 'JSFGPY
    04ͷϒϥ΢βͰ
    
 IUUQBQQLBEPQQFDPN
    ʹΞΫηε
19. ։ൃ؀ڥ • 'JSFGPY
    
    ݱࡏ
    #FUB
    • 'JSFGPY
    04
    4JNVMBUPS
    
    • ZFPNBO
    
    HFOFSBUPSpSFGPYPT
    • ΞϓϦͷͻͳܗ࡞੒ʹ࢓༷
20. ݁࿦ɿ
    'JSFGPYͱಉ͡Α͏ʹ࢖͑Δ
21. JNHཁૉΛ࢖ͬͨαϯϓϧ • αϯϓϧίʔυ
 IUNMJNH@FMFNFOUIUNM
22. *OMJOF
    47(Λ࢖ͬͨαϯϓϧ • αϯϓϧίʔυ
 IUNMTWH@FMFNFOUIUNM
23. %KT • 8FC্ͰσʔλϏδϡΞϥΠθʔγϣϯ Λ࡞੒͢ΔͨΊͷϥΠϒϥϦ
 IUUQEKTPSH
    • 47(Λσʔλͷදݱʹར༻
25. %KTΛ࢖ͬͨαϯϓϧ • αϯϓϧίʔυ
 IUNMEIUNM
 KTE@TBNQMFKT
    • 'PVSTRVBSFͷ༑ୡؔ܎Λ
 ՄࢹԽ
    • ੨ɿஉੑ
    • ੺ɿঁੑ
26. 4OBQTWH • 47(Λ+BWB4DSJQU͔Β؆୯ʹѻ͏ͨΊ ϥΠϒϥϦ
    • ಈతͳը૾ͷੜ੒
    • Ξχϝʔγϣϯ
    
    ΠϕϯτϋϯυϦϯά
    • "EPCFͷΦʔϓϯιʔεϓϩδΣΫτ
 IUUQTOBQTWHJP
28. 4OBQTWHΛ࢖ͬͨαϯϓϧ • αϯϓϧίʔυ
 IUNMTOBQIUNM
 KTTOBQ@TBNQMFKT
    • ϘλϯλοϓͰԁ͕૿͑Δ
    • ԁ͕ϥϯμϜʹಈ͖ଓ͚Δ
    • Կݸ·ͰεϜʔζʹಈ͘ʁ
29. 'JSFGPYͰൃੜͨ͠
    τϥϒϧͷݕূ
30. 'JSFGPY
    04Ͱ΋
    ಉ͡Α͏ʹൃੜ͢Δͷ͔ௐ΂ͯΈͨ
31. UFYUEFDPSBUJPOଐੑ <svg witdh=100 height=100>! <text text-decoration=underline x=0 y=20>Hello World</text>! </svg> 'JSFGPY
    ҎԼ ͦͷଞϒϥ΢β Լઢ͕දࣔ͞ΕΔ Լઢ͕දࣔ͞Εͳ͍
32. 'JSFGPY
    04Ͱ͸ Լઢ͕දࣔ͞ΕΔ
33. HFU##PY var textElm = document.getElementById('text'); var box = textElm.getBBox(); ! alert(box.height); // textཁૉͷߴ͞ alert(box.width); // textཁૉͷ෯ ཁૉͷେ͖͞Λऔಘ͢ΔͨΊͷ"1*
34. 'JSFGPYͰ͸ // display: none ͳͲͰඇදࣔʹͳ͍ͬͯΔཁૉΛऔಘ var hiddenElm = document.getElementById('hidden'); var box = hiddenElm.getBBox(); ! ྫ֎
    l/4@&3303@'"*-63&z
    ͕ൃੜ
35. /4@&3303@'"*-63& ҙຯ
    ʮͳΜ͔Τϥʔʯ
36. /4@&3303@'"*-63& 23 /* Returned when a function fails */ 24 ERROR(NS_ERROR_FAILURE, 0x80004005), NP[JMMBYQDPNCBTF&SSPS-JTUI ԿΒ͔ͷݪҼͰؔ਺ͷ࣮ߦ͕ࣦഊͨ࣌͠ͷΤϥʔ
37. ͪͳΈʹ$ISPNFͩͱ // display: none ͳͲͰඇදࣔʹͳ͍ͬͯΔཁૉΛऔಘ var hiddenElm = document.getElementById('hidden'); var box = hiddenElm.getBBox(); ! alert(box.height); // 0 alert(box.width); // 0 ͪΌΜͱzz͕ग़ྗ͞ΕΔ
38. 'JSFGPY
    04Ͱ͸ /4@&3303@'"*-63&
39. ରॲํ๏
    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ൃੜ࣌ͷॲཧ }
40. ։ൃऀπʔϧͷΠϯεϖΫλ )5.-ཁૉΛબ୒ͨ͠৔߹ 47(಺ͷཁૉΛબ୒ͨ͠৔߹ ϧʔϧʹద༻͞Ε͍ͯΔελΠϧ͕දࣔ͞ΕΔ ϧʔϧʹద༻͞Ε͍ͯΔελΠϧ͕දࣔ͞Εͳ͍
41. $ISPNFͰ͸ ͪΌΜͱදࣔ͞ΕΔ
42. 'JSFGPY
    04Ͱ͸ ΍ͬͺΓදࣔ͞Εͳ͍
43. σόοά͠ʹ͍͘ ɾТɾʆ
44. ରॲํ๏ lܭࢉࡁΈz
    ͱʜ ελΠϧΤσΟλͰؤுΔ
45. ·ͱΊ • 'JSFGPY
    04
    
    47(
    • ྑ͘΋ѱ͘΋'JSFGPYͱಉ͡Α͏ʹ࢖͑Δ
    • ύϑΥʔϚϯε
    • ࣮ػ͕ͳ͍ͷͰݕূͰ͖ͳ͔ͬͨ
46. ͓͠·͍