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
3.8k
本当にだれにでもできる、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
53
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.4k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.6k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.8k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
380
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
410
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
540
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
850
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
Other Decks in Technology
See All in Technology
FastConnect の冗長性
ocise
1
9.4k
AIをプロダクトに実装するならAPIで分離しよう 〜タクシーアプリ『GO』のアーキテクチャ実例紹介〜
74th
2
140
さいきょうのアーキテクチャを生み出すセンスメイキング
jgeem
0
400
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
120
事業継続を支える自動テストの考え方
tsuemura
0
200
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
880
20250130_『SUUMO』の裏側!第2弾 ~機械学習エンジニアリング編
recruitengineers
PRO
1
520
NOSTR, réseau social et espace de liberté décentralisé
rlifchitz
0
160
アーキテクチャわからん、の話
shirayanagiryuji
0
270
アジャイル開発とスクラム
araihara
0
120
マルチデータプロダクト開発・運用に耐えるためのデータ組織・アーキテクチャの遷移
mtpooh
1
390
Kubernetesでメールの大量配信をしている話/k8sjp-20250205
hfukamachi
0
300
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GraphQLとの向き合い方2022年版
quramy
44
13k
Navigating Team Friction
lara
183
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How to train your dragon (web standard)
notwaldorf
90
5.8k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.4k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Become a Pro
speakerdeck
PRO
26
5.1k
KATA
mclloyd
29
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
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