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
カスタムフィールド製造業からの脱却 〜ブロックエディター(Gutenberg)をカスタムする方法〜
Search
Shizumi Yoshiaki
November 02, 2019
Programming
0
2.8k
カスタムフィールド製造業からの脱却 〜ブロックエディター(Gutenberg)をカスタムする方法〜
WordCampTokyo 2019のセッションにて発表しました登壇資料です。
デモについては、
https://sl.shizum.in/wct2019-demo
こちらをご確認ください。
Shizumi Yoshiaki
November 02, 2019
Tweet
Share
More Decks by Shizumi Yoshiaki
See All by Shizumi Yoshiaki
今日から始めるfunctions.phpカスタマイズ入門
shizumi
0
500
こんなこともできるWP-CLI 〜0から触ってみよう!〜
shizumi
4
830
カスタムフィールド製造業からの脱却 〜オリジナルブロックエディタからGutenbergへ〜
shizumi
4
1.4k
Other Decks in Programming
See All in Programming
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
890
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.3k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
600
CSC509 Lecture 08
javiergs
PRO
0
240
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
310
モテるデスク環境
mozumasu
3
1.2k
Devvox Belgium - Agentic AI Patterns
kdubois
1
140
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
How to Ace a Technical Interview
jacobian
280
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Designing Experiences People Love
moore
142
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Writing Fast Ruby
sferik
630
62k
Building an army of robots
kneath
305
46k
Optimizing for Happiness
mojombo
379
70k
Transcript
None
ΧελϜϑΟʔϧυۀ͔Βͷ٫ ʙϒϩοΫΤσΟλʔʢ(VUFOCFSHʣΛΧελϜ͢Δํ๏ʙ ͣ͠Έʢ੩ւٛ໌ʣ
ࣗݾհ ઐֶߍଔۀޙྲྀ௨ؔͷϓϩάϥϚʹ ݁ࠗΛظʹୀ৬ಠཱͯ͠8FCۀքʹ ݱࡏגࣜձࣾαϯφφͱגࣜձࣾ$*&-ͷऔ కߍͷඇৗۈߨࢣ͍ͬͯ·͢ ۽ຊ8PSE1SFTT.FFUVQΦʔΨφΠβʔ 5XJUUFS!4IJ[VNJ 'BDFCPPL!:PTIJBLJ4IJ[VNJ ൃදऀۙӨʢ̑લʣ
ΧελϜϑΟʔϧυۀͬͯʁ
ΧελϜϑΟʔϧυۀͬͯʁ ͜ͷݴ༿͕ҙຯ͢Δͷֹ໘௨Γ ΧελϜϑΟʔϧυۀͳΒͼʹ8FCΞηϯϒϥʔͱ͍͏৬ۀʹ͍ͭͯ$BQJUBM1 IUUQTDBQJUBMQKQXIBUJTDVTUPNGJFMEJOEVTUPSZBOEXFCBTTFNCMFS Ͱ͋Δɻ ΧελϜϑΟʔϧυΛۦͯ͠ 8PSE1SFTTαΠτΛ࡞Δࣄ
(VUFOCFSHͱϒϩοΫΤσΟλʔ
ࠓߦΘΕ͍ͯΔηογϣϯͷλΠτϧʢҰ෦ʣ (VUFOCFSHͱϒϩοΫΤσΟλʔ ɾθϩ͔Βֶ΅͏ʂϒϩοΫΤσΟλʔʢ(VUFOCFSHʣଜ্ࢠ͞Μ ɾσβΠϯࣄྫͰݟΔ8PSE1SFTTͷΧελϚΠζͱ ϒϩοΫΤσΟλʔʢ(VUFOCFSHʣͰมΘΔະདྷੴ௩ઍت͞Μ ɾΧελϜϑΟʔϧυۀ͔Βͷ٫ ʙϒϩοΫΤσΟλʔʢ(VUFOCFSHʣΛΧελϜ͢Δํ๏ʙ ͜ͷηογϣϯ
ϒϩοΫΤσΟλʔͬͯ (VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ
8IBUJT(VUFOCFSH ϒϩοΫΤσΟλʔͬͯ(VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ l(VUFOCFSHzJTUIFOBNFPGUIFQSPKFDUUPDSFBUFBOFXFEJUPS FYQFSJFODFGPS8PSE1SFTT IUUQTEFWFMPQFSXPSEQSFTTPSHCMPDLFEJUPSDPOUSJCVUPSTGBR (VUFOCFSHͱʁ (VUFOCFSHͱɺ8PSE1SFTTͷ৽͍͠ΤσΟλʔΛ࡞͢Δ ϓϩδΣΫτͷ໊લͰ͢ɻ
ϒϩοΫΤσΟλʔͬͯ(VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ ৽ΤσΟλΛ࡞͢ΔϓϩδΣΫτͷ͜ͱΛ(VUFOCFSHͱݺͼ·͢ (VUFOCFSHϓϩδΣΫτʹΑͬͯੜͨ͠ ৽͍͠ΤσΟλʔͷ͜ͱΛϒϩοΫΤσΟλͱݺͼ·͢ɻ ͪͳΈʹ݄Ҏલ৽͍͠ΤσΟλʔͷ͜ͱΛ (VUFOCFSHͱݺΜͰ͍·ͨ͠ɻ
(VUFOCFSHϓϩδΣΫτͷͦͷઌʁ ΤσΟλʔΛɺϒϩοΫ Λར༻ͨ͠ܗʹ͢ΔͨΊ ͷج൫උɻ ϑΣʔζ ίϯςϯπͷ֎ଆΛΧε λϚΠζͰ͖ΔΑ͏ʹ͢ Δɻ ϑΣʔζ ίϥϘϨʔγϣϯػೳͷ
࣮ɻڞಉฤू͕Ͱ͖Δ Α͏ʹ͢Δɻ ϑΣʔζʢߏதʣ ެࣜͰෳݴޠΛѻ͏ͨ Ίͷػೳͷಋೖɻ ϑΣʔζʢߏதʣ
(VUFOCFSHϓϩδΣΫτͷͦͷઌʁ ݄ʹ։࠵͞Εͨɺ8PSE$BNQ64ʹͯ8PSE1SFTTͷڞಉ ࢝ऀ.BUU.VMMFOXFHͷߨԋʹΑΓɺఏࣔ͞Ε·ͨ͠ɻ
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘ɹ
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘ ίϯςϯπͷछྨΛબ छྨʹ߹Θͤͨ༰Λొ
"$'Λۦͯ͠࡞ͬͨ ΦϦδφϧͷϒϩοΫΤσΟλʔ "$' "EWBODFE$VTUPN'JFMEͱ͍͏ɺ ΧελϜϑΟʔϧυۀΛࢧ͑Δπʔϧ
͍Ζ͍Ζͳ͕ʜ
͍Ζ͍Ζͳ͕ʜ ɾ ΧελϜϑΟʔϧυʹͯ͢ొ͞ΕΔͨΊɺඪ४ͰαΠτ ݕࡧ͕͑ͳ͍ɻ ɾ ΧελϜϑΟʔϧυݕࡧରʹ͢ΕΑ͍͕ɺݕࡧʹ͕࣌ؒ ͔͔Δɻ ɾ ૢ࡞ϛεͰผςʔϚʹมߋ͞ΕΔͱɺ༰͕Կදࣔ͞Εͳ ͍ɻ
ɾ ผςʔϚΛೖΕͳ͍Α͏ʹ͍ͯ͠·͕ͨ͠ɺೲޙͷ୲ऀ͕ ͍Ζ͍Ζ৮ͬͨΓʜ
هࣄอଘ࣌ʹग़ྗ༰Λ QPTU@DPOUFOUʹॻ͖ࠐΉॲཧΛ Ճ͍ͯ͠·͢ʢͨ͠ʣɻ
ϒϩοΫΤσΟλͷొ
ϒϩοΫΤσΟλʔͷొ
͜Εͬͯࠓ·Ͱ࡞ͬͯͨͷʹ͍ۙʂʂ
͡Ό͋࡞Γม͑ͪΌ͑ྑ͍͡ΌΜʂʂʂ
ʜͱ͍͏͜ͱͰࠓ ϒϩοΫΤσΟλʹ߹Θͤͨ ΧελϚΠζΛ͍ͯ͠·͢
ຊͦͷ࡞ۀͷߟ͑ํʹ͍ͭͯͷ͓Ͱ͢
ࣗ͝ͰϒϩοΫΤσΟλΛΧελϜ͢Δͱ͖ͷ ࢀߟͱͯ͠͝ཡ͍ͩ͘͞
ݟग़͠ཁૉ
͜Ε·Ͱ ɾ ݟग़͠ཁૉͷେ͖ܾ͞ఆ ɾ ը૾ʹ͢Δ͔ͷબ ʢσβΠϯʹґΔʣ
ϒϩοΫΤσΟλʔ ɾ େ͖͞ϨΠΞτͷ બͰରԠ ɾ ը૾ˠΠϯϥΠϯը૾ ͷ༻
ׂίϯςϯπ
͜Ε·Ͱ ɾ ࠨӈʹԿΛஔ͢Δ͔ Λࡉ͔͘બ ɾ ՃͰ͖Δ༰Λݸผ ʹ࠶ઃఆ͢Δඞཁ͕͋ Δ
ϒϩοΫΤσΟλʔ ɾ ΧϥϜϒϩοΫΛ͑ ղܾ ɾ ొ༰ͷ࠶ઃఆෆ ཁ ɾ ΧϥϜΧϥϜ͝ͱ ͷԣ෯ʢͰࢦఆʣͷ
ࢦఆՄೳ
ͱɺ͜͜·Ͱ ඪ४Ͱ༻ҙ͞Ε͍ͯΔͷΛ༻͍ͯ͠·͢
͍Ζ͍Ζͱ४උ͞Ε͍ͯΔͷͰ ͜Ε͚ͩͰेศརͰ͢
ͨͩ͠ʜ ग़ྗʹ͍ͭͯௐΛ͢Δඞཁ͕͋Γ·͢
ඪ४ͷग़ྗ <h2>Heading</h2> )5.-
͜͏͍ͨ͠ <div class="grid-x"> <div class="cell"> <h2>Heading</h2> </div> </div> )5.-
ϒϩοΫϑΟϧλͷ CMPDLTHFU4BWF&MFNFOUΛ༻ͯ͠ɺ อଘܗࣜΛॻ͖͑Δ͜ͱ͕Ͱ͖·͢ɻ
+4ͷಡΈࠐΈ function smzberg_boilerplate_block() { wp_register_script( 'smzberg-custom-block', plugins_url( 'js/smzberg.js', __FILE__ ),
[ 'wp-blocks', 'wp-element' ] ); register_block_type( 'smzberg-boilerplate/heading', [ 'editor_script' => 'smzberg-custom-block', ] ); } add_action( 'init', 'smzberg_boilerplate_block' ); 1)1 IUUQTTMTIJ[VNJOXDUEFNP
อଘ༰ΛϑΟϧλΛͬͯॻ͖͑Δ let crel = wp.element.createElement; wp.hooks.addFilter( 'blocks.getSaveElement', 'smzberg-boilerplate/heading', function( element,
blockType, blockAttributes ) { if ( 'core/heading' === blockType.name ) { // 見出し要素の保存形式を変更する return crel( 'div', { className: 'grid-x' }, crel( 'div', { className: 'cell' }, element ) ); } return element; } ); +4 IUUQTTMTIJ[VNJOXDUEFNP
͢ͰʹొࡁΈͷ༰ʹ͍ͭͯ )5.-ͷܗ͕ࣜҟͳΔͨΊฤू ը໘ʹͯΤϥʔϝοηʔδ͕ද ࣔ͞ΕΔɻ ղܾ͢Δ·ͰͦΕ·Ͱͷอଘ ܗࣜͷ··දࣔ͞ΕΔɻ
IUUQTEFWFMPQFSXPSEQSFTTPSHCMPDLFEJUPS EFWFMPQFSTCMPDLBQJCMPDLSFHJTUSBUJPO ৄ͘͠ #MPDL&EJUPS)BOECPPLͷ#MPDL'JMUFSTΛ ͝ཡ͍ͩ͘͞
ඪ४Ͱ༻ҙ͞Ε͍ͯΔ͚Ͳɺ ઃఆ߲͕Γͳ͍ͱ͖ʁ
#MPDL'JMUFSTͰରԠͰ͖·͢ɻ ɾCMPDLTSFHJTUFS#MPDL5ZQF ɾFEJUPS#MPDL&EJU ɾCMPDLTHFU4BWF$POUFOUFYUSB1SPQT
શ͘৽͍͠ϒϩοΫΛ࡞Γ͍ͨ
͓͍߹Θͤઌใ ͜Μͳͷ
͜Ε·Ͱ ɾ ܾ·ͬͨ༰Λॱ൪ʹ ొ͍ͯ͘͠ ɾ ొ࣌ͷݟ͑ํͱαΠ τ্Ͱͷݟ͑ํҟͳ Δ
ϒϩοΫΤσΟλʔ ɾ ෳݸͷೖྗཝ͕ଘࡏ͢Δͷ࡞Ͱ͖Δ ɾ ߘը໘Ͱͷݟͨ$44ΛؤுΕ΄΅ಉ༷ʹ࡞Մೳ
ΧελϜϒϩοΫͷՃํ๏ʁ
SFHJTUFS#MPDL5ZQFΛ༻͠·͢
+4ͷಡΈࠐΈ function smzberg_boilerplate_block() { wp_register_script( 'smzberg-custom-block', plugins_url( 'js/smzberg.js', __FILE__ ),
[ 'wp-blocks', 'wp-element', 'wp-edit' ] ); register_block_type( 'smzberg-boilerplate/heading', [ 'editor_script' => 'smzberg-custom-block', ] ); } add_action( 'init', 'smzberg_boilerplate_block' ); 1)1 IUUQTTMTIJ[VNJOXDUEFNP
ϒϩοΫͷ࡞ ͱͯೖΓ͖Ε ͳ͍ͷͰσϞʂ IUUQTTMTIJ[VNJOXDUEFNP
)BOECPPLʹ ΧελϜϒϩοΫͷՃͷํ๏ νϡʔτϦΞϧͰࡌͬͯ·͢ʂ
#MPDL&EJUPS)BOECPPL ಡΜͰΈ·͠ΐ͏
ӳޠා͘ͳ͍Α (PPHMF༁͕༁ͯ͘͠Ε·͢ɻ ΄΅ҧײͳ͘ಡΊΔΑ͏ʹͳΔͷͰɺར༻͠·͠ΐ͏ɻ
͍Ζ͍Ζࢼߦࡨޡ͠ͳ͕Β͍ͬͯ·͢
ௐ࢝ΊΔͱͪΐͬͱͦ͠͏ʜ ͰҊͣΔΑΓ࢈Ή͕қ͠
࡞Γ͍ͨͷΛਫ਼ࠪͯ͠ཧ͢Δ͜ͱ ͦͯ͠ɺઃܭΛ͔ͬ͠Γ͢Δ͜ͱ
Ͱཱͪࢭ·Γ͗ͣ͢ʹ खಈ͔ͯ͠ΈΔ͜ͱ
खΛಈ͔͢ͷָ͍ͬͯ͠Ͱ͢ΑͶʂ
ࢲઃܭ͕Ұ൪ۤखͰ͢ ͔ͩΒͦ͜ઃܭͰɺཱͪࢭ·Γ͗ͯ͢͠·͏͘Β͍ͳΒɺҰͭσϞ Λ࡞ͬͯ͠·͏ͷख͔ͳͱࢥ͍ͬͯ·͢ɻ ͦ͜Ͱؾͮ͘͜ͱ৭ʑ͋Γ·͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
None