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

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

WordCampTokyo 2019のセッションにて発表しました登壇資料です。
デモについては、 https://sl.shizum.in/wct2019-demo こちらをご確認ください。

76e74d380818461ec19cb0fed3e0ad28?s=128

Shizumi Yoshiaki

November 02, 2019
Tweet

Transcript

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

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

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

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

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

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

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

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

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

  11. (VUFOCFSHϓϩδΣΫτͷͦͷઌ͸ʁ ΤσΟλʔΛɺϒϩοΫ Λར༻ͨ͠ܗʹ͢ΔͨΊ ͷج൫੔උɻ ϑΣʔζ ίϯςϯπͷ֎ଆΛΧε λϚΠζͰ͖ΔΑ͏ʹ͢ Δɻ ϑΣʔζ
 ίϥϘϨʔγϣϯػೳͷ

    ࣮૷ɻڞಉฤू͕Ͱ͖Δ Α͏ʹ͢Δɻ ϑΣʔζʢߏ૝தʣ ެࣜͰෳ਺ݴޠΛѻ͏ͨ Ίͷػೳͷಋೖɻ ϑΣʔζʢߏ૝தʣ
  12. (VUFOCFSHϓϩδΣΫτͷͦͷઌ͸ʁ ೥݄ʹ։࠵͞Εͨɺ8PSE$BNQ64ʹͯ8PSE1SFTTͷڞಉ૑ ࢝ऀ.BUU.VMMFOXFHͷߨԋʹΑΓɺఏࣔ͞Ε·ͨ͠ɻ

  13. ͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘ɹ

  14. ͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘

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

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

  17. ͍Ζ͍Ζͳ໰୊఺͕ʜ

  18. ͍Ζ͍Ζͳ໰୊఺͕ʜ ɾ ΧελϜϑΟʔϧυʹ͢΂ͯొ࿥͞ΕΔͨΊɺඪ४Ͱ͸αΠτ಺ ݕࡧ͕࢖͑ͳ͍ɻ ɾ ΧελϜϑΟʔϧυ΋ݕࡧର৅ʹ͢Ε͹Α͍͕ɺݕࡧʹ͕࣌ؒ ͔͔Δɻ ɾ ૢ࡞ϛε౳ͰผςʔϚʹมߋ͞ΕΔͱɺ಺༰͕Կ΋දࣔ͞Εͳ ͍ɻ

    ɾ ผςʔϚΛೖΕͳ͍Α͏ʹ͍ͯ͠·͕ͨ͠ɺೲ඼ޙͷ୲౰ऀ͕ ͍Ζ͍Ζ৮ͬͨΓʜ
  19. هࣄอଘ࣌ʹग़ྗ಺༰Λ QPTU@DPOUFOUʹॻ͖ࠐΉॲཧΛ ௥Ճ͍ͯ͠·͢ʢͨ͠ʣɻ

  20. ϒϩοΫΤσΟλͷొ৔

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

  22. ͜Εͬͯࠓ·Ͱ࡞ͬͯͨ΋ͷʹ͍ۙʂʂ

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

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

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

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

  27. ݟग़͠ཁૉ

  28. ͜Ε·Ͱ ɾ ݟग़͠ཁૉͷେ͖ܾ͞ఆ ɾ ը૾ʹ͢Δ͔ͷબ୒
 ʢσβΠϯʹґΔʣ

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

  30. ෼ׂίϯςϯπ

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

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

    ࢦఆ΋Մೳ
  33. ͱɺ͜͜·Ͱ͸ ඪ४Ͱ༻ҙ͞Ε͍ͯΔ΋ͷΛ࢖༻͍ͯ͠·͢

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

  35. ͨͩ͠ʜ ग़ྗʹ͍ͭͯ͸ௐ੔Λ͢Δඞཁ͕͋Γ·͢

  36. ඪ४ͷग़ྗ <h2>Heading</h2> )5.-

  37. ͜͏͍ͨ͠ <div class="grid-x"> <div class="cell"> <h2>Heading</h2> </div> </div> )5.-

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

  39. +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
  40. อଘ಺༰ΛϑΟϧλΛ࢖ͬͯॻ͖׵͑Δ 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
  41. ͢Ͱʹొ࿥ࡁΈͷ಺༰ʹ͍ͭͯ )5.-ͷܗ͕ࣜҟͳΔͨΊฤू ը໘ʹͯΤϥʔϝοηʔδ͕ද ࣔ͞ΕΔɻ ղܾ͢Δ·Ͱ͸ͦΕ·Ͱͷอଘ ܗࣜͷ··දࣔ͞ΕΔɻ

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

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

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

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

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

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

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

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

  50. SFHJTUFS#MPDL5ZQFΛ࢖༻͠·͢

  51. +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
  52. ϒϩοΫͷ࡞੒ ͱͯ΋ೖΓ͖Ε ͳ͍ͷͰσϞʂ IUUQTTMTIJ[VNJOXDUEFNP

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

  54. #MPDL&EJUPS)BOECPPL΋
 ಡΜͰΈ·͠ΐ͏

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

  56. ͍Ζ͍Ζࢼߦࡨޡ͠ͳ͕Β΍͍ͬͯ·͢

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

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

  59. Ͱ΋ཱͪࢭ·Γ͗ͣ͢ʹ ख΋ಈ͔ͯ͠ΈΔ͜ͱ

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

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

  62. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ

  63. None