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

by Toro_Unit (Hiroshi Urabe)

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

$ whoami

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Slide 12

Slide 12 text

͍͍ͩͨಉ͡ݟͨ໨! 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Why ? 19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

։ൃମ੍ 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ϒϩοΫͷ։ൃ 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

ϒϩοΫ਺ͷංେԽ 29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Demo 33

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

import { registerFormatType, toggleFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton } from '@wordpress/block-editor'; const MyCustomButton = ( { isActive, onChange, value } ) => { return ( { 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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

ςʔϚ։ൃ 48

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

͜ͷ໰୊΁ͷղܾࡦͱͯ͠΍ͬͨ͜ͱɻ ΤσΟλͰग़དྷΔ͜ͱ͸ΤσΟλଆͰ 53

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

ͦͷଞॾ໰୊ 62

Slide 63

Slide 63 text

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

࠶ར༻ϒϩοΫͷத਎

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

͜͜਺೥ͷ޻਺ͷมԽ 71

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

݁࿦ɿͲͬͪ΋࢖͏ɻ 74

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

՝୊ 95

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

͍͞͝ʹɺ͓ؾ࣋ͪ 98

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

• Custom ﬁelds ! Blocks https://github.com/WordPress/ gutenberg/issues/51373 • Fields API https://github.com/sc0ttkclark/wordpress-ﬁelds- api ౳͕ϦϦʔε͞ΕͨΒ·ͨҧ͏ঢ়گʹͳΔ͔΋ɻ 103

Slide 104

Slide 104 text

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