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
5.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)
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
210
Cloudflare Meetup Nagano Vol.3
torounit
1
100
僕が考える 「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.9k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
420
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
460
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
570
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
890
Other Decks in Technology
See All in Technology
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
5
600
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
260
夢の印税生活 / Life on Royalties
tmtms
0
280
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
180
Product Management Conference -AI時代に進化するPdM-
kojima111
0
220
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
130
広島発!スタートアップ開発の裏側
tsankyo
0
240
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
200
認知戦の理解と、市民としての対抗策
hogehuga
0
320
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.2k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
For a Future-Friendly Web
brad_frost
179
9.9k
Optimizing for Happiness
mojombo
379
70k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Practical Orchestrator
shlominoach
190
11k
It's Worth the Effort
3n
187
28k
Producing Creativity
orderedlist
PRO
347
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
What's in a price? How to price your products and services
michaelherold
246
12k
GitHub's CSS Performance
jonrohan
1031
460k
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