Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Firefox OSでSVGをつかってみた

kadoppe
November 23, 2013

Firefox OSでSVGをつかってみた

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

kadoppe

November 23, 2013
Tweet

More Decks by kadoppe

Other Decks in Technology

Transcript

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

  2. ࣗݾ঺հ • ໊લ • ໳࿬߃ฏ!LBEPQQF • ৬ۀ • ιϑτ΢ΣΞΤϯδχΞ •

    3VCZ $P⒎FFc+BWB 4DSJQU0CKFDUJWF$ • ॴଐ • גࣜձࣾγΣΞ΢Οζ)5.-8&45KQ
  3. ຊ೔ͷεϥΠυ • εϥΠυ • IUUQXXXTMJEFTIBSFOFULBEPQQF • αϯϓϧίʔυ • IUUQTHJUIVCDPNLBEPQQFLBOTBJ pSFGPYPTUI

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

  5. 47(ͬͯͳΜͩΖ͏

  6. 47(ͱ͸ • 44DBMBCMFʢ֦େՄೳͳʣ • 77FDUPSʢϕΫλʔܗࣜͷʣ • ((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ཁૉΛ࢖͏ *OMJOF47(
  12. *OMJOF47(ͷϝϦοτ • ը૾ͷݟͨ໨Λ$44Ͱมߋ • ԁͷ৭ɺઢͷଠ͞Λม͑ΔɺͳͲ • +BWB4DSJQUͰը૾Λૢ࡞Πϕϯτॲཧ • ಈతͳը૾ੜ੒ •

    Ϛ΢εΫϦοΫɺυϥοάͳͲͷΠϕϯτ
  13. 47(ͷ׆༻ࣄྫ • ׆༻ྫ̍ • ϩΰ΍ΞΠίϯը૾ • ׆༻ྫ̎ • ΠϯλϥΫςΟϒͳ8FCΞϓϦέʔγϣϯ

  14. ϩΰ΍ΞΠίϯը૾

  15. ϩΰ΍ΞΠίϯը૾

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

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

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

  19. ։ൃ؀ڥ • 'JSFGPY ݱࡏ#FUB  • 'JSFGPY044JNVMBUPS • ZFPNBO HFOFSBUPSpSFGPYPT

    • ΞϓϦͷͻͳܗ࡞੒ʹ࢓༷
  20. ݁࿦ɿ 'JSFGPYͱಉ͡Α͏ʹ࢖͑Δ

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

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

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

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

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


    IUUQTOBQTWHJP
  27. None
  28. 4OBQTWHΛ࢖ͬͨαϯϓϧ • αϯϓϧίʔυ
 IUNMTOBQIUNM
 KTTOBQ@TBNQMFKT • ϘλϯλοϓͰԁ͕૿͑Δ • ԁ͕ϥϯμϜʹಈ͖ଓ͚Δ •

    Կݸ·ͰεϜʔζʹಈ͘ʁ
  29. 'JSFGPYͰൃੜͨ͠ τϥϒϧͷݕূ

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

  31. UFYUEFDPSBUJPOଐੑ <svg witdh=100 height=100>! <text text-decoration=underline x=0 y=20>Hello World</text>! </svg>

    'JSFGPYҎԼ ͦͷଞϒϥ΢β Լઢ͕දࣔ͞ΕΔ Լઢ͕දࣔ͞Εͳ͍
  32. 'JSFGPY04Ͱ͸ Լઢ͕දࣔ͞ΕΔ

  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. 'JSFGPY04Ͱ͸ /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. 'JSFGPY04Ͱ͸ ΍ͬͺΓදࣔ͞Εͳ͍

  43. σόοά͠ʹ͍͘ ɾТɾʆ

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

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

  46. ͓͠·͍