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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Shizumi Yoshiaki
March 26, 2019
Technology
4
1.5k
カスタムフィールド製造業からの脱却 〜オリジナルブロックエディタからGutenbergへ〜
2019年3月27日に開催されたWP Zoom UP #13で発表したミニセッションのスライドです。
Shizumi Yoshiaki
March 26, 2019
Tweet
Share
More Decks by Shizumi Yoshiaki
See All by Shizumi Yoshiaki
今日から始めるfunctions.phpカスタマイズ入門
shizumi
0
530
こんなこともできるWP-CLI 〜0から触ってみよう!〜
shizumi
4
900
カスタムフィールド製造業からの脱却 〜ブロックエディター(Gutenberg)をカスタムする方法〜
shizumi
0
3k
Other Decks in Technology
See All in Technology
GitHub Copilot CLI を使いやすくしよう
tsubakimoto_s
0
110
生成AIと余白 〜開発スピードが向上した今、何に向き合う?〜
kakehashi
PRO
0
170
顧客の言葉を、そのまま信じない勇気
yamatai1212
1
370
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
shibayu36
0
350
配列に見る bash と zsh の違い
kazzpapa3
3
170
コンテナセキュリティの最新事情 ~ 2026年版 ~
kyohmizu
7
2.5k
AWS DevOps Agent x ECS on Fargate検証 / AWS DevOps Agent x ECS on Fargate
kinunori
2
250
会社紹介資料 / Sansan Company Profile
sansan33
PRO
15
400k
量子クラウドサービスの裏側 〜Deep Dive into OQTOPUS〜
oqtopus
0
150
AIが実装する時代、人間は仕様と検証を設計する
gotalab555
1
650
プレビュー版のDevOpsエージェントを現段階で触ってみた
ad_motsu
1
110
Embedded SREの終わりを設計する 「なんとなく」から計画的な自立支援へ
sansantech
PRO
3
2.6k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
We Are The Robots
honzajavorek
0
170
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
300
What does AI have to do with Human Rights?
axbom
PRO
0
2k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
57
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
650
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
310
Ethics towards AI in product and experience design
skipperchong
2
200
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.7k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.1k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Transcript
ΧελϜϑΟʔϧυۀ͔Βͷ٫ ΦϦδφϧϒϩοΫΤσΟλ͔ΒGutenberg ੩ւ ٛ໌ʢͣ͠Έʣ 2019-03-26
ࣗݾհ 1990ʢฏ2ʣੜ·Ε ઐֶߍଔۀޙ ྲྀ௨ؔͷϓϩάϥϚʹ ݁ࠗΛظʹୀ৬ ಠཱͯ͠Webۀքʹ ݱࡏ גࣜձࣾαϯφφ ͷऔక ͍ͬͯ·͢
ߍͷඇৗۈߨࢣ͍ͬͯ·͢ Twitter : @Shizumi0705 ൃදऀۙӨʢ̑લʣ
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘ɹ
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘ ίϯςϯπͷछྨΛબ छྨʹ߹Θͤͨ༰Λొ
ACFΛۦͯ͠࡞ͬͨ ΦϦδφϧͷϒϩοΫΤσΟλ
͍Ζ͍Ζͳ͕…
͍Ζ͍Ζͳ͕… ɾ ΧελϜϑΟʔϧυʹͯ͢ొ͞ΕΔͨΊɺجຊతʹݕࡧʹֻ͔Βͳ͍ɻ ɾ ΧελϜϑΟʔϧυݕࡧରʹ͢ΕΑ͍͕ɺݕࡧʹ͕͔͔࣌ؒΔɻ ɾ ૢ࡞ϛεͰผςʔϚʹมߋ͞ΕΔͱɺ༰͕Կදࣔ͞Εͳ͍ɻ ɾ ผςʔϚΛೖΕͳ͍Α͏ʹ͍ͯ͠·͕ͨ͠ɺೲޙͷ୲ऀ͕͍Ζ͍Ζ৮ͬͨΓ…
هࣄอଘ࣌ʹग़ྗ༰Λ post_contentʹॻ͖ࠐΉॲཧΛ Ճ͍ͯ͠·͢ɻ
Gutenbergͷొ
Gutenbergͷొ
͜Εͬͯࠓ·Ͱ࡞ͬͯͨͷʹ͍ۙʂʂ
͡Ό͋࡞Γม͑ͪΌ͑ྑ͍͡ΌΜʂʂʂ
…ͱ͍͏͜ͱͰࠓ Gutenbergʹ߹Θͤͨ ઃܭͷΓ͠Λ͍ͯ͠·͢
ຊͦͷ࡞ۀͷߟ͑ํʹ͍ͭͯͷ͓Ͱ͢
ࣗ͝ͰGutenbergΛΧελϜ͢Δͱ͖ͷ ߟ͑ํͷҰྫͱͯ͠ޚཡ͍ͩ͘͞
ݟग़͠ཁૉ
͜Ε·Ͱ ɾ ݟग़͠ཁૉͷେ͖ܾ͞ఆ ɾ ը૾ʹ͢Δ͔ͷબʢσβΠϯʹґΔʣ
Gutenberg ɾ େ͖͞ϨΠΞτͷબͰରԠ ɾ ը૾ˠΠϯϥΠϯը૾ͷ༻
ׂίϯςϯπ
͜Ε·Ͱ ɾ ࠨӈʹԿΛஔ͢Δ͔Λࡉ͔͘બ ɾ ՃͰ͖Δ༰Λݸผʹ࠶ઃఆ͢Δඞ ཁ͕͋Δ
Gutenberg ɾ ΧϥϜϒϩοΫΛ͑ղܾ ɾ ొ༰ͷ࠶ઃఆෆཁ
ͱɺ͜͜·Ͱ ඪ४Ͱ༻ҙ͞Ε͍ͯΔͷΛ༻͍ͯ͠·͢
͍Ζ͍Ζͱ४උ͞Ε͍ͯΔͷͰศརͰ͢
ͨͩ͠… ग़ྗʹ͍ͭͯௐΛ͢Δඞཁ͕͋Γ·͢
௨ৗͷग़ྗ <h2>test</h2>
͜͏͍ͨ͠ <div class="grid_10 prefix_1 suffix_1”> <h2>test</h2> </div>
ϒϩοΫϑΟϧλͷ blocks.getSaveElement Λ༻͢Δ͜ͱͰɺ อଘܗࣜΛॻ͖͑Δ͜ͱ͕Ͱ͖·͢ɻ
https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/ ৄ͘͠ Gutenberg Handbook ͷ Block Filters Λ ޚཡ͍ͩ͘͞
ඪ४Ͱ༻ҙ͞Ε͍ͯΔ͚Ͳɺ ઃఆ߲͕Γͳ͍ͱ͖ʁ
Block Filters Λۦ͢Δ͜ͱͰରԠͰ͖·͢ɻ ɾblocks.registerBlockType ɾeditor.BlockEdit ɾblocks.getSaveContent.extraProps
શ͘৽͍͠ϒϩοΫΛ࡞Γ͍ͨ
͓͍߹Θͤઌใ ͜Μͳͷ
͜Ε·Ͱ ɾ ܾ·ͬͨ༰Λॱ൪ʹొ͍ͯ͘͠ ɾ ొ࣌ͷݟ͑ํͱαΠτ্Ͱͷݟ͑ํ ҟͳΔ
Gutenberg ɾ ෳݸͷೖྗཝ͕ଘࡏ͢Δͷ࡞Ͱ͖Δ ɾ ߘը໘ͰͷݟͨCSSΛؤுΕ΄΅ಉ༷ʹ࡞Մೳ
ΧελϜϒϩοΫͷՃํ๏ʁ
registerBlockTypeΛ༻͠·͢
HandbookʹΧελϜϒϩοΫͷ Ճͷํ๏νϡʔτϦΞϧͰࡌͬͯ·͢ʂ
ͪΒͬͱGoogleϚοϓͷݕࡧݟ͚͑ͨͲ…
GoogleϚοϓͷݕࡧ
ਖ਼Ұ൪ઃܭ͢Δ্Ͱհͩͳ͊ͱ ࢥ͍ͬͯ·͢
PlaceSearchAPI͋ΔͷͰ ࡞Δ͜ͱՄೳͰ͢
ΫϥΠΞϯτ͝ͱʹAPIΩʔͷઃఆ͕ඞཁͳͷͰ ͦͷลΓผ్ը໘͕ඞཁʹͳΓͦ͏
Gutenberg͔ΒΕΔͷͰਂೖΓ͠·ͤΜ
ొ͑͞Ͱ͖Ε දࣔʹؔͯ͜͠Ε·Ͱಉ༷ʹͰ͖Δͣ
දࣔ༻ͷJS1͔͠ ग़ྗ͠ͳ͍ͱ͍͏෦
ηογϣϯ·ͰʹௐΑ͏ͱࢥ͍ͬͯ·͕ͨ͠ ؒʹ߹͍·ͤΜͰͨ͠ ͝ΊΜͳ͍͞
࣍ୈͰରԠͰ͖ΔͣͰ͢ʂ
ͱɺ͜Μͳײ͡ͰΰϦΰϦઃܭΛਐΊ͍ͯ·͢ɻ
ਖ਼ࢲ·ͩ·ͩษڧதͰ͢
࡞Γํʹ͍ͭͯઌਓୡ͕͍Βͬ͠ΌΔͷͰ ͦͷํͨͪͷใΛ ࢀߟʹ͍͖ͤͯͨͩ͞·͠ΐ͏
Gutenberg HandbookಡΜͰΈ·͠ΐ͏ mimi͞Μ͕ઌఔհ͞Ε·ͨ͠Ͷ
ӳޠා͘ͳ͍Α ֶੜͨͪʹ͍ͭݴ͏ݴ༿Ͱ͢ ࢲۤखͰ͢
ηογϣϯΛ࡞Δʹ͋ͨΓ ͍Ζ͍ΖͬͯΈ·͕ͨ͠
ௐ࢝ΊΔͱͪΐͬͱͦ͠͏ͳͷͰ͕͢ ҊͣΔΑΓ࢈Ή͕қ͠
࡞Γ͍ͨͷΛΏͬ͘Γਫ਼ࠪͯ͠ཧ͢Δ͜ͱ ͦͯ͠ɺઃܭΛ͔ͬ͠Γ͢Δ͜ͱ
Ͱཱͪࢭ·Γ͗ͣ͢ʹखಈ͔ͯ͠ΈΔ͜ͱ
खΛಈ͔͢ͷָ͍ͬͯ͠Ͱ͢ΑͶʂ
ࢲઃܭ͕Ұ൪ۤखͰ͢
ͦͯ͠…
࣮·ͩΛͦΉ͚͍ͯΔ͕͋Γ·͢
͜Ε·ͰͷΧελϜϑΟʔϧυͷ༰ post_metaʹઃఆ͞Ε͍ͯ·͢
ਖ਼ࣜʹҠߦ͢ΔͷͰ͋Ε ͜Είϯόʔτ͠ͳ͚ΕͳΓ·ͤΜ
͜ͷลͷରॲͱ͔օ͞Μʹฉ͍ͯΈ͍ͨ͜ͱ͕ ͨ͘͞Μ͋Γ·͢ʂ
ͥͻ͜ͷ͋ͱͷ࠙ձͰ օ͞Μͱใަ͍ͤͯͩ͘͞͞ʂ
ݟ͍͖ͯͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
Any Questions?