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

Transcript

1. 1

2. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Engineer • WordPress

   Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 2

3. Plugins and Themes • Custom Post Type Permalinks • Advanced

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

4. 4

5. WordPress Meetup Map • React Ͱग़དྷͯ·͢ɻ • https://github.com/torounit/wp-meetup-map • ϓϧϦΫ͍ͩ͘͞ɻ

   5

6. 6

7. ௕໺ݝদຊࢢ͔Β͖·ͨ͠ • Shinshu WordPress Meetup • ຖճϐβ৯ͬͯ·͢ɻ • ࠓ໷Ξυ֗οΫఱࠃ͕দຊಛूɻ •

   ߚ༿͕ݟ͝Ζɻ৽ͦ͹ɻ 7

8. ͸͍ 8

9. 2019.11.12 9

10. WordPress 5.3 ϦϦʔε༧ఆ 10

11. 11ϲ݄લ 11

12. 2018.12.06 12

13. WordPress 5.0 !!! 13

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

    ) 14

15. ͜͜ʹࢸΔ·Ͱɺ͍Ζ͍Ζ͋Γ·ͨ͠ 15

16. ߋʹ1ϲ݄લ 16

17. 2018.11.13 • WordPress 5.0 beta 4, Gutenberg 4.3 ͷϦϦʔεɻ •

    Gutenberg 4.3 ͸ WordPress ʹϚʔδࡁΈ • ͜ͷ࣌఺Ͱ͸ɺ11/27 ϦϦʔε༧ఆɻ 17

18. 9:00 ͝Ζɻ • ʮGutenberg Ͱ೔ຊޠ͕ೖྗग़དྷͳ͍ŋŋŋʯ • ʮ5.0 Beta 4 Ͱ೔ຊޠ͕͏·͘ೖྗग़དྷͳ͍ŋŋŋʯ

    ౳ͷͭͿ΍͖͕ͪΒ΄Βͱɻ 18

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

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

    • kakikukeko → ͕ɺʮk͋k͍k͏k͑k͓ʯ • https://github.com/WordPress/gutenberg/issues/11795 20

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

    ͔Βൃੜ͠ ͨ͜ͱ΋ɻ 21

22. 23:30 ࠒ https://github.com/WordPress/ gutenberg/issues/11813 ๻΋ؔ࿈໰୊Λൃݟ͠ใࠂɻ Ͳ͏΍Βɺ <RichText> ͱ͍͏ίϯϙʔ ωϯτΛ࢖͍ͬͯΔ΋ͷશͯͰൃੜ͢Δ ͜ͱɻ

    ΩλδϚ͞Μͷͱ͸·ͨผͷέʔεͰ೔ ຊޠೖྗ͕͓͔͍͜͠ͱΛใࠂɻ 22

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

24. γϟϨʹͳΒΜʂʂʂʂ 24

25. • ϒϩοΫΤσΟλʔΛ࢖͏ͧʂͱ͍͏Ҋ݅ΛఏҊ͍ͯͨ͠ɻ • ͜ͷ··ϦϦʔε͞ΕͨΒɺʮWordPress ͬͯόάͬͯΔΜ Ͱ͠ΐʁʯΈ͍ͨͳ͜ͱΛݴΘΕΔͷ͸ɺ৺͕௧͍ɻετϨ εɻ • Classic Editor

    ΛೖΕΔͷ͕౰ͨΓલʹͳΔͱɺࠓ౓͸͍ͭɺ ϒϩοΫΤσΟλʔʹ͢Δͷͱ͍͏໰୊ɻ • ࠓޙϢʔβʔɾΫϥΠΞϯτʹઆ໌͢Δͷ΋Ұۤ࿑ɻɻɻ 25

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

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

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

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

30. 19:18 ίϛολʔͷElla ͞Μ͕ɺΩλδϚ͞Μ ͷ issue ʹίϝϯτɻ Mac ͷ "ͻΒ͕ͳ" ౳ͷ೔ຊޠೖྗγε

    ςϜΛೖΕͯΈ͚ͨͲɺྑ͘ղΒͳ͍ɻ ΋ͬͱ৘ใ͕ཉ͍͠ʂͱͷ͜ͱɻ ͔͜͜Βɺ̍࣌ؒ΄ͲɺΩλδϚ͞Μ ͱɺElla͞Μͷ΍ΓͱΓɻ 30

31. 21:50 31

32. • ίϛολʔͷ Ella ͞Μ͔Β Gutenberg ͷमਖ਼൛ͷZIP͕ඈΜ Ͱ͘Δɻ͔͜͜Β͠͹Β͘ɺElla ͞Μ͕௚ͨ͠΋ͷΛ๻͕ख ݩͰݕূ͢Δɻ •

    ӳޠྑ͘ղΒͳ͍͚Ͳɺֆจࣈͱ Google ຋༁Ͱ͔ͳΓί ϛϡχέʔγϣϯ͕औΕΔɻ • ͪΌΜͱಈ͍ͯͳ͍ͱ͖͸ɺͱΓ͋͑ͣɺʮOh no...ʯͱ͔ݴ ͑͹఻Θͬͨɻ 32

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

34. 34

35. ͜ΕҎ߱ɺ 1. Ella ͞Μ͕ Gutenberg Λमਖ਼ 2. ๻ͷखݩͷ WordPress ʹΠϯετʔϧɺݕূɻ

    3. ಈ࡞ใࠂͱɺhttps://input-inspector.now.sh/ ͷ݁ՌΛ࿈བྷɻ 4. ݴޠԽɺӳޠԽ͠ʹ͍͘Ϟϊ͸ɺಈըΛࡱͬͯͦΕΛڞ༗ɻ ͱ͍͏ྲྀΕͰमਖ਼ɾݕূ͕ਐΉɻ 10~20෼ʹҰ౓͜ΕΛࢼͯ͠ʔͱ͍͏࿈བྷ͕དྷΔͷͰɺͦΕΛͻ ͨ͢Βݕূɻ 35

36. 23:30 ʮWordPress 5.0 RCʯͷϚΠϧετʔ ϯɺʮ[Priority] Highʯ͕ઃఆ͞ΕΔɻ • ͜ͷ໰୊͕ɺॏཁͳ໰୊ͱίϛο λʔਞ͕൑அͨ͠ɻ •

    ͜Ε͕ղܾ͞Εͳ͍ݶΓ WordPress 5.0 RC (ϦϦʔεީิ൛) ͸ग़ՙ͞Ε ͳ͍ɻ ͱ͍͏͜ͱ͕ܾ·Δɻ҆৺ͨ͠ͱಉ࣌ ʹɺۤ࿑͕ใΘΕͨؾ͕ͨ͠ɻ 36

37. 11.16 0:35 ๻ͷใࠂͨ͠ɺIssue ͕ Chrome Ͱղܾ͞Εͨ͜ͱΛ֬ೝɻ ΄͔ͷϒϥ΢βͰ΋ಈ࡞͍ͯ͠Δ͜ͱΛ֬ೝɻ 0:49 master ϒϥϯν΁ͷ൓өɻ

    01:00 ͝Ζ ΄͔ͷϒϩοΫͰ΋ͻͱ·ͣେৎ෉ͦ͏ͳ͜ͱΛɺToru ͞Μ͕ ใࠂ 37

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

39. 39

40. 40

41. 41

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

43. ݁ہ๻͕΍ͬͨ͜ͱ ݁ہ๻͕΍ͬͨ͜ͱ 1. ౉͞Εͨ ϓϥάΠϯΛΠϯετʔϧͯ͠ɺೖྗςετ 2. https://input-inspector.now.sh/ ͷ݁ՌΛใࠂ 3. εΫϦʔϯΩϟϓνϟࡱӨɻGithubʹషΔͨΊʹɺgif

    ʹม׵ɻ 4. ͱΓ͋͑ͣGoogle ຋༁Ͱίϝϯτͱ͔ΛಡΉɻ 5. OK!!! ͱ͔ Oh No.. ͱ͔ݴ͏ɻͪΐͬͱෳࡶͳ͜ͱݴ͍ͨ͘ͳͬͨΒɺ Google ຋༁ɻ 43

44. ඞཁͳεΩϧɺϞϊ • Making WordPressͷSlackΞΧ΢ϯτɻ • WordPress.org ΞΧ΢ϯτͱҰॹʹऔΕΔɻ • Github ΞΧ΢ϯτ

    • WordPress ؀ڥɻʢͳΜͰ΋͍͍ɻʣ • Google ຋༁ɻ 44

45. ͋ͬͨΒศརͳεΩϧ • ͪΐͬͱͷ Git ྗɻ • npm install, npm run

    build ग़དྷͳͯ͘΋ɺzip ͰσʔλΛૹͬͯ͘ΕͨͷͰɺ΄Μͱʹඞਢ Ͱ͸ແ͍ɻ 45

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

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

48. ಈըࡱӨ 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

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

    49

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

    ΔͷͰ͋Ε͹ɺSlack ʹಥܸͯ͠ҙݟΛڼ͙ɺॏཁɻ 50

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

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

    Δͱɺ΄ΜͱʹڪΖ͍͠ɻ 52

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

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

    54

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

56. 56

57. 57

58. ʮ͋ͳ͕ͨݺͼ·͠ΐ͏!!! ফ๷ं!!!ʯ ©ͷΓ͚ͭխय़ʗখֶؗ ʰ͋͠ΘͤΞ ϑϩాதʱ4רΑΓ 58

59. • ௚Βͳ͍͔Βɺ೉͍͠໰୊ͳͷͰ͸ŋŋŋ → ͩΕ΋ใࠂͯ͠ͳ ͍ɻ • ͩΕ͔ใࠂͯͨ͠Β໎࿭ͳͷͰ͸ŋŋŋ → ॏෳ͍ͯ͠ΔͳΒ ͦͬͪʹ༠ಋͯ͘͠ΕΔ͠ɺෳ਺Ͱى͍ͬͯ͜Δ͜ͱ͕Մࢹ

    Խ͞ΕΔɺใࠂ͞Εͳ͍͜ͱͷํ͕໰୊ɻ • ผʹΠϥοͱ͞Εͳ͍͔Βେৎ෉ɻ5෼ௐ΂ͯͦΕͬΆ͍ Ϟϊ͕ແ͚Ε͹ใࠂ͞Εͯͳ͍ͱࢥͬͯ issue ॻ͘ɻ 59

60. ໨ΜۄʹͳΖ͏ɻ • ίΞͷ Slack, Trac, Github Ͱٞ࿦ͷٞ࿦ʹࢀՃ͢Δ͜ͱ͕େ ࣄɻʮ୭͔͕୅දͯ͠ŋŋŋʯ͸ͦͷਓҰਓͷ໰୊ʹ͔͠ݟ͑ͳ ͍ɻ •

    ʮे෼ͳ໨Μۄ͕͋Ε͹ɺશͯͷόά͸ચ͍ग़͞ΕΔʯ(Ϧʔ φεͷ๏ଇ) 60

61. Slack Ͱͷ APAC Timezone ͷϛʔςΟϯά΋࢝·ͬͨɻ #coreɺ#core-editor Ͱ͸ɺ೔ຊ࣌ؒͷ ޕޙʹ΋ɺϛʔςΟϯά͕࢝·ͬͨɻ • #core-editor

    Λݟ͍ͯΔͱɺʮ͜Ε ࠶ݱ͢ΔʁʯΈ͍ͨͳ࿩΋ଟ͍ɻ 61

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

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

64. • νϟοτʹࢀՃ͢ΔɺνϟοτͰίϛϡχέʔγϣϯΛऔͬ ͯΈΔɺ࣭໰ͯ͠ΈΔɻ • ʮ͛͐͢ʂʯͬͯݴ͏͚ͩͰ΋ҹ৅มΘΔɻ • Issue Λॻ͘ɻ • طʹ͋ΔɺIssue

    / Pull Request ʹಈ࡞ใࠂ͢Δɻ ͜Μͳͱ͜Ζ͔ΒॳΊͯΈ·ͤΜ͔ɻ 64

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

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

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

    Github and Making WordPress 67