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
March 26, 2019
Technology
3
1.2k
カスタムフィールド製造業からの脱却 〜オリジナルブロックエディタから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
400
こんなこともできるWP-CLI 〜0から触ってみよう!〜
shizumi
4
660
カスタムフィールド製造業からの脱却 〜ブロックエディター(Gutenberg)をカスタムする方法〜
shizumi
0
2.3k
Other Decks in Technology
See All in Technology
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
地理情報とAPIのトレンド
nagix
0
160
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
700
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.1k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
The Language of Interfaces
destraynor
151
23k
Adopting Sorbet at Scale
ufuk
71
8.8k
KATA
mclloyd
20
13k
RailsConf 2023
tenderlove
16
720
Art, The Web, and Tiny UX
lynnandtonic
291
20k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
4 Signs Your Business is Dying
shpigford
178
21k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Side Projects
sachag
451
42k
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?