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

Transcript

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. View Slide

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

   View Slide

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. 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. View Slide

40. View Slide

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. View Slide

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