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

Transcript

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