Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23

ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23

[【大阪】Kansai WordPress Meetup@大阪『ブロックエディターについてもっと知ろう!』](https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/295907589/) 登壇資料です。

Toro_Unit (Hiroshi Urabe)

September 23, 2023
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

  1. ブロックエディタをゴリゴリに使い倒してサイトを作った話
    Toro_Unit @Kansai WordPress Meetup 2023.09.23

    View full-size slide

  2. Toro_Unit
    占部 紘 (うらべ ひろし)
    • Frontend Developer
    • WordPress Plugin and Theme
    Developer
    • Gutenberg Team
    Github: @torounit
    Twitter: @Toro_Unit
    3

    View full-size slide

  3. 長野県松本市[^1]からきました
    * 毎回ピザ食ってます。
    * 9/30 @松本
    * 11/18 @松本 (仮)

    View full-size slide

  4. • Gutenberg ͷ։ൃΛͪΐΖͬͱ΍ͬ
    ͯ·͢ɻ
    • Shinshu WP Meetup ͷΦʔΨφΠ
    βʔͯ͠·͢ɻ
    • ϓϥάΠϯ࡞ͬͨΓੲςʔϚ࡞ͬͨ
    Γͯ͠·͢ɻ
    • WordPress ͷΠϕϯτͰ஻ͬͨΓ͓
    ञҿΜͩΓͨ·ʹӡӦख఻ͬͨΓ͠
    ͯ·͢ɻ
    5

    View full-size slide

  5. WordCamp Tokyo 2023
    2023/10/21@༗໌
    ேΠνͷηογϣϯͷύωϧσΟεΧο
    γϣϯʹొஃ͠·͢ɻΑΖ͘͠Ͳ͏ͧɻ
    https://tokyo.wordcamp.org/2023/
    session/session-a1/
    6

    View full-size slide

  6. Agenda
    1. ֓ཁ
    2. ϒϩοΫͷ։ൃʹ͍ͭͯ
    3. ςʔϚଆͷ։ൃ
    4. ϒϩοΫΤσΟλʔΛ࢖͍౗͢͜ͱʹΑΔϝϦοτ
    5. ϒϩοΫ։ൃͰֶͿ΂͖͜ͱ
    6. ՝୊ײ
    7. ͓ؾ࣋ͪද໌
    7

    View full-size slide

  7. ڈ೥ͷ೥຤ʹαΠτΛϦχϡʔΞϧ͠·ͨ͠ɻ
    https://satori.marketing
    • ΢ν͸ WP ଆͷ࣮૷ͱ͔΋Ζ΋Ζ୲౰ɻσβΠϯ͸֎෦ɻ
    • ։ൃظؒ͸ɺ3-4ϲ݄͘Β͍ɻ
    8

    View full-size slide

  8. ϖʔδฤूը໘͸͜Μͳײ͡ɻ
    10

    View full-size slide

  9. ͍͍ͩͨಉ͡ݟͨ໨!
    12

    View full-size slide

  10. • ࡞੒ϒϩοΫ਺ɿ27ݸ
    • ਌ࢠؔ܎ͷϒϩοΫ͸1ͭͷϒϩοΫͱͯ͠Χ΢ϯτ͢Δ
    ͱɺ20ݸ͘Β͍ɻ
    • αΠτͷن໛ʹͯ͠͸͋Μ·Γଟ͘ͳ͍ؾ͕͢Δ͚Ͳɺօ͞
    ΜͲ͏Ͱ͢ʁ
    13

    View full-size slide

  11. ϦχϡʔΞϧͰղܾ͔ٕͨͬͨ͠ज़తͳ՝୊
    • ݻఆϖʔδ / ηϛφʔ৘ใ / ಋೖࣄྫ ౳͕ΧελϜϑΟʔϧ
    υ·ΈΕͰɺߋ৽Ͱ͖ͳ͍ɻ
    • ςϯϓϨʔτଆ΋ if จ·ΈΕͰɺϝϯςφϯε͕ࠔ೉ɻ
    • ڍಈ͕ෆ໌ͱ͔͍Ζ͍Ζɻ
    14

    View full-size slide

  12. • ΧελϜϑΟʔϧυࡇΓͱɺςʔϚ಺ͷ if จࡇΓɺαΠτอकͰ
    ؔΘ͍ͬͯͨࣗ෼ͨͪ΋͍Ζ͍Ζ͠ΜͲ͍ɻ
    • मਖ਼ґཔ͕དྷΔͨͼʹɺίʔυΛमਖ਼͠ɺͦΕΛ֬ೝͯ͠΋Β͏
    ͷ΋ɺͦΕΛผͷαʔόʔʹσϓϩΠͯ͠ݟͯ΋Β͏ඞཁ͕͋
    Γɺ·͊·͊ίετ͕ߴ͍ɻ
    • ӡ༻ऀͷཁ๬Ͱ͍͍ͪͪςΩετमਖ਼ʹςʔϚΛมߋ͢Δͷ͸ɺ
    ͓ޓ͍ʹͱͬͯ໘౗͍͘͞ɻ
    • ͍ͨͨ͜͠ͱͰ͸ແ͍͔΋͚ͩͲɺίεύ͕ѱ͍ɻͦΕ͕ੵ
    Έ্͕ͬͯ৘ใൃ৴ͷεϐʔυ͕஗͘ͳΔɻ
    15

    View full-size slide

  13. ϒϩοΫΤσΟλ΁ͷ׳Εɻ
    • ͠Εͬͱɺ5.0 ͰϒϩοΫΤσΟλʹม͚͑ͨͲɺಛʹԿ΋
    ݴΘΕͣɻ
    • ࠷ॳ͸ΫϥγοΫϒϩοΫͰهࣄΛॻ͍͍͕ͯͨɺঃʑʹϒ
    ϩοΫʹͳ͍ͬͯͬͨɻ
    • ෆ໌఺ͱ͔͸ͪ͜ΒͰ૬ஊʹ৐ͬͨΓɻ
    16

    View full-size slide

  14. શ෦ϒϩοΫΤσΟλʔͰ؅ཧ͢Δํ
    ޲ͰͷϦχϡʔΞϧ
    17

    View full-size slide

  15. ͜ͷҊ݅Λ΍Δ্ͰɺҰ൪େࣄʹͨ͜͠ͱɻ
    ؅ཧը໘͔ΒฤूෆՄೳͳจࣈྻ͸࡞Βͳ͍ɻ
    18

    View full-size slide

  16. • ʮ͜͜͸Ͳ͏΍ͬͯߋ৽͢Δͷʁͷ໰͍ͷલʹɺͦ΋ͦ΋ࣗ
    ෼ͨͪͰߋ৽Ͱ͖Δʁʯͱ͍͏໰͍͕݁ߏ߹ͬͨɻ
    • ͍͍ͪͪͦ͜Λؾʹ͢Δͷͬͯ CMS ͱͯ͠͸Ͳ͏ͳͷʁ
    • ະདྷ͕༧ଌෆՄೳɻઌํͷ޿ใͷํ਑΋൒೥ޙɺ1೥ޙʹม
    ΘΔ͔΋ɻ
    20

    View full-size slide

  17. ࣗ෼ͨͪͷ৘ใൃ৴Λࣗ਎Ͱίϯτϩʔϧ͍͔ͨ͠ΒCMSΛ࢖͏ΜͩΑͶʁ
    21

    View full-size slide

  18. ։ൃମ੍
    22

    View full-size slide

  19. ͸·ͷ͞Μ(@wildworks)
    • ϒϩοΫ։ൃɺΤσΟλʔͷ֦ுͷ
    ϓϥάΠϯΛத৺ʹ୲౰ɻ
    • Gutenberg ͷ͛͢ʔ΍ͭɻ
    • WC Tokyo ͰҰॹʹ஻Γ·͢ɻ
    23

    View full-size slide

  20. K͞Μ(@mypacecreator)
    • ςʔϚ։ൃɺϒϩοΫΛར༻ͯ͠ͷ
    ϖʔδ࡞੒Λத৺ʹ୲౰ɻ
    • ʮWordPressςʔϚ;ͭʔʹ࡞ͬ
    ͯʯͬͯΦʔμʔʹͪΌΜͱී௨ʹ
    ࡞ͬͯ͘ΕΔɻ
    • ςʔϚͪΌΜͱ ී௨ʹ ࡞Δͬͯ΄Μ
    ͱʹग़དྷΔਓ͕গͳ͍ɻ
    24

    View full-size slide

  21. ࣗ෼ͷ୲౰
    • ϒϩοΫ౳ͷ࢓༷ͷܾఆɻίʔυͷϚʔδɻ
    • ϒϩοΫ։ൃɻ
    • ࡉ͔͍ϓϥάΠϯ։ൃɻ
    • ΧελϜϑΟʔϧυΛ༻͍ΔՕॴͷΤσΟλʔͷ֦ுͱ͔ɻ
    25

    View full-size slide

  22. ϒϩοΫͷ։ൃ
    26

    View full-size slide

  23. ϫʔΫϑϩʔ
    • Figma ͷσβΠϯΛ֬ೝ͠ͳ͕Β࡞੒͢΂͖ϒϩοΫΛఆٛɻ
    • ϝϯόʔશһͰɺFigma ͷσʔλΛݟͳ͕Β͋ʔͩ͜ʔͩ
    ݴ͍߹ͬͯɺissue Λ࡞੒ɻ
    • ແཧ͡ΌͶʁͬͯͷ͸σβΠϯଆʹϑΟʔυόοΫɻ
    • جຊతʹ͸ɺࣗ෼ or ඿໺͞Μ͕ϒϩοΫΛ։ൃ͠ PR Λग़
    ͠ɺ૬ޓʹϨϏϡʔɻ
    27

    View full-size slide

  24. ϒϩοΫΤσΟλʔΛ༻͍ͨαΠτ੍࡞ʹ͓͚Δॾ໰୊
    28

    View full-size slide

  25. ϒϩοΫ਺ͷංେԽ
    29

    View full-size slide

  26. • σβΠϯΛ۪௚ʹϒϩοΫԽ͢ΔͱϒϩοΫ਺͕ංେԽ͢
    Δɻ
    • ։ൃɺ؅ཧɺӡ༻ɺอकɺ༷ʑͳͱ͜ΖͰίετ͕͔͔Δɻ
    • ͳʹ࢖ͬͯྑ͍ͷ͔Θ͔Βͳ͘ͳΔɻ
    • ϒϩοΫελΠϧ / ϒϩοΫύλʔϯͰ΋ಉ༷ͷ໰୊͸ى͖
    Δɻ
    30

    View full-size slide

  27. ͜ͷ໰୊΁ͷղܾࡦͱͯ͠΍ͬͨ͜ͱɻ
    ॻࣜπʔϧόʔ API (Format API)
    31

    View full-size slide

  28. ݟग़͠ΛίΞͷʮݟग़͠ʯϒ
    ϩοΫͰ࡞੒
    RichText Λ֦ு͢Δ͜ͱͰɺ

    Λ଍ͤΔΑ͏ʹɻ
    ϒϩοΫΛબͿΑΓ͸௚ײతʹૢ࡞Ͱ
    ͖ɺݻఆϖʔδͳͲͷࢠݟग़͠౳ʹ༻͍
    Δ͜ͱͰɺϒϩοΫΛ࡞੒͢Δඞཁ͕ແ
    ͘ͳΔɻ
    32

    View full-size slide

  29. ॻࣜπʔϧόʔ API (Format
    API)
    • ଠࣈͱ͔ɺϋΠϥΠτΛͱ͔ΛςΩε
    τʹద༻ͨ͠Γ͢Δ΍ͭɻ೚ҙͷλ
    άɺ೚ҙͷΫϥεΛద༻Ͱ͖Δɻ
    • Ωϟονίϐʔɺݟग़͠ͷύλʔϯͱ
    ͔͸͜ΕͰ͍͍ͩͨͳΜͱ͔ͳΔͷ
    Ͱ͸ɻ
    https://ja.wordpress.org/team/
    handbook/block-editor/how-to-guides/
    format-api/
    34

    View full-size slide

  30. import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
    import { RichTextToolbarButton } from '@wordpress/block-editor';
    const MyCustomButton = ( { isActive, onChange, value } ) => {
    return (
    icon="editor-code"
    title="Sample output"
    onClick={ () => {
    onChange(
    toggleFormat( value, {
    type: 'my-custom-format/sample-output',
    } )
    );
    } }
    isActive={ isActive }
    />
    );
    };
    registerFormatType( 'my-custom-format/sample-output', {
    title: 'Sample output',
    tagName: 'samp',
    className: null,
    edit: MyCustomButton,
    } );
    35

    View full-size slide

  31. RichText Extension
    ؅ཧը໘͔ΒͦͷลͷઃఆΛߦ͑ΔΑ͏
    ʹ͢ΔϓϥάΠϯɻ(඿໺͞Μ࡞)
    https://wordpress.org/plugins/richtext-
    extension/
    ࠓճ͸ઃఆͳͲΛϨϙδτϦͰ؅ཧͨ͠
    ͔ͬͨͷͰɺjsonϑΝΠϧͰઃఆΛఆٛ
    Ͱ͖ΔΑ͏ʹͨ͠΋ͷΛผ్։ൃ͍ͯ͠
    Δɻ
    36

    View full-size slide

  32. ޮՌ
    • ݟग़ؔ͠࿈ͷϒϩοΫͰ࡞੒ͨ͠΋ͷ͕ 3͚ͭͩɻ
    • ΞΠίϯΛࢦఆͰ͖ΔΑ͏ʹͨ͠Ϡπͱ͔ɻ
    • ݟग़͠/ڧௐͷσβΠϯͷόϦΤʔγϣϯͷ΄ͱΜͲΛ௨ৗͷ
    ݟग़͠ɾஈམϒϩοΫͰ࣮ݱɻ
    37

    View full-size slide

  33. ςʔϚͱϒϩοΫͷ੹຿͕ᐆດ
    38

    View full-size slide

  34. • ৭ͷఆٛͳͲ͸ theme.json Ͱߦ͍͍ͨɻ
    • ϒϩοΫଆͰCSSΛهड़͢ΔͱɺςʔϚଆͰͷΧελϚΠζ
    ͕೉͘͠ͳΔɻ
    • ͜͜ΒลΛͪΌΜͱ͠ͳ͍ͱɺλεΫͷ෼ղ͕೉͘͠ͳΔ
    ͠ɺઃܭ͕ഁ୼͢ΔݪҼɻ
    39

    View full-size slide

  35. ৭͸ɺςʔϚଆͰఆٛ
    • ϒϩοΫଆͰ͸جຊతʹɺ৭ͳͲΛ
    ࣋ͨͳ͍ɻ(ϨΠΞ΢τͷΈ)
    • ৭ɺόϦΤʔγϣϯͳͲ͸ɺςʔϚ
    ଆͰఆٛ͢Δɻ
    • ίΞͷελΠϧΛςʔϚͰ্ॻ͖͢
    Δͷͱಉ͡։ൃϑϩʔͰ࡞ۀग़དྷΔ
    Α͏ʹɻ
    40

    View full-size slide

  36. • ϒϩοΫଆͷ੹຿͸ɺཁૉͷ഑ஔఔ౓ʹɻ(੾Γ෼͚͸೉͠
    ͍ɻ)
    • CSS ͸શମతʹ΋͏গ͠ςʔϚଆͰهड़ͯ͠΋ྑ͔ͬͨͱ͸
    ࢥͬͯΔ͕ɺࣄલʹͦ͜ΒลΛઃܭͰ͖Δͷ͔͸ͪΐͬͱΘ
    ͔Βͳ͍ɻ
    41

    View full-size slide

  37. block.json
    "supports": {
    "spacing": {
    "margin": true
    },
    "color": {
    "text": true,
    "background": true
    }
    },
    Block Supports ͷઃఆͰɺ؅ཧը໘ଆͰઃఆग़དྷΔ߲໨Λ૿΍ͯ͠ɺσβΠϯ
    తͳ੍໿ΛϒϩοΫଆͰ͸ͳΔ΂࣋ͨ͘ͳ͍Α͏ʹɻ
    42

    View full-size slide

  38. ϒϩοΫελΠϧҎ֎ͷํ๏ͰͷελΠϧͷ֦ுΛߟ͑Δ
    • ϒϩοΫελΠϧ͸ɺ୯Ұͷ class ͔͠ίϯτϩʔϧग़དྷͳ
    ͍ͷͰ͙͢ʹංେԽ͢Δɻ
    • എܠ3छྨxxϘʔμʔ3छྨͰɺ9छྨͷελΠϧ͕ඞཁʹ
    ͳΔɻ
    • ϒϩοΫελΠϧ͕ଟ͗͢Δͱར༻ࠔ೉ɻ
    43

    View full-size slide

  39. Block Extensions
    https://gutenberg.10up.com/
    reference/Blocks/block-extensions
    10up੡ͷ @10up/block-components ౳
    Λ༻͍ΔͱղܾՄೳɻ
    (ࠓճ͸ෆ࠾༻)
    46

    View full-size slide

  40. import { registerBlockExtension } from '@10up/block-components';
    function BlockEdit(props) {...}
    function generateClassNames(attributes) {...}
    registerBlockExtension(
    'core/group',
    {
    extensionName: 'background-patterns',
    attributes: {
    hasBackgroundPattern: {
    type: 'boolean',
    default: false,
    },
    backgroundPatternShape: {
    type: 'string',
    default: 'dots',
    },
    backgroundPatternColor: {
    type: 'string',
    default: 'green'
    }
    },
    classNameGenerator: generateClassNames,
    Edit: BlockEdit,
    }
    );
    47

    View full-size slide

  41. ςʔϚ։ൃ
    48

    View full-size slide

  42. ϒϩοΫςʔϚ or ΫϥγοΫςʔϚʁ
    • 2022/08ͷঢ়گ(WordPress 6.0)Ͱ͸ɺϒϩοΫςʔϚ͸Ϧε
    Ϋ͕ߴ͍ͱ൑அɻ
    • theme.json Λಋೖͨ͠ΫϥγοΫςʔϚʢϋΠϒϦουςʔ
    ϚʣΛ࡞੒ɻ
    49

    View full-size slide

  43. ςʔϚ։ൃͰ͓ئ͍ͨ͜͠ͱ
    50

    View full-size slide

  44. جຊతʹ͸ɺී௨ʹςʔϚ࡞ͬͯʂͱ͍͏ײ͡ɻ
    • ͜͜Ͱݴ͏ී௨͸ɺWP.org ʹܝࡌ͢ΔΑ͏ͳςʔϚͱಉ͡
    Α͏ͳײ͡Ͱɺͱ͍͏͜ͱɻ
    • ଍Γͳ͍ཁૉ͸ɺregister_block_style Ͱ௥Ճ͢Δ͔ɺϒ
    ϩοΫଆͰରԠɻ
    • ಛผͳ class ͸جຊతʹ͸༻ҙͤͣɺ؅ཧը໘্ͰͷઃఆͰ
    ରԠɻ
    51

    View full-size slide

  45. CSS ʹ͍͔ͭͯΜ͕͑Δ͜ͱɻ
    • ϝϯςφϯεੑΛͲ͏֬อ͢Δ͔ɻͲ͏ݮΒ͔͢ɻ
    • Ұ౓͔͠ग़ͯ͜ͳ͍Α͏ͳελΠϧ͕૿Ճ͢Δͱϝϯςφϯ
    εੑ͕Լ͕Δɻ
    52

    View full-size slide

  46. ͜ͷ໰୊΁ͷղܾࡦͱͯ͠΍ͬͨ͜ͱɻ
    ΤσΟλͰग़དྷΔ͜ͱ͸ΤσΟλଆͰ
    53

    View full-size slide

  47. • ϑΥϯταΠζͷઃఆɺϒϩοΫͷ
    ϚʔδϯͳͲ͸جຊతʹ͸ΤσΟ
    λʔ্ͰରԠɻ
    • ͦ͜ΒลΛ؆୯ʹมߋՄೳͳͷ͕ྑ
    ͞ɻ
    • HTMLͷ؅ཧʁ WordPress ͷϦϏ
    δϣϯͰɻ
    • ൚༻తͳ΋ͷΛͳΔ΂͘࡞ͬͯɺͦ
    ΕΛ૊Έ߹ΘͤͯϖʔδΛ࡞ΔΠ
    ϝʔδɻ
    54

    View full-size slide

  48. HTML / CSS ։ൃͰ͸ແ͘ɺ͋͘·Ͱ΋ςʔϚ։ൃͱଊ͑Δɻ
    • தͰͲΜͳϖʔδͰ΋͋Δఔ౓։ൃՄೳͳΑ͏ʹɺσβΠϯ
    γεςϜΛఏڙ͢Δͷ͕ςʔϚͷ໾ׂɻ
    • HTML Λॻ͘ͷ͸جຊతʹ͸ΤσΟλʔͷ໾ׂɻ
    55

    View full-size slide

  49. ී௨ʹςʔϚ࡞ͬͯͱ͸ݴ͏΋ͷͷɺ
    theme.json ͷಋೖͰςʔϚଆͰؾΛݣ
    ͏͜ͱ͕ͦΕͳΓʹ͋Δɻ
    ৄࡉ͸ɺ
    ʲWordPressʳ डୗ։ൃʹ͓͚ΔϋΠ
    ϒϦουςʔϚ։ൃ: https://qiita.com/
    AkiHamano/items/
    4166dd093e2ba03c57d7
    ͕ΊͬͪΌৄ͍͠ɻ
    56

    View full-size slide

  50. λΠτϧͷऔѻ͍
    ϖʔδ͝ͱʹλΠτϧͷϨΠΞ΢τ͕ҧͬͨΓɺ
    ΧελϚΠζͨ͘͠ͳͬͨΓ͢ΔͷͰɺ
    the_title() ͸ςϯϓϨʔτʹهड़͠ͳ͍ํ͕
    ྑ͍͔΋ɻ
    ͦͷ୅ΘΓʹɺλΠτϧϒϩοΫ(core/post-
    title) Λ༻͍ΔΑ͏ʹͨ͠ํ͕Ұ؏ੑ͕͋ͬͯ
    ྑ͍ɻ
    ৽ن࡞੒࣌ʹɺλΠτϧϒϩοΫΛࣗಈͰ௥Ճ͢
    ΔΑ͏ʹ͢Δͱ͔ͰରԠɻ
    • VK Block Patterns(Vector,Inc ੡) / Pattern
    Manager (WP Engine) ͱ͔Ͱɻ
    57

    View full-size slide

  51. ΢ΟδΣοτͷ໰୊
    WordPress 5.8 ͔Β΢ΟδΣοτͰ΋ϒϩοΫΤσΟλʔ͕ར༻
    Մೳʹͳ͕ͬͨɻ
    • ΤσΟλʔͷը໘෯͕ҧ͏ɻαΠυόʔҎ֎ʹ͸ෆదɻ
    • ग़ྗ͞ΕΔϚʔΫΞοϓ͕ҧ͏ɻ(چདྷͷ΢ΟδΣοτͱͷޓ
    ׵ੑ)
    ͳͲͷ໰୊ɻ
    58

    View full-size slide

  52. ϒϩοΫςϯϓϨʔτύʔπͷಋೖ
    • ϒϩοΫςʔϚͷςϯϓϨʔτύʔ
    πػೳΛɺΫϥγοΫςʔϚͰ΋ར
    ༻Մೳʹɻ(WP 6.1)
    61

    View full-size slide

  53. ͦͷଞॾ໰୊
    62

    View full-size slide

  54. ಉظύλʔϯ(࠶ར༻ϒϩοΫ)ͷ໰୊ɹ
    ͷΑ͏ʹอଘ͞Εɺ

    ࠶ར༻ϒϩοΫͷத਎

    ͷΑ͏ʹɺΤσΟλʔ্Ͱ͸ϨϯμϦϯά͞Εɺϖʔδͱͯ͠
    ͸ɺத਎͕ͦͷ··ग़ྗ͞ΕΔɻ
    63

    View full-size slide

  55. • ࠶ར༻ϒϩοΫͷத਎͕ɺalignwide, alignfull ౳Λ࣋ͬ
    ͍ͯͨ৔߹ɺ͜ΕΒ͕ΤσΟλʔ্Ͱਖ਼͘͠දࣔ͞Εͳ͍ɻ
    • ࠶ར༻ϒϩοΫͷ਌ʹɺʮίϯςϯτ෯Λ࢖༻͢ΔΠϯφʔ
    ϒϩοΫʯΛ off ʹͨ͠ɺશ෯ͷάϧʔϓΛ༻ҙ͠ɺͦͷத
    ʹ࠶ར༻ϒϩοΫΛೖΕΔ͜ͱͰରԠɻ
    άϧʔϓϒϩοΫͷڍಈ͸৭ʑͱ೉͍͠ɻɻɻ
    64

    View full-size slide

  56. ϒϩοΫΤσΟλʔΛ࢖͍͓ͨ͢ϝϦοτ
    65

    View full-size slide

  57. ςʔϚͷσϓϩΠճ਺͕ݮΔɻ
    • ςʔϚͳͲΛมߋ͠ͳͯ͘ྑ͍ͷͰɺσϓϩΠͰͷࣄނͳͲ
    ͕ஔ͖ʹ͘͘ɻ
    • ಈ͍ͯΔίʔυΛมߋ͢Δͷ͸ɺϦεΫ͕͋ΔߦҝͰ͸͋
    Δɻ
    66

    View full-size slide

  58. ϒϩοΫΤσΟλؒͰͷίϐϖ͕Մೳ
    • جຊతʹ ϩʔΧϧ؀ڥʹ DB ͸ಉظ͠ͳ͍Ͱ։ൃɻ
    • ࠔͬͨΒɺϒϩοΫΤσΟλͷίʔυΛڞ༗ͨ͠Γɻ
    • Ͳ͏ͯ͠΋खݩʹཉ͔ͬͨ͠Βɺ։ൃαʔόʔ͔Β xml ΛΤ
    Ϋεϙʔτͯ͠ɺΠϯϙʔτͨ͠Γɻ
    67

    View full-size slide

  59. ίϯςϯπ؅ཧͷ UX ͷ޲্
    • ʮจࣈྻͷมߋ͕ग़དྷΔ͔ग़དྷͳ͍͔ʯΛϢʔβʔ͕ߟ͑ͳ
    ͯ͘ྑ͍Α͏ʹɻ
    • ʮ͜͜͸มߋՄೳ/͜͜͸ग़དྷ·ͤΜʯ͕͋Δͱͦ΋ͦ΋
    Ϣʔβʔ͕ࠞཚ͢Δɻ
    • ςΩετͷมߋ͘Β͍ࣗ෼ͨͪͰαΫοͱग़དྷΔΑ͏ʹͳͬ
    ͍ͯͨํ͕ɺ૒ํָͰ͢ΑͶɻ
    68

    View full-size slide

  60. ࠶ར༻ੑͷ޲্
    • ஍ਤϒϩοΫͳͲͷϑϩϯτଆͰͷ
    ౳Λ༻͍ͨϒϩοΫ౳Λͻͱ·ͱΊ
    ʹɻ࠶ར༻ੑͷ޲্ɻ
    • ಉ͡ϒϩοΫΛਓੜͰ2౓ͱ࡞Βͳ͍
    ͱ͍͏ؾ࣋ͪɻ
    • npm Ͱ഑෍͞Ε͍ͯΔɺReact ͷࢿ
    ࢈͕ͦͷ··࢖͑Δɻ
    69

    View full-size slide

  61. σβΠϯΛ੍ޚ͢ΔͨΊͷϩδοΫͷഉআ
    • ΧελϜϑΟʔϧυɺςϯϓϨʔτͰͷ if จ͕ WordPress α
    ΠτϝϯςφϯεੑΛඇৗʹѱ͘͢Δɻ
    • 1ϖʔδͷͨΊʹςϯϓϨʔτʹϩδοΫΛهड़ͨ͠Γ౳
    Ͱɺഁ୼ͨ͠αΠτΛԿݸ΋ݟ͖ͯ·ͨ͠ΑͶʁ
    • ͦͷΧελϜϑΟʔϧυɺҠߦग़དྷΔʁ໰୊
    70

    View full-size slide

  62. ͜͜਺೥ͷ޻਺ͷมԽ
    71

    View full-size slide

  63. • ϒϩοΫΤσΟλҎલͱͦΜͳʹมΘͬͯͳ͍ؾ͸͢Δɻ
    • ϒϩοΫΤσΟλʹͳ͔ͬͨΒ޻਺͕૿͑ͨͬͯ͜ͱ΋ແ
    ͍ɻ
    • ΧελϜϑΟʔϧυӠʑͱ͔ͷ࿩͕ݮͬͨͿΜɺτϯτϯͳ
    Πϝʔδɻ
    • PHP Λॻ͍ͯͨ޻਺͕ React ʹͳͬͨײ֮ɻ
    72

    View full-size slide

  64. ϒϩοΫύλʔϯ or ϒϩοΫ։ൃ
    73

    View full-size slide

  65. ݁࿦ɿͲͬͪ΋࢖͏ɻ
    74

    View full-size slide

  66. • ωετͨ͠άϧʔϓϒϩοΫͷ૊Έ߹ΘͤͰఏڙ͞ΕΔσβ
    Πϯ͸؅ཧͮ͠Β͍ɻ
    • ෳ਺ͷσβΠϯͷཁૉΛ·ͱΊͯ౤ೖ͢Δػೳ͕ϒϩοΫύ
    λʔϯɻ୯ཱͷσβΠϯཁૉΛఏڙ͢Δͷ͸ϒϩοΫ୯Ґɻ
    • ࣗ༝ͳϚʔΫΞοϓΛఏڙ͢Δͷ͸ϒϩοΫΛ։ൃ͠ͳ͍ͱ
    ೉͍͠ɻ
    75

    View full-size slide

  67. HTML/CSS Ͱग़དྷΔ͜ͱɾग़དྷͳ͍͜ͱΛ఻͑Δͷͬͯ·͊
    ·͊େมͰͨ͠ΑͶʁ
    • ͦͯͪ͠ΌΜͱ఻͑ΒΕͯΔ͔΋Θ͔Βͳ͍ɻ
    • ͍ͯ͏͔ࣗ෼ͷͰ͖Δग़དྷͳ͍ͷ൑அ΋೉͍͠ɻ
    • ͦ͏͍͏αϯϓϧαΠτ͸͋Δ͚Ͳࠓճ͸ग़དྷͳ͍Μͩ
    ΑʔͬͯͷΛ఻͑Δͷ೉͍͠ɻ
    76

    View full-size slide

  68. ϒϩοΫΤσΟλͰग़དྷΔ͜ͱग़དྷͳ͍͜ͱΛ఻͑Δͷ͸ɺͨ
    ͿΜɺ͜ΕͷഒҎ্೉͍͠
    77

    View full-size slide

  69. • άϧʔϓϒϩοΫͷڍಈͱ͔೉͍͠ɻWordPress͕ಈతʹੜ
    ੒͢ΔCSS΋͋Δɻ
    • ؅ཧը໘ͰͦͷσβΠϯΛ࠶ݱग़དྷͨͱͯ͠΋ɺάϧʔϓϒ
    ϩοΫͷωετ͕ଟ͗ͯ͢ૢ࡞͕೉͍͠ͱ͔ɻ
    78

    View full-size slide

  70. ʮࣗ༝ʹHTML/CSSΛهड़͢Ε͹ͳΜͱ͔ͳΔʯͱ͍͏࠷ऴख
    ஈΛ͍࣋ͬͯΔͱඇৗʹָɻ
    • ͱΓ͋͑ͣίΞͷϒϩοΫͷ૊Έ߹ΘͤͰߟ͑ͯΈͯɺμϝ
    ͦ͏ͳΒϒϩοΫ։ൃ͢Δ͔ʔɺΈ͍ͨͳɻ
    • ฤूՄೳͳ HTML ͷύʔπΛ࡞ΕΕ͹ྑ͍ɻ
    • ςΩετͱը૾ͷมߋ͘Β͍͕ग़དྷΔ͚ͩͰେ఍ͷ͜ͱ͸
    ΍͚ͬͭΒΕΔɻ
    79

    View full-size slide

  71. ϒϩοΫ։ൃͰֶͿ΂͖͜ͱ
    80

    View full-size slide

  72. ϒϩοΫΤσΟλ͕ϦϦʔε
    ͞ΕͯͦΖͦΖ5೥ܦͪ·
    ͢ɻ
    • 2018೥12݄10೔ WordPress 5.0
    • ϒϩοΫΤσΟλ͸ɺ7೥લ͘Β͍͔Β։ൃ
    ͕࢝·͍ͬͯΔɻ
    • ਐԽ͸ଓ͍͍ͯΔ͕ɺϒϩοΫΤσΟλࣗ
    ମ͸ผʹ৽͍͠΋ͷͰ͸ແ͍ɻ
    ϒϩοΫͷ࡞੒ νϡʔτϦΞϧ
    https://ja.wordpress.org/team/handbook/
    block-editor/getting-started/create-block/
    81

    View full-size slide

  73. ։ൃΨΠυ
    • νϡʔτϦΞϧΑΓͪΐͬͱಥͬࠐ
    Μͩઆ໌ɻ
    82

    View full-size slide

  74. ͜ͷ5೥Ͱɺ
    • npx @wordpress/create-block ͰϒϩοΫ࡞੒͕؆୯ʹͰ͖ΔΑ͏ʹͳͬͨɻ
    • block.json ͷਐԽͰɺ؆୯ʹػೳ௥Ճ͕Ͱ͖ΔΑ͏ʹɻ
    • @wordpress/scripts ͰϏϧυͱ͔΋ΊͬͪΌ؆୯ʹɻ
    • @wordpress/env Ͱ։ൃ؀ڥ͕؆୯ʹɻWindows Ͱ΋ಈͧ͘ɻ
    • WordPress Playground Ͱ΋։ൃ؀ڥϚδ؆୯ʹɻ
    • npm ͷόʔδϣϯ͕Α͏΍͘ 8ܥʹɻ
    • υΩϡϝϯςʔγϣϯ΋νϡʔτϦΞϧ΋੔උ͞Εͨɻ(ࠓ·ͰΑΓ͍ͩͿ)
    • ೔ຊޠԽ΋͞ΕͯΔʂ
    83

    View full-size slide

  75. ʮKansai WordPress Meetup Osaka #4 ϒϩοΫΤσΟλʔͷ࿩Λ͠Α͏ʯ 2019/11/16
    https://speakerdeck.com/torounit/get-started-customize-for-block-editor
    84

    View full-size slide

  76. ۀ຿্ɺϒϩοΫ։ൃͰඞཁͳ஌ࣝ
    • ϒϩοΫ։ൃͷجຊɺ(νϡʔτϦΞϧϨϕϧ) / React ͷجૅɻ
    • : ஈམɾݟग़͠ϒϩοΫͳͲͰ࢖ΘΕͯΔςΩε
    τͷฤूίϯϙʔωϯτ
    • ը૾ͷઃఆɺஔ׵
    • InnerBlocks Λར༻ͨ͠ϒϩοΫ
    ͜Ε͚ͩ஌ͬͯΕ͹ۀ຿ϨϕϧͰϒϩοΫΛ࡞Δʹ͸े෼ɻ
    85

    View full-size slide

  77. @10up/block-
    components
    https://github.com/10up/block-
    components
    • ϒϩοΫ։ൃͰΑ͘ग़ͯ͘Δίϯ
    ϙʔωϯτΛ·ͱΊͨ΋ͷɻ
    • ίϯϙʔωϯτΛ࢖͏ͩ
    ͚Ͱɺը૾ͷΞοϓϩʔυɺஔ׵ɺ
    ͱ͔΋ҰൃͰ࣮૷ग़དྷͨΓɻ
    86

    View full-size slide

  78. Gutemnerg BestPractices
    10up ͕·ͱΊͯΔɺϕετϓϥΫςΟεɻ
    88

    View full-size slide

  79. WordCamp US 2023 ͰͷϒϩοΫ
    ΤσΟλͷࣄྫͷηογϣϯ
    ԿݴͬͯΔͷ͔ྑ͘ղΒͳͯ͘΋ɺ؅ཧը໘ͷσϞݟͯɺ͛͢ʔͬͯͳΔɻ
    89

    View full-size slide

  80. ϗϫΠτϋ΢εͷϦχϡʔΞϧͰͷϒϩοΫΤσΟλͷ׆༻ࣄ

    All The Presidents Websites
    https://www.youtube.com/watch?v=pO4uhroOWew
    NASA
    For All Userkind: NASA Web Modernization and WordPress
    https://www.youtube.com/watch?v=d0ZekwvlM_w
    Hands on with NASA's new digital platform - 2023 WCUS Annapolis
    https://www.youtube.com/watch?v=pzRHrckpz44
    90

    View full-size slide

  81. ඿໺͞Μͷ YouTube νϟϯωϧ
    https://www.youtube.com/@akihamano2805/videos
    ΧελϜϒϩοΫಓ৔ͷಈըɻ
    Ryan Welcher ͷ Twitch νϟϯωϧ
    https://www.twitch.tv/ryanwelchercodes
    ഑৴Ͱ࡞ͬͨɺϓϥάΠϯͳͲͷϨϙδτϦ: https://github.com/
    ryanwelcher/twitch
    91

    View full-size slide

  82. ϢʔβʔͷϑΟʔυόοΫେࣄ
    92

    View full-size slide

  83. • ʮϢʔβʔ͕࢖͍΍͍͢Α͏ʹʯͱࢥͬͯ࡞ͬͯΔ͚Ͳɺ
    Ϣʔβʔ͕࢖͍΍͍͢ͱࢥͬͯΔ͔͸Θ͔Βͳ͍ɻ
    • HTMLΛॻ͚ͳ͍ਓͷؾ͕࣋ͪΘ͔Δ͜ͱ͸ແ͍ɻ
    • ๻Β͕HTMLΛֶΜͩͱ͖ͱঢ়گ΋ҧ͏ɻ
    • ॳ৺ऀͷࠒͷؾ࣋ͪΛࢥ͍ͩͯ͠΋ɺͦΕ͕ࠓͷϢʔβʔ
    ͷߟ͑Ͱ͋Δอূ͸Ͳ͜ʹ΋ͳ͍ɻ
    • ࣗ෼͕ͨͪؾݣ͍Ͱ࣮૷ͨ͠ػೳ͕ෆศΛট͍͍ͯͨΓɺٯ
    ΋Α͋͘Δɻ
    93

    View full-size slide

  84. ϢʔβʔͷϑΟʔυόοΫΛฉ͜͏
    • ͦ͏͍͏ҙຯͰαΠτͷอकɺࡉ͔͍ػೳ௥ՃͳͲΛ͠ଓ͚
    ͍ͯͨͷ͸ͱͯ΋ྑ͔ͬͨɻ
    • Ϣʔβʔ͕΍Γ͍ͨ͜ͱɺຊ౰ʹࠔͬͯډΔ͜ͱΛ஌Δେ͖
    ͳख͕͔Γɻ
    • 1िʹ1ຊهࣄΛॻ͍͍ͯͨϢʔβʔ͕ͷهࣄ͕2ຊ૿͑ͨ
    ΓɺΑΓίϯςϯπ࡞੒ʹूதग़དྷΔΑ͏ʹ͢Δͷ͕ɺ؅ཧ
    ը໘Λ࡞ΔɺΧελϚΠζ͢Δҙຯɻ
    94

    View full-size slide

  85. ϝσΟΞΫΤϦʹΑΔϨεϙϯγϒ
    • ݱ࣌఺Ͱ theme.json Ͱ͸࢖͑ͳ͍ɻ
    • ϝσΟΞΫΤϦ͕ɺͦ΋ͦ΋ WSIWYG ͱ૬ੑ͕ѱ͍ɻ
    • theme.json Ͱ͸ɺclamp + vw ʹΑΔΞϓϩʔνɻ
    • ΤσΟλͷ iframe ԽͰଟগϚγʹͳΔ͔΋͚ͩͲɺͲ͏ͩΖ͏ɻ
    • ݱ࣌఺Ͱ͸ɺΧϥϜϒϩοΫͷΑ͏ʹɺʮॎʹฒΜͩ΋ͷ͕ࠨ͔Βԣʹ
    ฒͿʯɺΑΓෳࡶͳ͜ͱ͸ߦ͏΂͖Ͱ͸ແ͍ͷͰ͸ɻ
    • ඇදࣔʹͳΔཁૉͷϋϯυϦϯά͕೉͍͠ɻ
    96

    View full-size slide

  86. ωΨςΟϒϚʔδϯ / position: absolute
    • ʮॏͳΔʯͱ͍͏දݱ͕ɺϒϩοΫΤσΟλͱ૬ੑ͕ѱ͍ɻ
    ؅ཧը໘্Ͱͷཁૉͷબ୒Λ೉͘͢͠Δɻ
    • ෳ਺ͷྡ઀ͨ͠ϒϩοΫͷ༨നͳͲͷલఏ͕͋ͬͯ੒ཱ͢Δ
    ΋ͷͳͷͰɺยํʹมߋ͕ೖͬͨΓ͢ΔͱɺϨΠΞ΢τ่͕
    ΕΔɻ
    97

    View full-size slide

  87. ͍͞͝ʹɺ͓ؾ࣋ͪ
    98

    View full-size slide

  88. ͜ͷ5೥ͷมԽ
    WordPress ͕ WEBαΠτΛ࡞Δ্ͰҰ൪؆୯ͳπʔϧͩͬͨ
    ࣌୅͸ऴΘͬͨɻ
    • ϑϩϯτΤϯυͳΒɺNext.js / Astro + microCMS ͱ͔ɻ
    • ϒϩάͳΒɺNote ͱ͔ɻ
    • Wix/STUDIO/Squarespace ౳ͷαʔϏεɻ
    99

    View full-size slide

  89. ࣗ෼͕ WordPress Λಋೖ͢Δཧ༝
    100

    View full-size slide

  90. ΧελϚΠζՄೳͳڧྗͳΤσΟλʔΛඋ͍͑ͯΔ͔Β
    101

    View full-size slide

  91. • ΤσΟλʔʹϝϦοτ͕ݟ͍ͩͤͳ͍αΠτɺWSIWYGͰ͋
    Δ͜ͱʹϝϦοτ͕ͳ͍αΠτ౳Ͱ͸ WordPress Λಋೖ͢Δ
    ͷ͸ඍົ͔ͳͱɻ
    • HTML Λ࠷ॳʹ࡞Γ͖ͬͯɺҰ෦ͷཁૉ͚ͩߋ৽͍ͨ͠ͱ͔
    Ͱ͋Ε͹ɺAstro + HeadlessCMS ͱ͔ͷ΄͏͕ϩʔίετͰ
    ͸ɻ
    102

    View full-size slide

  92. • Custom fields
    !
    Blocks https://github.com/WordPress/
    gutenberg/issues/51373
    • Fields API https://github.com/sc0ttkclark/wordpress-fields-
    api
    ౳͕ϦϦʔε͞ΕͨΒ·ͨҧ͏ঢ়گʹͳΔ͔΋ɻ
    103

    View full-size slide

  93. • ʮϖʔδͷ৽ن௥Ճʯ͕͋Δͷʹɺ݁ہςϯϓϨʔτϑΝΠ
    ϧΛ࿔ΔͳΒɺͳΜͷͨΊʹ CMS ͍ΕͯΜͷʁ
    • ΤσΟλʔ্Ͱ HTML ॻ͔ͤΔͳΒͳΜͰ WordPress ͍Ε
    ͯΜͷʁ
    • WEBͷྑ͙ͬͯ͢͞ʹมߋग़དྷΔ͜ͱ͡Όͳ͍ͷʁ
    • CMS ΛΘ͟Θ͟ಋೖ͢ΔҙຯͬͯԿ?
    104

    View full-size slide

  94. Thanks!
    Github: @torounit
    Twitter / WP.org: @Toro_Unit
    torounit.com
    106

    View full-size slide