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

by Shizumi Yoshiaki

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

ΧελϜϑΟʔϧυ੡଄ۀ͔Βͷ୤٫ ʙϒϩοΫΤσΟλʔʢ(VUFOCFSHʣΛΧελϜ͢Δํ๏ʙ ͣ͠Έʢ੩ւٛ໌ʣ

Slide 3

Slide 3 text

ࣗݾ঺հ ઐ໳ֶߍଔۀޙྲྀ௨ؔ܎ͷϓϩάϥϚʹ ݁ࠗΛظʹୀ৬ಠཱͯ͠8FCۀքʹ ݱࡏ͸גࣜձࣾαϯφφͱגࣜձࣾ$*&-ͷऔ క໾΍฼ߍͷඇৗۈߨࢣ΋΍͍ͬͯ·͢  ۽ຊ8PSE1SFTT.FFUVQΦʔΨφΠβʔ 5XJUUFS!4IJ[VNJ 'BDFCPPL!:PTIJBLJ4IJ[VNJ ൃදऀۙӨʢ̑೥લʣ

Slide 4

Slide 4 text

ΧελϜϑΟʔϧυ੡଄ۀͬͯʁ

Slide 5

Slide 5 text

ΧελϜϑΟʔϧυ੡଄ۀͬͯʁ ͜ͷݴ༿͕ҙຯ͢Δͷ͸ֹ໘௨Γ ΧελϜϑΟʔϧυ੡଄ۀͳΒͼʹ8FCΞηϯϒϥʔͱ͍͏৬ۀʹ͍ͭͯ$BQJUBM1  IUUQTDBQJUBMQKQXIBUJTDVTUPNGJFMEJOEVTUPSZBOEXFCBTTFNCMFS Ͱ͋Δɻ ΧελϜϑΟʔϧυΛۦ࢖ͯ͠  8PSE1SFTTαΠτΛ࡞Δ࢓ࣄ

Slide 6

Slide 6 text

(VUFOCFSHͱϒϩοΫΤσΟλʔ

Slide 7

Slide 7 text

ࠓ೔ߦΘΕ͍ͯΔηογϣϯͷλΠτϧʢҰ෦ʣ (VUFOCFSHͱϒϩοΫΤσΟλʔ ɾθϩ͔Βֶ΅͏ʂϒϩοΫΤσΟλʔʢ(VUFOCFSHʣଜ্௚ࢠ͞Μ ɾσβΠϯࣄྫͰݟΔ8PSE1SFTTͷΧελϚΠζͱ  ϒϩοΫΤσΟλʔʢ(VUFOCFSHʣͰมΘΔະདྷੴ௩ઍت͞Μ ɾΧελϜϑΟʔϧυ੡଄ۀ͔Βͷ୤٫  ʙϒϩοΫΤσΟλʔʢ(VUFOCFSHʣΛΧελϜ͢Δํ๏ʙ  ͜ͷηογϣϯ

Slide 8

Slide 8 text

ϒϩοΫΤσΟλʔͬͯ (VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ

Slide 9

Slide 9 text

8IBUJT(VUFOCFSH ϒϩοΫΤσΟλʔͬͯ(VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ l(VUFOCFSHzJTUIFOBNFPGUIFQSPKFDUUPDSFBUFBOFXFEJUPS FYQFSJFODFGPS8PSE1SFTT IUUQTEFWFMPQFSXPSEQSFTTPSHCMPDLFEJUPSDPOUSJCVUPSTGBR (VUFOCFSHͱ͸ʁ (VUFOCFSHͱ͸ɺ8PSE1SFTTͷ৽͍͠ΤσΟλʔΛ࡞੒͢Δ  ϓϩδΣΫτͷ໊લͰ͢ɻ

Slide 10

Slide 10 text

ϒϩοΫΤσΟλʔͬͯ(VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ ৽ΤσΟλΛ࡞੒͢ΔϓϩδΣΫτͷ͜ͱΛ(VUFOCFSHͱݺͼ·͢ (VUFOCFSHϓϩδΣΫτʹΑͬͯ஀ੜͨ͠  ৽͍͠ΤσΟλʔͷ͜ͱΛϒϩοΫΤσΟλͱݺͼ·͢ɻ ͪͳΈʹ೥݄Ҏલ͸৽͍͠ΤσΟλʔͷ͜ͱΛ  (VUFOCFSHͱݺΜͰ͍·ͨ͠ɻ

Slide 11

Slide 11 text

(VUFOCFSHϓϩδΣΫτͷͦͷઌ͸ʁ ΤσΟλʔΛɺϒϩοΫ Λར༻ͨ͠ܗʹ͢ΔͨΊ ͷج൫੔උɻ ϑΣʔζ ίϯςϯπͷ֎ଆΛΧε λϚΠζͰ͖ΔΑ͏ʹ͢ Δɻ ϑΣʔζ  ίϥϘϨʔγϣϯػೳͷ ࣮૷ɻڞಉฤू͕Ͱ͖Δ Α͏ʹ͢Δɻ ϑΣʔζʢߏ૝தʣ ެࣜͰෳ਺ݴޠΛѻ͏ͨ Ίͷػೳͷಋೖɻ ϑΣʔζʢߏ૝தʣ

Slide 12

Slide 12 text

(VUFOCFSHϓϩδΣΫτͷͦͷઌ͸ʁ ೥݄ʹ։࠵͞Εͨɺ8PSE$BNQ64ʹͯ8PSE1SFTTͷڞಉ૑ ࢝ऀ.BUU.VMMFOXFHͷߨԋʹΑΓɺఏࣔ͞Ε·ͨ͠ɻ

Slide 13

Slide 13 text

͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘ɹ

Slide 14

Slide 14 text

͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘

Slide 15

Slide 15 text

͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘ ίϯςϯπͷछྨΛબ୒ छྨʹ߹Θͤͨ಺༰Λొ࿥

Slide 16

Slide 16 text

"$'Λۦ࢖ͯ͠࡞ͬͨ ΦϦδφϧͷϒϩοΫΤσΟλʔ "$' "EWBODFE$VTUPN'JFMEͱ͍͏ɺ  ΧελϜϑΟʔϧυ੡଄ۀΛࢧ͑Δπʔϧ

Slide 17

Slide 17 text

͍Ζ͍Ζͳ໰୊఺͕ʜ

Slide 18

Slide 18 text

͍Ζ͍Ζͳ໰୊఺͕ʜ ɾ ΧελϜϑΟʔϧυʹ͢΂ͯొ࿥͞ΕΔͨΊɺඪ४Ͱ͸αΠτ಺ ݕࡧ͕࢖͑ͳ͍ɻ ɾ ΧελϜϑΟʔϧυ΋ݕࡧର৅ʹ͢Ε͹Α͍͕ɺݕࡧʹ͕࣌ؒ ͔͔Δɻ ɾ ૢ࡞ϛε౳ͰผςʔϚʹมߋ͞ΕΔͱɺ಺༰͕Կ΋දࣔ͞Εͳ ͍ɻ ɾ ผςʔϚΛೖΕͳ͍Α͏ʹ͍ͯ͠·͕ͨ͠ɺೲ඼ޙͷ୲౰ऀ͕ ͍Ζ͍Ζ৮ͬͨΓʜ

Slide 19

Slide 19 text

هࣄอଘ࣌ʹग़ྗ಺༰Λ QPTU@DPOUFOUʹॻ͖ࠐΉॲཧΛ ௥Ճ͍ͯ͠·͢ʢͨ͠ʣɻ

Slide 20

Slide 20 text

ϒϩοΫΤσΟλͷొ৔

Slide 21

Slide 21 text

ϒϩοΫΤσΟλʔͷొ৔

Slide 22

Slide 22 text

͜Εͬͯࠓ·Ͱ࡞ͬͯͨ΋ͷʹ͍ۙʂʂ

Slide 23

Slide 23 text

͡Ό͋࡞Γม͑ͪΌ͑͹ྑ͍͡ΌΜʂʂʂ

Slide 24

Slide 24 text

ʜͱ͍͏͜ͱͰࠓ ϒϩοΫΤσΟλʹ߹Θͤͨ ΧελϚΠζΛ͍ͯ͠·͢

Slide 25

Slide 25 text

ຊ೔͸ͦͷ࡞ۀͷߟ͑ํʹ͍ͭͯͷ͓࿩Ͱ͢

Slide 26

Slide 26 text

ࣗ͝਎ͰϒϩοΫΤσΟλΛΧελϜ͢Δͱ͖ͷ ࢀߟͱͯ͠͝ཡ͍ͩ͘͞

Slide 27

Slide 27 text

ݟग़͠ཁૉ

Slide 28

Slide 28 text

͜Ε·Ͱ ɾ ݟग़͠ཁૉͷେ͖ܾ͞ఆ ɾ ը૾ʹ͢Δ͔ͷબ୒  ʢσβΠϯʹґΔʣ

Slide 29

Slide 29 text

ϒϩοΫΤσΟλʔ ɾ େ͖͞͸ϨΠΞ΢τͷ બ୒ͰରԠ ɾ ը૾ˠΠϯϥΠϯը૾ ͷ࢖༻

Slide 30

Slide 30 text

෼ׂίϯςϯπ

Slide 31

Slide 31 text

͜Ε·Ͱ ɾ ࠨӈʹԿΛ഑ஔ͢Δ͔ Λࡉ͔͘બ୒ ɾ ௥ՃͰ͖Δ಺༰Λݸผ ʹ࠶ઃఆ͢Δඞཁ͕͋ Δ

Slide 32

Slide 32 text

ϒϩοΫΤσΟλʔ ɾ ΧϥϜϒϩοΫΛ࢖͑ ͹ղܾ ɾ ొ࿥಺༰ͷ࠶ઃఆ͸ෆ ཁ ɾ ΧϥϜ਺΍ΧϥϜ͝ͱ ͷԣ෯ʢͰࢦఆʣͷ ࢦఆ΋Մೳ

Slide 33

Slide 33 text

ͱɺ͜͜·Ͱ͸ ඪ४Ͱ༻ҙ͞Ε͍ͯΔ΋ͷΛ࢖༻͍ͯ͠·͢

Slide 34

Slide 34 text

͍Ζ͍Ζͱ४උ͞Ε͍ͯΔͷͰ ͜Ε͚ͩͰ΋े෼ศརͰ͢

Slide 35

Slide 35 text

ͨͩ͠ʜ ग़ྗʹ͍ͭͯ͸ௐ੔Λ͢Δඞཁ͕͋Γ·͢

Slide 36

Slide 36 text

ඪ४ͷग़ྗ

Heading

)5.-

Slide 37

Slide 37 text

͜͏͍ͨ͠

Heading

)5.-

Slide 38

Slide 38 text

ϒϩοΫϑΟϧλͷ CMPDLTHFU4BWF&MFNFOUΛ࢖༻ͯ͠ɺ อଘܗࣜΛॻ͖׵͑Δ͜ͱ͕Ͱ͖·͢ɻ

Slide 39

Slide 39 text

+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

Slide 40

Slide 40 text

อଘ಺༰ΛϑΟϧλΛ࢖ͬͯॻ͖׵͑Δ 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

Slide 41

Slide 41 text

͢Ͱʹొ࿥ࡁΈͷ಺༰ʹ͍ͭͯ )5.-ͷܗ͕ࣜҟͳΔͨΊฤू ը໘ʹͯΤϥʔϝοηʔδ͕ද ࣔ͞ΕΔɻ ղܾ͢Δ·Ͱ͸ͦΕ·Ͱͷอଘ ܗࣜͷ··දࣔ͞ΕΔɻ

Slide 42

Slide 42 text

IUUQTEFWFMPQFSXPSEQSFTTPSHCMPDLFEJUPS EFWFMPQFSTCMPDLBQJCMPDLSFHJTUSBUJPO ৄ͘͠͸ #MPDL&EJUPS)BOECPPLͷ#MPDL'JMUFSTΛ ͝ཡ͍ͩ͘͞

Slide 43

Slide 43 text

ඪ४Ͱ༻ҙ͞Ε͍ͯΔ͚Ͳɺ ઃఆ߲໨͕଍Γͳ͍ͱ͖͸ʁ

Slide 44

Slide 44 text

#MPDL'JMUFSTͰରԠͰ͖·͢ɻ ɾCMPDLTSFHJTUFS#MPDL5ZQF ɾFEJUPS#MPDL&EJU ɾCMPDLTHFU4BWF$POUFOUFYUSB1SPQT

Slide 45

Slide 45 text

શ͘৽͍͠ϒϩοΫΛ࡞Γ͍ͨ

Slide 46

Slide 46 text

͓໰͍߹Θͤઌ৘ใ ͜Μͳͷ

Slide 47

Slide 47 text

͜Ε·Ͱ ɾ ܾ·ͬͨ಺༰Λॱ൪ʹ ొ࿥͍ͯ͘͠ ɾ ొ࿥࣌ͷݟ͑ํͱαΠ τ্Ͱͷݟ͑ํ͸ҟͳ Δ

Slide 48

Slide 48 text

ϒϩοΫΤσΟλʔ ɾ ෳ਺ݸͷೖྗཝ͕ଘࡏ͢Δ΋ͷ΋࡞੒Ͱ͖Δ ɾ ౤ߘը໘Ͱͷݟͨ໨͸$44ΛؤுΕ͹΄΅ಉ༷ʹ࡞੒Մೳ

Slide 49

Slide 49 text

ΧελϜϒϩοΫͷ௥Ճํ๏͸ʁ

Slide 50

Slide 50 text

SFHJTUFS#MPDL5ZQFΛ࢖༻͠·͢

Slide 51

Slide 51 text

+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

Slide 52

Slide 52 text

ϒϩοΫͷ࡞੒ ͱͯ΋ೖΓ͖Ε ͳ͍ͷͰσϞʂ IUUQTTMTIJ[VNJOXDUEFNP

Slide 53

Slide 53 text

)BOECPPLʹ͸ ΧελϜϒϩοΫͷ௥Ճͷํ๏΋ νϡʔτϦΞϧͰࡌͬͯ·͢ʂ

Slide 54

Slide 54 text

#MPDL&EJUPS)BOECPPL΋  ಡΜͰΈ·͠ΐ͏

Slide 55

Slide 55 text

ӳޠා͘ͳ͍Α (PPHMF຋༁͕຋༁ͯ͘͠Ε·͢ɻ ΄΅ҧ࿨ײͳ͘ಡΊΔΑ͏ʹͳΔͷͰɺར༻͠·͠ΐ͏ɻ

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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