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

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

Transcript

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

   View Slide

2. $ whoami
   
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. View Slide

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

    View Slide

11. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. Why ?
    19
    

    View Slide

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

    View Slide

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

    View Slide

22. ։ൃମ੍
    22
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. ϒϩοΫͷ։ൃ
    26
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. Demo
    33
    

    View Slide

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

    View Slide

35. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. View Slide

45. View Slide

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

    View Slide

47. 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 Slide

48. ςʔϚ։ൃ
    48
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. View Slide

60. View Slide

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

    View Slide

62. ͦͷଞॾ໰୊
    62
    

    View Slide

63. ಉظύλʔϯ(࠶ར༻ϒϩοΫ)ͷ໰୊ɹ
    ͷΑ͏ʹอଘ͞Εɺ
    
    ࠶ར༻ϒϩοΫͷத਎
    
    ͷΑ͏ʹɺΤσΟλʔ্Ͱ͸ϨϯμϦϯά͞Εɺϖʔδͱͯ͠
    ͸ɺத਎͕ͦͷ··ग़ྗ͞ΕΔɻ
    63
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

87. View Slide

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

    View Slide

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

    View Slide

90. ϗϫΠτϋ΢εͷϦχϡʔΞϧͰͷϒϩοΫΤσΟλͷ׆༻ࣄ
    ྫ
    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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

95. ՝୊
    95
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

105. View Slide

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

     View Slide