なるべくJavaScriptを書かないで SymfonyのUIをリッチにする Symfony UX

by Ippei Sumida

Slide 1

Slide 1 text

1)1$POGFSFODF+BQBO ͳΔ΂͘+BWB4DSJQUΛॻ͔ͳ͍Ͱ   4ZNGPOZͷ6*ΛϦονʹ͢Δ 4ZNGPOZ69

Slide 2

Slide 2 text

֯ాɹҰฏʢ͢Έ͍ͩͬ΃͍ʣ w ޿ౡݝग़਎ɺେࡕ෎ࡏॅ w ϑϦʔϥϯε8FCσϕϩούʔ w 4ZNGPOZ.FFUVQ,BOTBJӡӦ౳   ίϛϡχςΟ׆ಈ΍ͬͯ·͢

Slide 3

Slide 3 text

"(&/%" w 4ZNGPOZ69ͱ͸ w 4ZNGPOZ69Λ࢖͏ͱԿ͕ྑ͍͔ w 4ZNGPOZ69ͷ͓͢͢Ίίϯϙʔωϯτ

Slide 4

Slide 4 text

4ZNGPOZ69ͱ͸

Slide 5

Slide 5 text

όοΫΤϯυͱϑϩϯτΤϯυΛ ͭͳ͙ڮ

Slide 6

Slide 6 text

ϑϩϯτΤϯυ όοΫΤϯυ

Slide 7

Slide 7 text

4ZNGPOZ69 ϑϩϯτΤϯυ όοΫΤϯυ ˣͳΔ΂͘؆୯ʹϑϩϯτΤϯυͷΧελϚΠζΛߦ͑ΔΑ͏ʹ

Slide 8

Slide 8 text

4ZNGPOZ69 8FCQBDL&ODPSF 4ZNGPOZ 5XJH 4ZNGPOZ69ߏ੒ ˡϑϨʔϜϫʔΫ ˡςϯϓϨʔτΤϯδϯ ˡ8FCQBDL౷߹ϥΠϒϥϦ ˡ69ϥΠϒϥϦ

Slide 9

Slide 9 text

ओͳػೳ w 69ܥ+BWB4DSJQUϥΠϒϥϦΛར༻ w 69༻ςϯϓϨʔτλάɾΫϥεͰ+BWB4DSJQUͷࣗಈੜ੒ w 1)1ͷ஋Λ+BWB4DSJQU΁εϜʔζʹ౉͢ 69ʹؔΘΔػೳ֦ு Λఏڙ

Slide 10

Slide 10 text

ݟͨ໨ܥ ϑΥʔϜܥ 5XJHܥ w5XJH$PNQPOFOU w-JWF$PNQPOFOU w$IBSUKT w-B[Z*NBHF w4XVQ w5VSCP w5ZQFE w/PUJGZ w"VUPDPNQMFUF w*NBHF$SPQQFS w4UZMJ[FE%SPQ[POF ౷߹ܥ w3FBDU w7VF /FX

Slide 11

Slide 11 text

1)1ύοέʔδΠϯετʔϧ QBDLBHFKTPO௥ه Πϯετʔϧ

Slide 12

Slide 12 text

4ZNGPOZ69Λ࢖͏ͱԿ͕ྑ͍͔

Slide 13

Slide 13 text

ݟͨ໨͸େࣄͩΑʂ Ξχϝʔγϣϯ͍ͨ͠ ͳΜ͔γϡοͱ͍ͨ͠ ݕࡧΛ͔ͬ͜Αͯ͘͠ ؅ཧը໘࢖͍ͮΒ͍ʂ ೔ʑɺ͍Ζ͍Ζͳཁ๬͕ͱͲ͖·͢

Slide 14

Slide 14 text

+BWB4DSJQU಺ʹ ςϯϓϨʔτͷίʔυΛ ॻ͘৔߹͕͋Δɻ

Slide 15

Slide 15 text

+BWB4DSJQUͷͨΊͷ"1*Λ ࡞Δඞཁ͕͋Δɻ

Slide 16

Slide 16 text

69༻ΦϒδΣΫτΛ࡞Δ 69༻ςϯϓϨʔτ   ؔ਺λάΛ࢖͏ جຊ͸͜ͷ̎ύλʔϯ

Slide 17

Slide 17 text

+BWB4DSJQUͰॻ͍ͨ৔߹ ྫ͑͹$IBSUKTΛ

Slide 18

Slide 18 text

DIBSU#VJMEFSDSFBUF$IBSU \άϥϑछผ^ ˠάϥϑΦϒδΣΫτ࡞੒ DIBSUTFU%BUB \σʔλ^ ˠάϥϑͷσʔλΛηοτ +BWB4DSJQUͰઃఆ͢ΔσʔλΛ   1)1Ͱهड़ 4ZNGPOZ69ͩͱ

Slide 19

Slide 19 text

\\SFOEFS@DIBSU ^^Ͱ+BWB4DSJQUੜ੒

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

w ඞཁҎ্ʹ+BWB4DSJQUΛॻ͔ͳͯ͘Α͘ͳΔ w ඞཁҎ্ʹ"1*Λ࡞Δඞཁ͕ͳ͘ͳΔ w طଘͷϓϩδΣΫτʹ؆୯ʹಋೖͰ͖Δ w ຌϛε͕ݮΔʢྫɿ+4ͷจࣈྻ݁߹Ͱzz࢖ͬͯͨʣ 4ZNGPOZ69Λ࢖͏͜ͱͰʜ গͳ͍࿑ྗͰݟͨ໨Λվળʂ

Slide 22

Slide 22 text

4ZNGPOZ69ͷछྨ

Slide 23

Slide 23 text

ݟͨ໨ܥ ϑΥʔϜܥ 5XJHܥ w5XJH$PNQPOFOU w-JWF$PNQPOFOU w$IBSUKT w-B[Z*NBHF w4XVQ w5VSCP w5ZQFE w/PUJGZ w"VUPDPNQMFUF w*NBHF$SPQQFS w4UZMJ[FE%SPQ[POF ౷߹ܥ w3FBDU w7VF ࠓճ঺հ͢Δίϯϙʔωϯτ /FX

Slide 24

Slide 24 text

ϖʔδ಺ʹΞΫγϣϯΛ͚ͭΔͷʹศར ϖʔδ ϖʔδ " # ΠϯλϥΫςΟϒͳ ϖʔδ " $

Slide 25

Slide 25 text

Slide 26

Slide 26 text

)PUXJSF5VSCPΛ࢖ͬͯ41"ʢͬΆ͍ಈ͖ʣʹ͠·͢ 5VSCP TZNGPOZVYUVSCP

Slide 27

Slide 27 text

5VSCP͸छྨ 5VSCP w 5VSCP%SJWF   ˠϖʔδશମʹ࡞༻ w 5VSCP'SBNF   ˠϖʔδͷ̍Օॴʹ࡞༻ w 5VSCP4USFBN   ˠϖʔδͷෳ਺Օॴʹ࡞༻

Slide 28

Slide 28 text

5VSCP%SJWF ೖΕΔ͚ͩͰɺϦϯΫઌͷϖʔδΛ"KBYͰऔಘ͠දࣔΛࠩ͠ସ͑·͢

Slide 29

Slide 29 text

ϑΥʔϜૹ৴࣌ɺಉҰ63-Λ࠶ඳը͢Δ͜ͱ͕Ͱ͖ͳ͍ʂʂ

Slide 30

Slide 30 text

5VSCP'SBNF ը໘ͷҰ෦͚ͩΞΫγϣϯઌͷϖʔδΛ"KBYͰऔಘ͠දࣔΛࠩ͠ସ͑·͢

Slide 31

Slide 31 text

UVSCPGSBNFͰғΉͱ͚ͦͩ͜࠶ඳը͠·͢

Slide 32

Slide 32 text

TSDࢦఆͰ஗Ԇಡࠐ͠·͢

Slide 33

Slide 33 text

ϑΥʔϜૹ৴࣌ɺෳ਺ՕॴΛ࠶ඳը͢Δ͜ͱ͕Ͱ͖ͳ͍ʂʂ

Slide 34

Slide 34 text

5VSCP4USFBN ΞΫγϣϯͰෳ਺ՕॴΛ"KBYͰऔಘ͠දࣔΛࠩ͠ସ͑·͢

Slide 35

Slide 35 text

lUVSCP@TUSFBNz   ͱ͍͏ϑΥʔϚοτͰ   ಛघͳσʔλΛग़ྗ

Slide 36

Slide 36 text

UVSCPTUSFBNͰғΉ λʔήοτ*%Λத৺ʹ࠶ඳը

Slide 37

Slide 37 text

BDUJPOlVQEBUFzɿλʔήοτͰࢦఆͨ͠*%λά಺Λ࠶ඳը͠·͢

Slide 38

Slide 38 text

5VSCP4USFBNΞΫγϣϯͷछྨ UVSCPTUSFBNBDUJPOl\͜͜^z w BQQFOE   ˠࢦఆ*%λά಺ͷ࠷ޙʹ௥Ճ w QSFQFOE   ˠࢦఆ*%λά಺ͷ࠷ॳʹ௥Ճ w SFQMBDF   ˠࢦఆ*%λάΛॻ͖׵͑ w VQEBUF   ˠࢦఆ*%λά಺Λॻ͖׵͑ w SFNPWF   ˠࢦఆ*%λάΛ࡟আ w CFGPSF   ˠࢦఆ*%λάͷલʹ௥Ճ w BGUFS   ˠࢦఆ*%λάͷޙΖʹ௥Ճ

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

.&3$63& "114&37&3 .&3$63&͕44&ʢ4FSWFS4FOU&WFOUTʣͷϋϒͱͯ͠ಈ࡞ 1045 44& 44& 44&

Slide 41

Slide 41 text

5VSCP4USFBN 5VSCP4USFBN 5VSCPTUSFBN .&3$63& "114&37&3 44&Ͱ5VSCP4USFBNΛૹ৴͢Δ͜ͱ͕Մೳ 1045

Slide 42

Slide 42 text

IVCQVCMJTI OFX6QEBUF ࢦఆ͞ΕͨτϐοΫͰ44&ૹ৴ τϐοΫ 5VSCP4USFBN

Slide 43

Slide 43 text

lDIBUz   τϐοΫΛϦοεϯ 44&Λड͚औΔͱ࠶ඳը ʢෳ਺*%΋Մೳʣ

Slide 44

Slide 44 text

QVCTVC͕+BWB4DSJQUΛߦ΋ॻ͔ͣʹ࣮ݱͰ͖·͢

Slide 45

Slide 45 text

w ϦΞϧλΠϜੑͷඞཁͳ΢ΟδΣοτ w ࠲੮ࢦఆ w ͍͍ͶϘλϯʢ݅਺ʣ w QVCTVC w ίϝϯτ w νϟοτ w JE؅ཧ͕͔ͬ͠Γඞཁ w ηΩϡϦςΟͷߟྀ͕ඞཁ   ˠᷖᮣʹͭ͘Δͱݸਓ৘ใ࿙Ӯ͢Δ 5VSCP )PUXJSF5VSCPΛ࢖ͬͯ41"ʢͬΆ͍ಈ͖ʣʹ͠·͢ ஫ҙ఺ γʔϯ

Slide 46

Slide 46 text

˞ల։͞Εͨ)5.-͕࠶ඳը͞Ε·͢

Slide 47

Slide 47 text

5XJHͱΫϥεΛ࢖ͬͯίϯϙʔωϯτΛ࡞Γ·͢ 5XJH$PNQPOFOU TZNGPOZVYUXJHDPNQPOFOU

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

QVCMJD QSJWBUFʹΑΔΞΫηε੍ޚ Կ΋ܧঝ͍ͯ͠ͳ͍Ϋϥε ΦʔτϫΠϠϦϯάʹΑΔ%* 5XJHͰࢦఆ͞ΕΔ͜ͱͰ ɹ࣮ߦ͞ΕΔϝιου

Slide 51

Slide 51 text

DPNQVUFEΛ࢖͏ͱ࣮ߦ݁ՌΛอ࣋͠ɺ࣍ճҎ߱͸࣮ߦ݁ՌΛฦ͠·͢

Slide 52

Slide 52 text

5XJH$PNQPOFOUʹঢ়ଶอ࣋ͱΞΫγϣϯΛ௥Ճ͠·͢ -JWF$PNQPOFOU TZNGPOZVYMJWFDPNQPOFOU

Slide 53

Slide 53 text

<-JWF1SPQT> <-JWF"DUJPO> ˠεςʔτϑϧͳϓϩύςΟ ˠΞΫγϣϯϝιου <"T-JWF$PNQPOFOU> ˠ-JWF$PNQPOFOUએݴ

Slide 54

Slide 54 text

\\BUUSJCVUF^^   ˠඞཁͳଐੑΛ௥Ճ EBUBBDUJPOlMJWFBDUJPOz EBUBBDUJPOOBNFlϝιου໊z ˠࢦఆͨ͠ϝιουΛ࣮ߦ EBUBNPEFMlϓϩύςΟ໊z   ˠࢦఆͨ͠ϓϩύςΟΛඥ෇͚ όΠϯυ

Slide 55

Slide 55 text

-JWF$PNQPOFOU ϖʔδ ίϯϙʔωϯτ಺ͷಈ͖Λ؂ࢹͯ͠ɺ౎౓ϦΫΤετɾϨεϙϯε όΠϯυͨ͠ϓϩύςΟͷ஋มߋɾΞΫγϣϯ࣮ߦ ϝιου࣮ߦ BKBY௨৴ Ϩεϙϯε ϨεϙϯεΛ֘౰෦෼ʹ൓ө

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

ϦΞϧλΠϜʹϑΥʔϜͷόϦσʔγϣϯ͕ՄೳʹͳΓ·͢

Slide 58

Slide 58 text

w ຊےϢʔεέʔεͱ͸ؔ܎ͳ͍෦඼Ͱ w ະಡ݅਺ w %#֎෦࿈ܞ͕ඞཁͳ෦඼ w ݕࡧϑΥʔϜ w ͓໰߹ͤϑΥʔϜ w ݱࡏͷΧʔτ w ༣ศ൪߸Ͱͷॅॴݕࡧ w एׯಈ͖͕͋΍͍͠ͱ͖͕͋Δ w ࣮ߦ࣌ؒ͸ͪΐͬͱ͔͔Δ -JWF$PNQPOFOU ஫ҙ఺ γʔϯ 5XJH$PNQPOFOUʹঢ়ଶอ࣋ͱΞΫγϣϯΛ௥Ճ͠·͢

Slide 59

Slide 59 text

3FBDUίϯϙʔωϯτΛར༻͠·͢ 3FBDU TZNGPOZVYSFBDU

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

ίϯϙʔωϯτͷωετՄೳ

Slide 62

Slide 62 text

7VFίϯϙʔωϯτΛར༻͠·͢ 7VF

Slide 63

Slide 63 text

஫ҙ఺ γʔϯ w طଘͷ3FBDUίʔυͷҠ২ w ίϯϙʔωϯτͦͷ··ར༻΋Մ w 3FBDUґଘͳͳ6*Λ࠾༻ w ϑϩϯτΤϯυΤϯδχΞͱ෼ۀ w 3FBDUଆ͸ϑϩϯτΤϯυ w ஋ͷҾ͖౉͠΍ར༻͸όοΫΤϯυ w Ϟμϯͳ8FCϑϩϯτΤϯυͷ   ઴ਐతͳಋೖ w 3FBDU಺Ͱ͸5XJHͷػೳ͸࢖͑ͳ͍ w ಈతͳ஋͸5XJHଆ͔Β౉͢ w ͔͜͜Βઌ͸+4ͷੈք 3FBDU 3FBDUίϯϙʔωϯτΛར༻͠·͢

Slide 64

Slide 64 text

·ͱΊ

Slide 65

Slide 65 text

঺հͨ͠ίϯϙʔωϯτ·ͱΊ 5VSCP -JWF 3FBDU w উखʹ41"Խ w ϦΞϧλΠϜʹ   ࠷৽ͷঢ়ଶʹมߋͰ͖Δ w ෳ਺Օॴͷมߋ͕༰қ w एׯ͕ͤͭ͘Α͍ w ࢖͍׳Εͨ4ZNGPOZͷ   ॻ͖ํͰ࡞੒Ͱ͖Δ w ϑΥʔϜͷόϦσʔγϣϯ w +4͸΄΅օແ w طଘͷ3FBDUͷҠ২͕   Ͱ͖Δ w ϑϩϯτΤϯυͱ෼ۀՄ w ͔͜͜Β͖͞͸+4

Slide 66

Slide 66 text

4ZNGPOZ69͸ w +4ΛͳΔ΂͘ॻ͔ͣʹϑϩϯτΤϯυΛϦονʹ͢Δ w େ·͔ʹݟͨ໨ɺϑΥʔϜɺ5XJHɺ౷߹ͷछྨ w طଘʹ΋৽نʹ΋ಋೖ͸ൺֱత༰қʢҰ෦Ͱ΋Մʣ w ϊ΢ϋ΢͸ͦ͜·Ͱཷ·ͬͯͳ͍ͷͰɺτϥΠˍΤϥʔ͕ඞཁ

Slide 67

Slide 67 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠