Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp t...
Search
Toro_Unit (Hiroshi Urabe)
November 02, 2019
Technology
2
4.2k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
Toro_Unit (Hiroshi Urabe)
November 02, 2019
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
Cloudflare Meetup Nagano Vol.3
torounit
1
63
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.5k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.7k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
390
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
430
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
560
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
860
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
Other Decks in Technology
See All in Technology
みんなで育てるNewsPicksのSLO
troter
4
1k
【ServiceNow SNUG Meetup LT deck】ServiceNow「検索性の進化」ZingからNow Assistまで
niwato
1
280
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
5
690
View Transition API
shirakaba
1
820
モジュラーモノリスでスケーラブルなシステムを作る - BASE のリアーキテクチャのいま
panda_program
7
1.7k
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.4k
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略 / phper-kaigi-2025-ryu
carta_engineering
0
670
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
2
530
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
130
3/26 クラウド食堂LT #2 GenU案件を通して学んだ教訓 登壇資料
ymae
1
120
ClineにNext.jsのプロジェクト改善をお願いしてみた / 20250321_reacttokyo_LT
optim
1
1.1k
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
180
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Unsuck your backbone
ammeep
669
57k
Producing Creativity
orderedlist
PRO
344
40k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.2k
Speed Design
sergeychernyshev
28
850
Typedesign – Prime Four
hannesfritz
41
2.6k
A better future with KSS
kneath
238
17k
4 Signs Your Business is Dying
shpigford
183
22k
The Cult of Friendly URLs
andyhume
78
6.3k
Transcript
1
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) • Frontend Engineer • WordPress
Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 2
Plugins and Themes • Custom Post Type Permalinks • Advanced
Posts Blocks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Vanilla • and more... 3
4
WordPress Meetup Map • React Ͱग़དྷͯ·͢ɻ • https://github.com/torounit/wp-meetup-map • ϓϧϦΫ͍ͩ͘͞ɻ
5
6
ݝদຊࢢ͔Β͖·ͨ͠ • Shinshu WordPress Meetup • ຖճϐβ৯ͬͯ·͢ɻ • ࠓΞυ֗οΫఱࠃ͕দຊಛूɻ •
ߚ༿͕ݟ͝Ζɻ৽ͦɻ 7
͍ 8
2019.11.12 9
WordPress 5.3 ϦϦʔε༧ఆ 10
11ϲ݄લ 11
2018.12.06 12
WordPress 5.0 !!! 13
͓͞Β͍ɿWordPress 5.0 • 1ͿΓͷϝδϟʔΞοϓσʔτ • ͪʹͬͨɺϒϩοΫΤσΟλʔɺGutenberg ͷϚʔδɻ ( ver 4.6
) 14
͜͜ʹࢸΔ·Ͱɺ͍Ζ͍Ζ͋Γ·ͨ͠ 15
ߋʹ1ϲ݄લ 16
2018.11.13 • WordPress 5.0 beta 4, Gutenberg 4.3 ͷϦϦʔεɻ •
Gutenberg 4.3 WordPress ʹϚʔδࡁΈ • ͜ͷ࣌Ͱɺ11/27 ϦϦʔε༧ఆɻ 17
9:00 ͝Ζɻ • ʮGutenberg Ͱຊޠ͕ೖྗग़དྷͳ͍ŋŋŋʯ • ʮ5.0 Beta 4 Ͱຊޠ͕͏·͘ೖྗग़དྷͳ͍ŋŋŋʯ
ͷͭͿ͖͕ͪΒ΄Βͱɻ 18
ຊޠೖྗͷ ෆ۩߹͕ൃੜ!!! 19
• ຊޠೖྗͰɺ1จࣈ͕֬ఆ͞Εͯ͠·͏όάɻ • kakikukeko → ͕ɺʮk͖͚͋͘͜ʯ • https://github.com/WordPress/gutenberg/issues/11813 • ϦετϒϩοΫͰɺશͯͷจࣈͰൃੜɻ
• kakikukeko → ͕ɺʮk͋k͍k͏k͑k͓ʯ • https://github.com/WordPress/gutenberg/issues/11795 20
15:00 ࠒ https://github.com/WordPress/ gutenberg/issues/11795 ΩλδϚ͞Μ͕ issueใࠂɻ ϦετϒϩοΫͷຊޠೖྗ͕͓͔͍͠ ͱ͍͏༰ɻ ͜ͷ͕ɺGutenberg 4.3
͔Βൃੜ͠ ͨ͜ͱɻ 21
23:30 ࠒ https://github.com/WordPress/ gutenberg/issues/11813 ؔ࿈Λൃݟ͠ใࠂɻ Ͳ͏Βɺ <RichText> ͱ͍͏ίϯϙʔ ωϯτΛ͍ͬͯΔͷશͯͰൃੜ͢Δ ͜ͱɻ
ΩλδϚ͞Μͷͱ·ͨผͷέʔεͰ ຊޠೖྗ͕͓͔͍͜͠ͱΛใࠂɻ 22
͜ͷͱ͖ͷ΅͘ͷ͖ͪ 23
γϟϨʹͳΒΜʂʂʂʂ 24
• ϒϩοΫΤσΟλʔΛ͏ͧʂͱ͍͏Ҋ݅ΛఏҊ͍ͯͨ͠ɻ • ͜ͷ··ϦϦʔε͞ΕͨΒɺʮWordPress ͬͯόάͬͯΔΜ Ͱ͠ΐʁʯΈ͍ͨͳ͜ͱΛݴΘΕΔͷɺ৺͕௧͍ɻετϨ εɻ • Classic Editor
ΛೖΕΔͷ͕ͨΓલʹͳΔͱɺࠓ͍ͭɺ ϒϩοΫΤσΟλʔʹ͢Δͷͱ͍͏ɻ • ࠓޙϢʔβʔɾΫϥΠΞϯτʹઆ໌͢ΔͷҰۤ࿑ɻɻɻ 25
UIͰղΓ͘͢όάΔͷɺϓϩμΫτͷ৴༻ʹؔΘΔɻ 26
2018.11.14 • 4.2 Ͱൃੜ͠ͳ͍͜ͱ͕໌ɻ • ΄͔ͷຊਓ͔Βಈ͔ͳ͍Αʔͱͷใࠂ͕͕݅͋Δɻ • ͳΜͱ͔ݪҼ͕ىͬͨ͜ϑΝΠϧͷಛఆʹޭ͕ͨ͠ɺղ Βͣɻ 27
2018.11.15 ͨͪͳ͞Μ͕ɺMaking WordPress (ެࣜ Slack) ͷ #core-editor νϟϯωϧͰใࠂɻ͔͜͜Β͕ಈ͖࢝ΊΔɻ 28
toru ͞ΜʹΑΔৄࡉͳίϝϯτɻ 29
19:18 ίϛολʔͷElla ͞Μ͕ɺΩλδϚ͞Μ ͷ issue ʹίϝϯτɻ Mac ͷ "ͻΒ͕ͳ" ͷຊޠೖྗγε
ςϜΛೖΕͯΈ͚ͨͲɺྑ͘ղΒͳ͍ɻ ͬͱใ͕ཉ͍͠ʂͱͷ͜ͱɻ ͔͜͜Βɺ̍࣌ؒ΄ͲɺΩλδϚ͞Μ ͱɺElla͞ΜͷΓͱΓɻ 30
21:50 31
• ίϛολʔͷ Ella ͞Μ͔Β Gutenberg ͷमਖ਼൛ͷZIP͕ඈΜ Ͱ͘Δɻ͔͜͜Β͠Β͘ɺElla ͞Μ͕ͨ͠ͷΛ͕ख ݩͰݕূ͢Δɻ •
ӳޠྑ͘ղΒͳ͍͚Ͳɺֆจࣈͱ Google ༁Ͱ͔ͳΓί ϛϡχέʔγϣϯ͕औΕΔɻ • ͪΌΜͱಈ͍ͯͳ͍ͱ͖ɺͱΓ͋͑ͣɺʮOh no...ʯͱ͔ݴ ͑Θͬͨɻ 32
22:30 WordPress ͷίΞίϛολʔͷ ocean90 ͔Βɺhttps://input-inspector.now.sh/ ΩʔϘʔυͷೖྗΠϕϯτΛՄࢹԽ͢ΔπʔϧΛ ڭ͑ͯΒ͏ɻ 33
34
͜ΕҎ߱ɺ 1. Ella ͞Μ͕ Gutenberg Λमਖ਼ 2. ͷखݩͷ WordPress ʹΠϯετʔϧɺݕূɻ
3. ಈ࡞ใࠂͱɺhttps://input-inspector.now.sh/ ͷ݁ՌΛ࿈བྷɻ 4. ݴޠԽɺӳޠԽ͠ʹ͍͘ϞϊɺಈըΛࡱͬͯͦΕΛڞ༗ɻ ͱ͍͏ྲྀΕͰमਖ਼ɾݕূ͕ਐΉɻ 10~20ʹҰ͜ΕΛࢼͯ͠ʔͱ͍͏࿈བྷ͕དྷΔͷͰɺͦΕΛͻ ͨ͢Βݕূɻ 35
23:30 ʮWordPress 5.0 RCʯͷϚΠϧετʔ ϯɺʮ[Priority] Highʯ͕ઃఆ͞ΕΔɻ • ͜ͷ͕ɺॏཁͳͱίϛο λʔਞ͕அͨ͠ɻ •
͜Ε͕ղܾ͞Εͳ͍ݶΓ WordPress 5.0 RC (ϦϦʔεީิ൛) ग़ՙ͞Ε ͳ͍ɻ ͱ͍͏͜ͱ͕ܾ·Δɻ҆৺ͨ͠ͱಉ࣌ ʹɺۤ࿑͕ใΘΕͨؾ͕ͨ͠ɻ 36
11.16 0:35 ͷใࠂͨ͠ɺIssue ͕ Chrome Ͱղܾ͞Εͨ͜ͱΛ֬ೝɻ ΄͔ͷϒϥβͰಈ࡞͍ͯ͠Δ͜ͱΛ֬ೝɻ 0:49 master ϒϥϯνͷөɻ
01:00 ͝Ζ ΄͔ͷϒϩοΫͰͻͱ·ͣେৎͦ͏ͳ͜ͱΛɺToru ͞Μ͕ ใࠂ 37
https://github.com/WordPress/gutenberg/pull/11908 38
39
40
41
ͦͷޙɺͳΜ͔Μ͋ͬͯɺ Gutenberg 4.4 / WordPress 5 beta 5ϦϦʔε 42
݁ہ͕ͬͨ͜ͱ ݁ہ͕ͬͨ͜ͱ 1. ͞Εͨ ϓϥάΠϯΛΠϯετʔϧͯ͠ɺೖྗςετ 2. https://input-inspector.now.sh/ ͷ݁ՌΛใࠂ 3. εΫϦʔϯΩϟϓνϟࡱӨɻGithubʹషΔͨΊʹɺgif
ʹมɻ 4. ͱΓ͋͑ͣGoogle ༁Ͱίϝϯτͱ͔ΛಡΉɻ 5. OK!!! ͱ͔ Oh No.. ͱ͔ݴ͏ɻͪΐͬͱෳࡶͳ͜ͱݴ͍ͨ͘ͳͬͨΒɺ Google ༁ɻ 43
ඞཁͳεΩϧɺϞϊ • Making WordPressͷSlackΞΧϯτɻ • WordPress.org ΞΧϯτͱҰॹʹऔΕΔɻ • Github ΞΧϯτ
• WordPress ڥɻʢͳΜͰ͍͍ɻʣ • Google ༁ɻ 44
͋ͬͨΒศརͳεΩϧ • ͪΐͬͱͷ Git ྗɻ • npm install, npm run
build ग़དྷͳͯ͘ɺzip ͰσʔλΛૹͬͯ͘ΕͨͷͰɺ΄Μͱʹඞਢ Ͱແ͍ɻ 45
ಛผͳεΩϧඞཁͳ͍ 46
• ಈըࡱӨͷΓํͦͷͰάάͬͨɻ • SlackɺGithubย͔ͬΒGoogle༁ʹ͔͚ͨɻ • ྑ͘ղΒΜ୯ޠάάͬͨΒࣙॻ͕ग़ͯ͘Δɻ 47
ಈըࡱӨ 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
OSS ڞಉ࡞ۀͷΓํ youknowriad: Awesome collaboration work on this PR OSSΈΜͳͰιϑτΣΞΛΑ͍ͯ͘͘͠Ұͭͷํ๏ɻ
49
͍͔ͭͩΕ͔͕উखʹͯ͘͠Εͳ͍ɻ • ͦͦӳޠͰ͔͠ύιίϯΛ͍ͬͯͳ͍ਓ͓ͦΒ͘͜ ͷෆ۩߹ΛൃݟͰ͖͍ͯͳ͍ɻCJK ͕ࠃޠͳਓͬͺΓ গͳ͍ɻ • ใࠂ͞Εͯɺਖ਼Α͘Θ͔Βͳ͍͔Βςετͮ͠Β͍ɻ • όάϨϙʔτɾςετʹࢀՃ͢Δ͜ͱɺॏେͳͩͱײ͡
ΔͷͰ͋ΕɺSlack ʹಥܸͯ͠ҙݟΛڼ͙ɺॏཁɻ 50
ʮWordPress όάͬͯΔΑͶʔɻʯ ʮGutenberg ͙ͬͯΔΑͶʔʯͱ SNSͷย۱Ͱ΅͍͍ͯΔ͚ͩͰɺ Կղܾ͠ͳ͍ɻΈΜͳෆɻ 51
• SNS ͷย۱Ͱจ۟Λݴ͍ͬͯΔ͚ͩͰɺෆ۩߹Βͳ͍ ͠ɺݴΘΕͨଆDisΒΕͨ͜ͱ͔͠Θͬͯ͜ͳ͍ͷͰɺෆ ͕ෆΛੜ࢈͢Δ͚ͩɻ • όάϨϙʔτʹ͢Δ͜ͱͰɺੜ࢈తͳΓͱΓʹɻ • 4.3 ͷෆ۩߹͕ղফ͞Εͳ͍··ग़ՙ͞Ε͍ͯͨΒͱ૾͢
Δͱɺ΄ΜͱʹڪΖ͍͠ɻ 52
ͳͥʹϦϓϥΠ͕ඈΜͰ͖ͨͷ͔ɻ • ͨ·ͨ·ɺ͜ͷ݅Ͱใࠂ͍ͯͨ͠ਓؒͷதͰɺSlack ͕͓ٳ ΈϞʔυʹͳ͍ͬͯͳ͔ͬͨɻͨ·ͨ·ɺݱʹډ߹Θͤͨ ͚ͩɻ • ͋ͱɺ͔̍࣌ؒͬͨΒ… 53
݁ہίϛϡχέʔγϣϯॏཁɻ • ʮςετ͘Β͍ͩͬͨΒԶʹग़དྷΔͧʂʯͱ͍͏ਓɺί ϝϯτ͢Δ͜ͱ͕ॏཁɻ૬ख୭ʹ૬ஊͨ͠Βྑ͍ͷ͔ղ Βͳ͍ɻ • Issue Λใࠂ͢ΔɺSlack Ͱίϝϯτ͢Δͱ͍͏͜ͱɺ։ ൃʹࢀՃ͍ͨ͠ʂͱ͍͏ҙࢥදࣔɻ
54
؍ऀޮՌ΄Μͱʹ͜Θ͍ɻ ؍ऀޮՌʢ΅͏͔Μ͠Ό͜͏͔,ӳ:bystander effectʣͱɺ ࣾձ৺ཧֶͷ༻ޠͰ͋Γɺूஂ৺ཧͷҰͭɻ͋Δࣄ݅ʹର͠ ͯɺࣗҎ֎ʹ؍ऀ͕͍Δ࣌ʹઌͯ͠ߦಈΛى͜͞ͳ͍৺ ཧͰ͋Δɻ؍ऀ͕ଟ͍΄ͲɺͦͷޮՌߴ͍ɻ wikipedia ΑΓɻ 55
56
57
ʮ͋ͳ͕ͨݺͼ·͠ΐ͏!!! ফं!!!ʯ ©ͷΓ͚ͭխय़ʗখֶؗ ʰ͋͠ΘͤΞ ϑϩాதʱ4רΑΓ 58
• Βͳ͍͔Βɺ͍͠ͳͷͰŋŋŋ → ͩΕใࠂͯ͠ͳ ͍ɻ • ͩΕ͔ใࠂͯͨ͠Β໎ͳͷͰŋŋŋ → ॏෳ͍ͯ͠ΔͳΒ ͦͬͪʹ༠ಋͯ͘͠ΕΔ͠ɺෳͰى͍ͬͯ͜Δ͜ͱ͕Մࢹ
Խ͞ΕΔɺใࠂ͞Εͳ͍͜ͱͷํ͕ɻ • ผʹΠϥοͱ͞Εͳ͍͔Βେৎɻ5ௐͯͦΕͬΆ͍ Ϟϊ͕ແ͚Εใࠂ͞Εͯͳ͍ͱࢥͬͯ issue ॻ͘ɻ 59
ΜۄʹͳΖ͏ɻ • ίΞͷ Slack, Trac, Github ͰٞͷٞʹࢀՃ͢Δ͜ͱ͕େ ࣄɻʮ୭͔͕දͯ͠ŋŋŋʯͦͷਓҰਓͷʹ͔͠ݟ͑ͳ ͍ɻ •
ʮेͳΜۄ͕͋Εɺશͯͷόάચ͍ग़͞ΕΔʯ(Ϧʔ φεͷ๏ଇ) 60
Slack Ͱͷ APAC Timezone ͷϛʔςΟϯά࢝·ͬͨɻ #coreɺ#core-editor Ͱɺຊ࣌ؒͷ ޕޙʹɺϛʔςΟϯά͕࢝·ͬͨɻ • #core-editor
Λݟ͍ͯΔͱɺʮ͜Ε ࠶ݱ͢ΔʁʯΈ͍ͨͳଟ͍ɻ 61
όάϨϙʔτॻ͘ͷͦ͜·ͰେมͰͳ͍ɻ 1. ຊޠͰॻ͘ɻ 2. Google ༁ʹ͔͚Δ 3. εΫϦʔϯγϣοτɾಈըɻ ׂͱӳޠྗແͯ͘ɺͳΜͱ͔ͳΔಈըҒେɻ 62
େͳͷɺ·ͣɺ͑Α͏ͱ͢Δ͜ͱɻ Ұͷ Issue Ͱશ෦ΘΔͱࢥΘͳ͍ɻ 63
• νϟοτʹࢀՃ͢ΔɺνϟοτͰίϛϡχέʔγϣϯΛऔͬ ͯΈΔɺ࣭ͯ͠ΈΔɻ • ʮ͛͐͢ʂʯͬͯݴ͏͚ͩͰҹมΘΔɻ • Issue Λॻ͘ɻ • طʹ͋ΔɺIssue
/ Pull Request ʹಈ࡞ใࠂ͢Δɻ ͜Μͳͱ͜Ζ͔ΒॳΊͯΈ·ͤΜ͔ɻ 64
͋ͳ͕ͨݺͼ·͠ΐ͏ɺফं!!! 65
͋ͳ͕ͨॻ͖·͠ΐ͏ɺόάϨϙʔτ!!! 66
Thanks! • @Toro_Unit on Twitter and WordPress.org • @torounit on
Github and Making WordPress 67