本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Engineer • WordPress Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 2

Slide 3

Slide 3 text

Plugins and Themes • Custom Post Type Permalinks • Advanced Posts Blocks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Vanilla • and more... 3

Slide 4

Slide 4 text

Slide 5

Slide 5 text

WordPress Meetup Map • React Ͱग़དྷͯ·͢ɻ • https://github.com/torounit/wp-meetup-map • ϓϧϦΫ͍ͩ͘͞ɻ 5

Slide 6

Slide 6 text

Slide 7

Slide 7 text

௕໺ݝদຊࢢ͔Β͖·ͨ͠ • Shinshu WordPress Meetup • ຖճϐβ৯ͬͯ·͢ɻ • ࠓ໷Ξυ֗οΫఱࠃ͕দຊಛूɻ • ߚ༿͕ݟ͝Ζɻ৽ͦ͹ɻ 7

Slide 8

Slide 8 text

͸͍ 8

Slide 9

Slide 9 text

2019.11.12 9

Slide 10

Slide 10 text

WordPress 5.3 ϦϦʔε༧ఆ 10

Slide 11

Slide 11 text

11ϲ݄લ 11

Slide 12

Slide 12 text

2018.12.06 12

Slide 13

Slide 13 text

WordPress 5.0 !!! 13

Slide 14

Slide 14 text

͓͞Β͍ɿWordPress 5.0 • ໿1೥ͿΓͷϝδϟʔΞοϓσʔτ • ଴ͪʹ଴ͬͨɺϒϩοΫΤσΟλʔɺGutenberg ͷϚʔδɻ ( ver 4.6 ) 14

Slide 15

Slide 15 text

͜͜ʹࢸΔ·Ͱɺ͍Ζ͍Ζ͋Γ·ͨ͠ 15

Slide 16

Slide 16 text

ߋʹ1ϲ݄લ 16

Slide 17

Slide 17 text

2018.11.13 • WordPress 5.0 beta 4, Gutenberg 4.3 ͷϦϦʔεɻ • Gutenberg 4.3 ͸ WordPress ʹϚʔδࡁΈ • ͜ͷ࣌఺Ͱ͸ɺ11/27 ϦϦʔε༧ఆɻ 17

Slide 18

Slide 18 text

9:00 ͝Ζɻ • ʮGutenberg Ͱ೔ຊޠ͕ೖྗग़དྷͳ͍ŋŋŋʯ • ʮ5.0 Beta 4 Ͱ೔ຊޠ͕͏·͘ೖྗग़དྷͳ͍ŋŋŋʯ ౳ͷͭͿ΍͖͕ͪΒ΄Βͱɻ 18

Slide 19

Slide 19 text

೔ຊޠೖྗͷ ෆ۩߹͕ൃੜ!!! 19

Slide 20

Slide 20 text

• ೔ຊޠೖྗͰɺ1จࣈ໨͕֬ఆ͞Εͯ͠·͏όάɻ • kakikukeko → ͕ɺʮk͖͚͋͘͜ʯ • https://github.com/WordPress/gutenberg/issues/11813 • ϦετϒϩοΫͰ͸ɺશͯͷจࣈͰൃੜɻ • kakikukeko → ͕ɺʮk͋k͍k͏k͑k͓ʯ • https://github.com/WordPress/gutenberg/issues/11795 20

Slide 21

Slide 21 text

15:00 ࠒ https://github.com/WordPress/ gutenberg/issues/11795 ΩλδϚ͞Μ͕ issueใࠂɻ ϦετϒϩοΫͷ೔ຊޠೖྗ͕͓͔͍͠ ͱ͍͏಺༰ɻ ͜ͷ໰୊͕ɺGutenberg 4.3 ͔Βൃੜ͠ ͨ͜ͱ΋ɻ 21

Slide 22

Slide 22 text

23:30 ࠒ https://github.com/WordPress/ gutenberg/issues/11813 ๻΋ؔ࿈໰୊Λൃݟ͠ใࠂɻ Ͳ͏΍Βɺ ͱ͍͏ίϯϙʔ ωϯτΛ࢖͍ͬͯΔ΋ͷશͯͰൃੜ͢Δ ͜ͱɻ ΩλδϚ͞Μͷͱ͸·ͨผͷέʔεͰ೔ ຊޠೖྗ͕͓͔͍͜͠ͱΛใࠂɻ 22

Slide 23

Slide 23 text

͜ͷͱ͖ͷ΅͘ͷ͖΋ͪ 23

Slide 24

Slide 24 text

γϟϨʹͳΒΜʂʂʂʂ 24

Slide 25

Slide 25 text

• ϒϩοΫΤσΟλʔΛ࢖͏ͧʂͱ͍͏Ҋ݅ΛఏҊ͍ͯͨ͠ɻ • ͜ͷ··ϦϦʔε͞ΕͨΒɺʮWordPress ͬͯόάͬͯΔΜ Ͱ͠ΐʁʯΈ͍ͨͳ͜ͱΛݴΘΕΔͷ͸ɺ৺͕௧͍ɻετϨ εɻ • Classic Editor ΛೖΕΔͷ͕౰ͨΓલʹͳΔͱɺࠓ౓͸͍ͭɺ ϒϩοΫΤσΟλʔʹ͢Δͷͱ͍͏໰୊ɻ • ࠓޙϢʔβʔɾΫϥΠΞϯτʹઆ໌͢Δͷ΋Ұۤ࿑ɻɻɻ 25

Slide 26

Slide 26 text

UIͰղΓ΍͘͢όάΔͷ͸ɺϓϩμΫτͷ৴༻ʹؔΘΔɻ 26

Slide 27

Slide 27 text

2018.11.14 • 4.2 Ͱ͸ൃੜ͠ͳ͍͜ͱ͕൑໌ɻ • ΄͔ͷ೔ຊਓ͔Β΋ಈ͔ͳ͍Αʔͱͷใࠂ͕਺͕݅͋Δɻ • ͳΜͱ͔ݪҼ͕ىͬͨ͜ϑΝΠϧͷಛఆʹ͸੒ޭ͕ͨ͠ɺղ Βͣɻ 27

Slide 28

Slide 28 text

2018.11.15 ͨͪ͹ͳ͞Μ͕ɺMaking WordPress (ެࣜ Slack) ͷ #core-editor νϟϯωϧͰใࠂɻ͔͜͜Β࿩͕ಈ͖࢝ΊΔɻ 28

Slide 29

Slide 29 text

toru ͞ΜʹΑΔৄࡉͳίϝϯτɻ 29

Slide 30

Slide 30 text

19:18 ίϛολʔͷElla ͞Μ͕ɺΩλδϚ͞Μ ͷ issue ʹίϝϯτɻ Mac ͷ "ͻΒ͕ͳ" ౳ͷ೔ຊޠೖྗγε ςϜΛೖΕͯΈ͚ͨͲɺྑ͘ղΒͳ͍ɻ ΋ͬͱ৘ใ͕ཉ͍͠ʂͱͷ͜ͱɻ ͔͜͜Βɺ̍࣌ؒ΄ͲɺΩλδϚ͞Μ ͱɺElla͞Μͷ΍ΓͱΓɻ 30

Slide 31

Slide 31 text

21:50 31

Slide 32

Slide 32 text

• ίϛολʔͷ Ella ͞Μ͔Β Gutenberg ͷमਖ਼൛ͷZIP͕ඈΜ Ͱ͘Δɻ͔͜͜Β͠͹Β͘ɺElla ͞Μ͕௚ͨ͠΋ͷΛ๻͕ख ݩͰݕূ͢Δɻ • ӳޠྑ͘ղΒͳ͍͚Ͳɺֆจࣈͱ Google ຋༁Ͱ͔ͳΓί ϛϡχέʔγϣϯ͕औΕΔɻ • ͪΌΜͱಈ͍ͯͳ͍ͱ͖͸ɺͱΓ͋͑ͣɺʮOh no...ʯͱ͔ݴ ͑͹఻Θͬͨɻ 32

Slide 33

Slide 33 text

22:30 WordPress ͷίΞίϛολʔͷ ocean90 ͔Βɺhttps://input-inspector.now.sh/ ΩʔϘʔυͷೖྗΠϕϯτΛՄࢹԽ͢ΔπʔϧΛ ڭ͑ͯ΋Β͏ɻ 33

Slide 34

Slide 34 text

Slide 35

Slide 35 text

͜ΕҎ߱ɺ 1. Ella ͞Μ͕ Gutenberg Λमਖ਼ 2. ๻ͷखݩͷ WordPress ʹΠϯετʔϧɺݕূɻ 3. ಈ࡞ใࠂͱɺhttps://input-inspector.now.sh/ ͷ݁ՌΛ࿈བྷɻ 4. ݴޠԽɺӳޠԽ͠ʹ͍͘Ϟϊ͸ɺಈըΛࡱͬͯͦΕΛڞ༗ɻ ͱ͍͏ྲྀΕͰमਖ਼ɾݕূ͕ਐΉɻ 10~20෼ʹҰ౓͜ΕΛࢼͯ͠ʔͱ͍͏࿈བྷ͕དྷΔͷͰɺͦΕΛͻ ͨ͢Βݕূɻ 35

Slide 36

Slide 36 text

23:30 ʮWordPress 5.0 RCʯͷϚΠϧετʔ ϯɺʮ[Priority] Highʯ͕ઃఆ͞ΕΔɻ • ͜ͷ໰୊͕ɺॏཁͳ໰୊ͱίϛο λʔਞ͕൑அͨ͠ɻ • ͜Ε͕ղܾ͞Εͳ͍ݶΓ WordPress 5.0 RC (ϦϦʔεީิ൛) ͸ग़ՙ͞Ε ͳ͍ɻ ͱ͍͏͜ͱ͕ܾ·Δɻ҆৺ͨ͠ͱಉ࣌ ʹɺۤ࿑͕ใΘΕͨؾ͕ͨ͠ɻ 36

Slide 37

Slide 37 text

11.16 0:35 ๻ͷใࠂͨ͠ɺIssue ͕ Chrome Ͱղܾ͞Εͨ͜ͱΛ֬ೝɻ ΄͔ͷϒϥ΢βͰ΋ಈ࡞͍ͯ͠Δ͜ͱΛ֬ೝɻ 0:49 master ϒϥϯν΁ͷ൓өɻ 01:00 ͝Ζ ΄͔ͷϒϩοΫͰ΋ͻͱ·ͣେৎ෉ͦ͏ͳ͜ͱΛɺToru ͞Μ͕ ใࠂ 37

Slide 38

Slide 38 text

https://github.com/WordPress/gutenberg/pull/11908 38

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

ͦͷޙɺͳΜ΍͔Μ΍͋ͬͯɺ Gutenberg 4.4 / WordPress 5 beta 5ϦϦʔε 42

Slide 43

Slide 43 text

݁ہ๻͕΍ͬͨ͜ͱ ݁ہ๻͕΍ͬͨ͜ͱ 1. ౉͞Εͨ ϓϥάΠϯΛΠϯετʔϧͯ͠ɺೖྗςετ 2. https://input-inspector.now.sh/ ͷ݁ՌΛใࠂ 3. εΫϦʔϯΩϟϓνϟࡱӨɻGithubʹషΔͨΊʹɺgif ʹม׵ɻ 4. ͱΓ͋͑ͣGoogle ຋༁Ͱίϝϯτͱ͔ΛಡΉɻ 5. OK!!! ͱ͔ Oh No.. ͱ͔ݴ͏ɻͪΐͬͱෳࡶͳ͜ͱݴ͍ͨ͘ͳͬͨΒɺ Google ຋༁ɻ 43

Slide 44

Slide 44 text

ඞཁͳεΩϧɺϞϊ • Making WordPressͷSlackΞΧ΢ϯτɻ • WordPress.org ΞΧ΢ϯτͱҰॹʹऔΕΔɻ • Github ΞΧ΢ϯτ • WordPress ؀ڥɻʢͳΜͰ΋͍͍ɻʣ • Google ຋༁ɻ 44

Slide 45

Slide 45 text

͋ͬͨΒศརͳεΩϧ • ͪΐͬͱͷ Git ྗɻ • npm install, npm run build ग़དྷͳͯ͘΋ɺzip ͰσʔλΛૹͬͯ͘ΕͨͷͰɺ΄Μͱʹඞਢ Ͱ͸ແ͍ɻ 45

Slide 46

Slide 46 text

ಛผͳεΩϧ͸ඞཁͳ͍ 46

Slide 47

Slide 47 text

• ಈըࡱӨͷ΍Γํ͸ͦͷ৔Ͱάάͬͨɻ • SlackɺGithub͸ยͬ୺͔ΒGoogle຋༁ʹ͔͚ͨɻ • ྑ͘ղΒΜ୯ޠ΋άάͬͨΒࣙॻ͕ग़ͯ͘Δɻ 47

Slide 48

Slide 48 text

ಈըࡱӨ mov ౳͸ Github ͷίϝϯτʹషΕͳ͍ͷͰɺGif Ξχϝʹม׵͢ Δɻ Windows : ScreenToGif: Ωϟϓνϟ͔ΒGifੜ੒·ͰҰൃͰग़དྷΔɻ mac 1. command + shift + 5 Ͱ mov ࡱӨ 2. ffmpeg Ͱ mov -> gif ͕؆୯ɻCLI. $ ffmpeg -i issue.mov -r 24 issue.gif 48

Slide 49

Slide 49 text

OSS ͸ڞಉ࡞ۀͷ΍Γํ youknowriad: Awesome collaboration work on this PR OSS͸ΈΜͳͰιϑτ΢ΣΞΛΑ͍ͯ͘͘͠Ұͭͷํ๏ɻ 49

Slide 50

Slide 50 text

͍͔ͭͩΕ͔͕উखʹ͸௚ͯ͘͠Εͳ͍ɻ • ͦ΋ͦ΋ӳޠͰ͔͠ύιίϯΛ࢖͍ͬͯͳ͍ਓ͸͓ͦΒ͘͜ ͷෆ۩߹ΛൃݟͰ͖͍ͯͳ͍ɻCJK ͕฼ࠃޠͳਓ͸΍ͬͺΓ গͳ͍ɻ • ใࠂ͞Εͯ΋ɺਖ਼௚Α͘Θ͔Βͳ͍͔Βςετ΋ͮ͠Β͍ɻ • όάϨϙʔτɾςετʹࢀՃ͢Δ͜ͱɺॏେͳ໰୊ͩͱײ͡ ΔͷͰ͋Ε͹ɺSlack ʹಥܸͯ͠ҙݟΛڼ͙ɺॏཁɻ 50

Slide 51

Slide 51 text

ʮWordPress όάͬͯΔΑͶʔɻʯ ʮGutenberg ͹͙ͬͯΔΑͶʔʯͱ SNSͷย۱Ͱ΅΍͍͍ͯΔ͚ͩͰ͸ɺ Կ΋ղܾ͠ͳ͍ɻΈΜͳෆ޾ɻ 51

Slide 52

Slide 52 text

• SNS ͷย۱Ͱจ۟Λݴ͍ͬͯΔ͚ͩͰ͸ɺෆ۩߹͸௚Βͳ͍ ͠ɺݴΘΕͨଆ΋DisΒΕͨ͜ͱ͔͠఻Θͬͯ͜ͳ͍ͷͰɺෆ ޾͕ෆ޾Λੜ࢈͢Δ͚ͩɻ • όάϨϙʔτʹ͢Δ͜ͱͰɺੜ࢈తͳ΍ΓͱΓʹɻ • 4.3 ͷෆ۩߹͕ղফ͞Εͳ͍··ग़ՙ͞Ε͍ͯͨΒͱ૝૾͢ Δͱɺ΄ΜͱʹڪΖ͍͠ɻ 52

Slide 53

Slide 53 text

ͳͥ๻ʹϦϓϥΠ͕ඈΜͰ͖ͨͷ͔ɻ • ͨ·ͨ·ɺ͜ͷ݅Ͱใࠂ͍ͯͨ͠ਓؒͷதͰɺSlack ͕͓ٳ ΈϞʔυʹͳ͍ͬͯͳ͔ͬͨɻͨ·ͨ·ɺݱ৔ʹډ߹Θͤͨ ͚ͩɻ • ͋ͱɺ̍࣌ؒ஗͔ͬͨΒ… 53

Slide 54

Slide 54 text

݁ہίϛϡχέʔγϣϯॏཁɻ • ʮςετ͘Β͍ͩͬͨΒԶʹ΋ग़དྷΔͧʂʯͱ͍͏ਓ͸ɺί ϝϯτ͢Δ͜ͱ͕ॏཁɻ૬ख΋୭ʹ૬ஊͨ͠Βྑ͍ͷ͔͸ղ Βͳ͍ɻ • Issue Λใࠂ͢ΔɺSlack Ͱίϝϯτ͢Δͱ͍͏͜ͱ͸ɺ։ ൃʹࢀՃ͍ͨ͠ʂͱ͍͏ҙࢥදࣔɻ 54

Slide 55

Slide 55 text

๣؍ऀޮՌ΄Μͱʹ͜Θ͍ɻ ๣؍ऀޮՌʢ΅͏͔Μ͠Ό͜͏͔,ӳ:bystander effectʣͱ͸ɺ ࣾձ৺ཧֶͷ༻ޠͰ͋Γɺूஂ৺ཧͷҰͭɻ͋Δࣄ݅ʹର͠ ͯɺࣗ෼Ҏ֎ʹ๣؍ऀ͕͍Δ࣌ʹ཰ઌͯ͠ߦಈΛى͜͞ͳ͍৺ ཧͰ͋Δɻ๣؍ऀ͕ଟ͍΄ͲɺͦͷޮՌ͸ߴ͍ɻ wikipedia ΑΓɻ 55

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

• ௚Βͳ͍͔Βɺ೉͍͠໰୊ͳͷͰ͸ŋŋŋ → ͩΕ΋ใࠂͯ͠ͳ ͍ɻ • ͩΕ͔ใࠂͯͨ͠Β໎࿭ͳͷͰ͸ŋŋŋ → ॏෳ͍ͯ͠ΔͳΒ ͦͬͪʹ༠ಋͯ͘͠ΕΔ͠ɺෳ਺Ͱى͍ͬͯ͜Δ͜ͱ͕Մࢹ Խ͞ΕΔɺใࠂ͞Εͳ͍͜ͱͷํ͕໰୊ɻ • ผʹΠϥοͱ͞Εͳ͍͔Βେৎ෉ɻ5෼ௐ΂ͯͦΕͬΆ͍ Ϟϊ͕ແ͚Ε͹ใࠂ͞Εͯͳ͍ͱࢥͬͯ issue ॻ͘ɻ 59

Slide 60

Slide 60 text

໨ΜۄʹͳΖ͏ɻ • ίΞͷ Slack, Trac, Github Ͱٞ࿦ͷٞ࿦ʹࢀՃ͢Δ͜ͱ͕େ ࣄɻʮ୭͔͕୅දͯ͠ŋŋŋʯ͸ͦͷਓҰਓͷ໰୊ʹ͔͠ݟ͑ͳ ͍ɻ • ʮे෼ͳ໨Μۄ͕͋Ε͹ɺશͯͷόά͸ચ͍ग़͞ΕΔʯ(Ϧʔ φεͷ๏ଇ) 60

Slide 61

Slide 61 text

Slack Ͱͷ APAC Timezone ͷϛʔςΟϯά΋࢝·ͬͨɻ #coreɺ#core-editor Ͱ͸ɺ೔ຊ࣌ؒͷ ޕޙʹ΋ɺϛʔςΟϯά͕࢝·ͬͨɻ • #core-editor Λݟ͍ͯΔͱɺʮ͜Ε ࠶ݱ͢ΔʁʯΈ͍ͨͳ࿩΋ଟ͍ɻ 61

Slide 62

Slide 62 text

όάϨϙʔτॻ͘ͷ͸ͦ͜·ͰେมͰ͸ͳ͍ɻ 1. ೔ຊޠͰॻ͘ɻ 2. Google ຋༁ʹ͔͚Δ 3. εΫϦʔϯγϣοτɾಈըɻ ׂͱӳޠྗແͯ͘΋ɺͳΜͱ͔ͳΔಈը͸Ғେɻ 62

Slide 63

Slide 63 text

େ੾ͳͷ͸ɺ·ͣɺ఻͑Α͏ͱ͢Δ͜ͱɻ Ұ౓ͷ Issue Ͱશ෦఻ΘΔͱ͸ࢥΘͳ͍ɻ 63

Slide 64

Slide 64 text

• νϟοτʹࢀՃ͢ΔɺνϟοτͰίϛϡχέʔγϣϯΛऔͬ ͯΈΔɺ࣭໰ͯ͠ΈΔɻ • ʮ͛͐͢ʂʯͬͯݴ͏͚ͩͰ΋ҹ৅มΘΔɻ • Issue Λॻ͘ɻ • طʹ͋ΔɺIssue / Pull Request ʹಈ࡞ใࠂ͢Δɻ ͜Μͳͱ͜Ζ͔ΒॳΊͯΈ·ͤΜ͔ɻ 64

Slide 65

Slide 65 text

͋ͳ͕ͨݺͼ·͠ΐ͏ɺফ๷ं!!! 65

Slide 66

Slide 66 text

͋ͳ͕ͨॻ͖·͠ΐ͏ɺόάϨϙʔτ!!! 66

Slide 67

Slide 67 text

Thanks! • @Toro_Unit on Twitter and WordPress.org • @torounit on Github and Making WordPress 67