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.7k
本当にだれにでもできる、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)
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
180
Cloudflare Meetup Nagano Vol.3
torounit
1
75
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.6k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.8k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / 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
440
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
570
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
870
Other Decks in Technology
See All in Technology
ローカル環境でAIを動かそう!
falken
PRO
1
170
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
4
1.5k
GigaViewerにおけるMackerel APM導入の裏側
7474
0
460
Babylon.jsでゲームを作ってみよう
limes2018
0
100
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
1.2k
AIの電力問題を概観する
rmaruy
1
210
S3 Tables を図解でやさしくおさらい~基本から QuickSight 連携まで/s3-tables-illustrated-basics-quicksight
emiki
1
330
Slackひと声でブログ校正!Claudeレビュー自動化編
yusukeshimizu
3
180
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
300
令和最新版TypeScriptでのnpmパッケージ開発
lycorptech_jp
PRO
0
110
やさしいClaude Code入門
minorun365
PRO
32
24k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Being A Developer After 40
akosma
91
590k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
4 Signs Your Business is Dying
shpigford
183
22k
Site-Speed That Sticks
csswizardry
7
590
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A designer walks into a library…
pauljervisheath
205
24k
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