SVG画像をPHPで生成しよう

PHP Conference Japan 2021 でお話しした際のスライドです。

This deck introduces how we can produce SVG images on PHP application servers. (in Japanese)

Transcript

1. CZ5.0500,"
   47(ը૾Λ1)1Ͱੜ੒͠Α͏
   1)1$POGFSFODF+BQBO
   ೔໨5SBDL
   

   View Slide

2. ͸͡Ίʹ
   w ࣭໰ͳͲ͸%JTDPSE#track3-4-a-php-svg΁
   w ײ૝ͳͲ͸KPJOFEJO΁
   

   IUUQTKPJOEJOFWFOUQIQDPOGFSFODFKBQBOTWHIVB
   YJBOHXPQIQEFTIFOHDIFOHTIJZPV
   
   

   View Slide

3. ࢲ͸୭ʁ
   w !U@NPUPPLB
   w ͓͠͝ͱ
   w 8FCΞϓϦͷडୗ։ൃʢ΄΅$BLF1)1ʣ
   w .BD8JOEPXTΞϓϦͷ։ൃ
   w ʢ਺೥લ·Ͱʣ47(ը૾ฤूͷ8FCαʔϏεͷ։ൃɾӡӦ
   w 1)1͸ͷࠒ͔Β
   
   

   View Slide

4. ໨࣍
   w 47(ͱ͸ʁ
   w Կ͕خ͍͠ͷʁ
   w 1)1Ͱ47(Λඳ͘ํ๏
   w ϥελϥΠζ͢Δ
   
   

   View Slide

5. ໨࣍
   w 47(ͱ͸ʁ
   w Կ͕خ͍͠ͷʁ
   w 1)1Ͱ47(Λඳ͘ํ๏
   w ϥελϥΠζ͢Δ
   
   

   View Slide

6. 47(ͱ͸ʁ
   w 4DBMBCMF7FDUPS(SBQIJDT
   w ϕΫλը૾
   w ඳըͷίϚϯυ౳͕ه࿥͞Ε͍ͯΔը૾ܗࣜ
   w ʮ͜͜ʹ௕ํܗΛඳ͍ͯʂʯΈ͍ͨͳͷ
   w ଞͷྫ1%' 1PTU4DSJQU 1*$5ը૾ ݹ͍
   
   w 㱻ϥελ SBTUFS
   ը૾ʢ1/( +1&(౳ʣ
   w ϕΫλը૾ͷҰ෦ͱͯ͠ϥελը૾ΛؚΈ͏Δ
   w ֦େͯ͠΋ΩϨΠʂʢ಺แ͢Δϥελը૾Λআ͘ʣ
   w 9.-ɺͭ·ΓςΩετͰඳ͚Δ
   
   

   View Slide

7. 47(ͱ͸ʁྺ࢙
   w ೥47(͕8$3FDPNNFOEBUJPOʹ
   w ೥ɿ47(͕8$3FDPNNFOEBUJPOʹ
   w ೥·ͰͷͲ͔͜ɿ'JSFGPY͕ରԠ
   w ೥8FC,JU͕ରԠ
   

   ˠJ1IPOFͷ4BGBSJ͸౰ॳ͔ΒରԠ
   w ೥*&͕ରԠ
   

   ˠओཁϒϥ΢β͕ରԠͨ͜͠ͱͰ47(ར༻ػձ͕૿͑Δ
   w ೥ɿ47(͕8$$BOEJEBUF3FDPNNFOEBUJPOʹʢ·ͩमਖ਼தʣ
   ग़యIUUQTFOXJLJQFEJBPSHXJLJ4DBMBCMF@7FDUPS@(SBQIJDT
   
   

   View Slide

8. 47(ͱ͸ʁͲ͏΍ͬͯඳ͘ʁ
   ˞஫ɹɹɹɹɹ͸λϒจࣈɺɹɹ͸վߦɺɹ͸൒֯εϖʔεͰ͋Δɻ
   
   

   View Slide

9. 47(ͱ͸ʁͲ͏΍ͬͯඳ͘ʁ
   ˞஫ɹɹɹɹɹ͸λϒจࣈɺɹɹ͸վߦɺɹ͸൒֯εϖʔεͰ͋Δɻ
   
   

   View Slide

10. ໨࣍
    w 47(ͱ͸ʁ
    w Կ͕خ͍͠ͷʁ
    w 1)1Ͱ47(Λඳ͘ํ๏
    w ϥελϥΠζ͢Δ
    
    

    View Slide

11. 47(ɺԿ͕خ͍͠ͷʁ
    w ֦େͯ͠΋ΩϨΠʢϥελը૾ຒΊࠐΈ࣌Λআ͘ʣ
    w ଟ༷ͳσόΠεͰΞΫηε͞ΕΔ8FCͰɺͥͻ࢖͍͍ͨʂ
    w ΄ͱΜͲͷϒϥ΢βͰදࣔՄೳ
    w ಉ্
    w ςΩετσʔλ͔ͩΒɺ࡞Γқ͍ɻ
    w ಈతੜ੒͠қ͍ʂ
    
    

    View Slide

12. ਎ۙͳɺը૾ͷಈతੜ੒ͷྫ
    (JU)VCͷ
    σϑΥϧτͷΞόλʔ
    GPSUFFͷ
    ϔομը૾
    
    

    View Slide

13. ໨࣍
    w 47(ͱ͸ʁ
    w Կ͕خ͍͠ͷʁ
    w 1)1Ͱ47(Λඳ͘ํ๏
    w ϥελϥΠζ͢Δ
    
    

    View Slide

14. 1)1Ͱ47(Λඳ͘ํ๏
    w ιʔείʔυ
    

    IUUQTHJTUHJUIVCDPNNPUPPLBGCGFBBFCCBEC
    w ΞΫηε͢ΔαΠτ
    

    IUUQTXXXUNPUPPLBDPNQIQDPOGUFTUQIQ VTFS/BNFIPHFVTFS*%
    

    ˞্هͷιʔείʔυΛ1)1ͷ؀ڥʹஔ͍͚ͨͩͷ؀ڥͰ͢ɻޙ೔ফ͢Մೳੑ͕͋Γ·͕͢ɺͦͷࡍ͸্هιʔεΛ͓खݩͰ͓ࢼ͠Լ͍͞ɻ
    ࣮ԋ
    
    

    View Slide

15. 1)1Ͱ47(Λඳ͘ํ๏
    w ࣮ԋͨ͠ͷ͸ɺ1)1ͷʮຊདྷͷػೳʯͰͷը૾ੜ੒
    w ར఺ɿ௚ײతͳฤू
    w ଞͷํ๏̍ɿจࣈྻॲཧ
    w ར఺ɿॻ͖׳Εͨจࣈྻॲཧ͕ͦͷ··࢖͑Δʂʢ)FSF%PD΋࢖͑Δʣ
    w ར఺ɿ࡞ͬͨ΋ͷΛ)551 4
    Ͱฦͣ͞ʹผͷ৔ॴʹྲྀ༻͠қ͍
    w ଞͷํ๏̎ɿ%0.%PDVNFOUΛ࢖ͬͨํ๏
    w ར఺ɿΞοϓϩʔυ͞Εͨը૾΁ͷฤूߦҝ͕༰қ
    w ར఺ɿจ๏తͳޡΓΛ࡞Γʹ͍͘
    w ར఺ɿ࡞ͬͨ΋ͷΛ)551 4
    Ͱฦͣ͞ʹผͷ৔ॴʹྲྀ༻͠қ͍
    w ܽ఺ɿ9.-ؔ܎ͷηΩϡϦςΟରࡦͷඞཁੑ
    
    

    View Slide

16. ໨࣍
    w 47(ͱ͸ʁ
    w Կ͕خ͍͠ͷʁ
    w 1)1Ͱ47(Λඳ͘ํ๏
    w ϥελϥΠζ͢Δ
    
    

    View Slide

17. ϥελϥΠζͦͷཧ༝
    w ԿΒ͔ͷཁ݅Ͱ1/(͕ඞཁʹͳΔͱ͖
    w ྫ5XJUUFS$BSEରԠ
    

    IUUQTEFWFMPQFSUXJUUFSDPNFOEPDTUXJUUFSGPSXFCTJUFTDBSET
    PWFSWJFXTVNNBSZDBSEXJUIMBSHFJNBHF
    w ྫ47(ͷઌਐతͳػೳΛ࢖͏ͱ͖
    w จࣈΛɺ࣮֬ʹࢦఆͨ͠ϑΥϯτͰද͍ࣔͨ͠ͱ͖
    w ͳͲͳͲ
    
    

    View Slide

18. ϥελϥΠζͦͷํ๏
    w 8FCϑϩϯτΤϯυ
    w DBOWBTΛ࢖͏ํ๏
    w αʔόαΠυ
    w *NBHF.BHJDLΛ࢖͏ํ๏
    w )FBEMFTT$ISPNFΛ࢖͏ํ๏
    w ͍ͣΕͷ৔߹΋ɺϑΥϯτʹ͸஫ҙ
    
    

    View Slide

19. ϥελϥΠζ஫ҙ఺ αʔόαΠυ
    
    w 443'߈ܸʹ஫ҙ
    w 47(͸֎෦ͷϦιʔεΛಡΈࠐ·ͤΔ͜ͱ͕Ͱ͖Δ
    w ѱҙͷ͋Δαʔό͔Βѱҙͷ͋Δ1/(ը૾Λμ΢ϯϩʔυͨ͠Γʜ😱
    w ֎෦ΤϯςΟςΟࢀর 99&
    Λ࢖ͬͨ߈ܸʹ஫ҙ
    w ͜Ε͸ϥελϥΠζʹݶΒͣɺαʔόͰ9.-Λѻ͏ͱ͖͸஫ҙ
    w ಙؙઌੜͷهࣄ ೥ͷ"EWFOU$BMFOEBS
    Λࢀর
    

    IUUQTCMPHUPLVNBSVPSHJOUSPEVDUJPOUPYYFGPSQIQQSPHSBNNFSTIUNM
    w ࢖͏ιϑτ΢ΣΞͷ੬ऑੑʹ஫ҙ
    
    

    View Slide

20. ໨࣍
    w 47(ͱ͸ʁ
    w Կ͕خ͍͠ͷʁ
    w 1)1Ͱ47(Λඳ͘ํ๏
    w ϥελϥΠζ͢Δ
    
    

    View Slide

21. ࢀߟจݙ
    w 47(4FDPOE&EJUJPO
    

    IUUQTXXXXPSH5347(
    

    ˞೔ຊޠ༁΋ଟ਺͋Γʢ͓ͦΒ͘ඇެࣜʣ
    w 47(Τοηϯγϟϧζୈ൛ʢ঎ۀࢽɾ༗ঈʣ
    

    IUUQTXXXPSFJMMZDPKQCPPLT
    w ςΩετΤσΟλͱϒϥ΢βͰॻ͚Δɾඳ͚Δ47(ʢಉਓࢽɾ༗ঈʣ
    

    IUUQTIPMJEBZXPSLJOHCPPUIQNJUFNT
    w 1)1ϓϩάϥϚͷͨΊͷ99&ೖ໳
    

    IUUQTCMPHUPLVNBSVPSHJOUSPEVDUJPOUPYYFGPSQIQ
    QSPHSBNNFSTIUNM
    
    

    View Slide

22. ·ͱΊ
    w 47(ը૾͸1)1Ͱͷಈతੜ੒ʹ޲͍͍ͯΔʂ
    w ը૾ͷಈతੜ੒ɺ͋ͳͨͷϓϩμΫτʹ΋׆͔ͦ͏ɻ
    w ηΩϡϦςΟ্ͷ஫ҙ఺ɺ࣮૷લʹ஌͓ͬͯ͜͏ɻ
    w ࣭໰ͳͲ͸%JTDPSE΁
    w ײ૝ͳͲ͸KPJOFEJO΁
    
    

    View Slide

23. CZ5.0500,"
    47(ը૾Λ1)1Ͱੜ੒͠Α͏
    1)1$POGFSFODF+BQBO
    ೔໨5SBDL
    ׬
    

    View Slide