カスタムフィールド製造業からの脱却〜ブロックエディター（Gutenberg）をカスタムする方法〜

ΧελϜϑΟʔϧυ੡଄ۀ͔Βͷ୤٫ ʙϒϩοΫΤσΟλʔʢ(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຋༁͕຋༁ͯ͘͠Ε·͢ɻ ΄΅ҧ࿨ײͳ͘ಡΊΔΑ͏ʹͳΔͷͰɺར༻͠·͠ΐ͏ɻ

͍Ζ͍Ζࢼߦࡨޡ͠ͳ͕Β΍͍ͬͯ·͢

ௐ΂࢝ΊΔͱͪΐͬͱ೉ͦ͠͏ʜ Ͱ΋ҊͣΔΑΓ࢈Ή͕қ͠

࡞Γ͍ͨ΋ͷΛਫ਼ࠪͯ͠੔ཧ͢Δ͜ͱ ͦͯ͠ɺઃܭΛ͔ͬ͠Γ͢Δ͜ͱ

Ͱ΋ཱͪࢭ·Γ͗ͣ͢ʹ ख΋ಈ͔ͯ͠ΈΔ͜ͱ

खΛಈ͔͢ͷָ͍ͬͯ͠Ͱ͢ΑͶʂ

ࢲ͸ઃܭ͕Ұ൪ۤखͰ͢ ͔ͩΒͦ͜ઃܭͰɺཱͪࢭ·Γ͗ͯ͢͠·͏͘Β͍ͳΒɺҰͭσϞ Λ࡞ͬͯ͠·͏ͷ΋ख͔ͳͱࢥ͍ͬͯ·͢ɻ ͦ͜Ͱؾͮ͘͜ͱ΋৭ʑ͋Γ·͢ɻ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ

カスタムフィールド製造業からの脱却 〜ブロックエディター（Gutenberg）をカスタムする方法〜

カスタムフィールド製造業からの脱却 〜ブロックエディター（Gutenberg）をカスタムする方法〜

More Decks by Shizumi Yoshiaki

Other Decks in Programming

Featured

Transcript

カスタムフィールド製造業からの脱却〜ブロックエディター（Gutenberg）をカスタムする方法〜

カスタムフィールド製造業からの脱却〜ブロックエディター（Gutenberg）をカスタムする方法〜