$30 off During Our Annual Pro Sale. View Details »

ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021

ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021

#wcjpn2021

WordCamp Japan 2021 の登壇資料です。

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

  1. ϒϩοΫΤσΟλʔΛ༻͍ͨWEB
    αΠτ։ൃͱΧελϜϑΟʔϧυͷ
    ͋ΓํΛߟ͑Δɻ
    WordCamp Japan 2021 / Toro_Unit
    1

    View Slide

  2. $ whoami
    2

    View Slide

  3. Toro_Unit /઎෦ ߛ (͏Β΂ ͻΖ͠)
    • Frontend Engineer
    • WordPress Plugin and Theme
    Developer
    • ௕໺ݝদຊࢢࡏॅɻձࣾ͸ࡳຈɻ
    Github: @torounit
    Twi/er: @Toro_Unit
    3

    View Slide

  4. Gutenberg ΁ͷίϯτϦϏϡʔτ
    • ೔ຊޠೖྗͷόάใࠂ&ςετ
    • ΧελϜHTMLϒϩοΫͷϓϨϏϡʔػೳ΁ͷ editor-style ͷద
    ༻ɻ
    • wp-env ͷ destroy ػೳɻ
    • όάϑΟοΫεͱ͔ɻ
    4

    View Slide

  5. 2018೥຤ɺϒϩοΫΤσΟλʔ͕
    WordPress ʹಋೖ͞Εͨ௚ޙ͔ΒϒϩοΫ
    ΤσΟλʔΛ͕ͬͭΓ׆༻ͨ͠αΠτΛ
    ࡞͖ͬͯ·ͨ͠ɻ
    5

    View Slide

  6. 6

    View Slide

  7. Ҿ༻ݩɿӡ༻΋࠷େݶߟྀʂίʔϙϨʔταΠτͰͷϒϩοΫΤσΟλϑϧ׆༻ͷࣄྫ / WordCamp Osaka 2019 ௕୩઒޺෢ 7

    View Slide

  8. ϒϩοΫΤσΟλʔҎલ
    8

    View Slide

  9. Ҿ༻ݩɿΧελϜϑΟʔϧυ੡଄ۀ͔Βͷ୤٫ ʙϒϩοΫΤσΟλʔʢGutenbergʣΛΧελϜ͢Δํ๏ʙ / Shizumi Yoshiaki 9

    View Slide

  10. ΫϥγοΫΤσΟλʔͰ͸ԣฒͼ౳ͷϨΠΞ΢τͷ࣮ݱ͕ͱͯ΋
    ೉͍͠ͷͰɺϨΠΞ΢τΛݻΊ্ͨͰೖྗཝʹίϯςϯπΛૠೖ
    ͍ͨ͠ͱ͍͏ཉٻɾཁ݅ɻ
    ΧελϜϑΟʔϧυͷϓϥάΠϯͰϨΠΞ΢τͳͲΛ੍ޚɻηΫ
    γϣϯ͝ͱͷݟग़͠ɺίϯςϯπೖྗཝɻ
    ฤूը໘ͷUIΛ੍ޚ͢Δํ๏ = ΧελϜϑΟʔϧυ
    10

    View Slide

  11. σϝϦοτ
    • WordPress ͷݕࡧʹҾ͔͔ͬΒͳ͍ɻ
    • ௨ৗͷςʔϚͷ࡞ΓํͰ͸ίϯςϯπ͕ग़ྗ͞Εͳ͍ɻ
    11

    View Slide

  12. ϒϩοΫΤσΟλʔҎޙ
    • ϒϩοΫύλʔϯ / ϒϩοΫςϯϓϨʔτΛ༻͍Δ͜ͱͰɺUX
    Λ޲্͔ͭɺσϝϦοτ͕ղܾ͞Εͨɻ
    • γϣʔτίʔυͳͲɺWYSIWYG తʹඍົͳػೳ΋ɺμΠφ
    ϛοΫϒϩοΫͰ௚ײతͳฤू͕Մೳʹɻ
    12

    View Slide

  13. ΧελϜϑΟʔϧυ͸ෆཁʹͳͬͨͷ͔ʁ
    13

    View Slide

  14. ͦΜͳ͜ͱ͸ແ͍ŋŋŋ
    14

    View Slide

  15. Usecase
    • Πϕϯτ৘ใ౳Ͱɺهࣄͷެ։೔࣌ͱผͷ೔࣌ͷઃఆɻ( WP_Query ౳Ͱ
    ։࠵೔ॱʹग़ྗ)
    • ঎඼Ձ֨ɾαΠζɻ( WP_Query ౳ͰɺՁ֨ॱɺαΠζॱͳͲͰͷιʔτ)
    • ౤ߘαϜωΠϧͷΑ͏ͳϞϊ͕ෳ਺ඞཁɻ(هࣄ಺ͷը૾Λผϖʔδ౳Ͱ
    ग़ྗ)
    • CSV Ͱͷσʔλͷ౤ೖɻ
    15

    View Slide

  16. ೖྗཝΛ࡞ΔͨΊ͚ͩͷΧε
    λϜϑΟʔϧυ͸ࢮΜ͕ͩɺ
    σʔλߏ଄ͱͯ͠ͷΧελϜ
    ϑΟʔϧυ͸ࠓޙ΋࢒Δ
    16

    View Slide

  17. 17

    View Slide

  18. ࠓ·Ͱ௨Γͷ΍ΓํͰΧελϜϑΟʔϧυΛ੍ޚ͢ΔσϝϦοτ
    • ೖྗཝ͕ڱ͍ɻUIͱͯ͠ඍົʢεΫϩʔϧ͢Ε͹ݟ͑·͕͢ʣ
    • ΧελϜϑΟʔϧυͷσʔλΛϒϩοΫͰ༻͍Δ͜ͱ͕೉͠
    ͍ɻʢΧελϜϑΟʔϧυ͸ɺهࣄΛอଘ͠ͳ͍ͱ൓ө͞Εͳ
    ͍ʣ
    18

    View Slide

  19. ղܾࡦΛߟ͑Δ
    • ϒϩοΫΤσΟλʔͷUXͱΧελϜϑΟʔϧυͷೖྗ͕γʔϜ
    ϨεԽ͞ΕΕ͹ྑ͍ɻ
    • ϒϩοΫΤσΟλʔଆ͔ΒΧελϜϑΟʔϧυΛૢ࡞͢Δ͜ͱ
    Λߟ͑Δɻ
    19

    View Slide

  20. Create Meta Block | Block Editor Handbook | WordPress Developer
    Resources
    handbook ʹ͋ΔɺΧελϜϑΟʔϧυΛѻ͏ϒϩοΫͷνϡʔτ
    ϦΞϧɻ
    20

    View Slide

  21. import { registerBlockType } from '@wordpress/blocks';
    import { TextControl } from '@wordpress/components';
    import { useSelect } from '@wordpress/data';
    import { useEntityProp } from '@wordpress/core-data';
    import { useBlockProps } from '@wordpress/block-editor';
    registerBlockType( 'myguten/meta-block', {
    title: 'Meta Block',
    icon: 'smiley',
    category: 'text',
    edit( { setAttributes, attributes } ) {
    const blockProps = useBlockProps();
    const postType = useSelect(
    ( select ) => select( 'core/editor' ).getCurrentPostType(),
    []
    );
    const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
    const metaFieldValue = meta[ 'myguten_meta_block_field' ];
    function updateMetaValue( newValue ) {
    setMeta( { ...meta, myguten_meta_block_field: newValue } );
    }
    return (

    label="Meta Block Field"
    value={ metaFieldValue }
    onChange={ updateMetaValue }
    />

    );
    },
    } );
    21

    View Slide

  22. 22

    View Slide

  23. ϒϩοΫΛ࡞Δ࣌ʹߟྀ͢Δ͜ͱ
    • ctrl+c (cmd+c) ౳ͷγϣʔτΧοτΩʔ͕ҙਤ௨Γʹಈ͔͘ʁ Ͱೖ
    ྗཝΛ࡞Δͷ͕ϕλʔͬΆ͍ɻ
    • ϒϩοΫ͕ফ͑ͨͱ͖ʹΧελϜϑΟʔϧυ͸ͦͷ··Ͱ͍͍ͷ͔ʁ
    • ϒϩοΫ͕ෳ਺࡞ΒΕͳ͍Α͏ʹɺ "supports": { "multiple":
    false }
    • save Ͱ௚઀ΧελϜϑΟʔϧυͷ஋ΛऔΓग़͢͜ͱ͕ग़དྷͳ͍ͷͰɺ΍Γ͍ͨ
    ৔߹͸ɺa0ributes ͱͯ͠ผʹఆٛ͢Δඞཁ͋Γɻ(αΠτ಺ݕࡧ౳ͰͷϢʔε
    έʔεʣ
    23

    View Slide

  24. αϯϓϧ
    24

    View Slide

  25. 25

    View Slide

  26. 26

    View Slide

  27. αϯϓϧͷ Githubɻ
    h"ps:/
    /github.com/torounit/post-meta-block-example
    27

    View Slide

  28. ՝୊ײ
    • ࠓͷͱ͜ΖɺϑΟʔϧυ͝ͱʹϒϩοΫΛ࡞੒ͨ͠ํ͕Αͦ͞
    ͏ɻWordPress ͷ API ଆͰͷܕͷ੍໿͕ڧ͍ͷͰɺͳΜʹͰ΋
    ࢖͑ΔϒϩοΫΈ͍ͨͳͷ͸ݫͦ͠͏ɻ
    • [type="email"], [type="number"] ౳ͷϑΟʔϧυΛ࢖͏ͱ஋ͷί
    ϐʔ͕ग़དྷͳ͍ɻ(ϒϩοΫͷίʔυ͕ίϐʔ͞ΕΔ)
    • όϦσʔγϣϯʹ΋৭ʑ޻෉͕ඞཁɻ
    28

    View Slide

  29. ·ͱΊ
    • ϒϩοΫΤσΟλʔ͸ɺΫϥγοΫΤσΟλʔͷTinyMCE๊͕͍͑ͯ
    ͨ໰୊Λղܾ͕ͨ͠ɺͦΕҎ֎ͷ՝୊͸࢒͍ͬͯΔɻ
    • ʮϒϩοΫΤσΟλʔଆ͔Β WordPress Λૢ࡞͢Δʯͱ͍͏ൃ૝͕େ
    ࣄɻJSྗɺReactྗΛ਎ʹ͚ͭΔͱվળͰ͖Δ͜ͱ͕େ෯ʹ૿͑Δɻ
    • Gutenberg ͸ɺhandbook ʹίϯτϦϏϡʔτ͢Δͱɺ͜͏͍ͬͨ஌
    ͕ࣝೖͬͯ͘Δɻษڧͷ࠷୹ͷಓͷΓ͸ɺιʔε΍υΩϡϝϯςʔ
    γϣϯΛಡΜͰίϯτϦϏϡʔτ͢Δ͜ͱɻ
    29

    View Slide