$30 off During Our Annual Pro Sale. View Details »

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

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

Toro_Unit (Hiroshi Urabe)

November 02, 2019
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

  1. 1

    View Slide

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

    View Slide

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

    View Slide

  4. 4

    View Slide

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

    View Slide

  6. 6

    View Slide

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

    View Slide

  8. ͸͍
    8

    View Slide

  9. 2019.11.12
    9

    View Slide

  10. WordPress 5.3 ϦϦʔε༧ఆ
    10

    View Slide

  11. 11ϲ݄લ
    11

    View Slide

  12. 2018.12.06
    12

    View Slide

  13. WordPress 5.0 !!!
    13

    View Slide

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

    View Slide

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

    View Slide

  16. ߋʹ1ϲ݄લ
    16

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. 21:50
    31

    View Slide

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

    View Slide

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

    View Slide

  34. 34

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. 39

    View Slide

  40. 40

    View Slide

  41. 41

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  56. 56

    View Slide

  57. 57

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide