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

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

E03953e0c18d776fead147601fdc3899?s=128

Toro_Unit (Hiroshi Urabe)

November 02, 2019
Tweet

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