カスタムフィールド製造業からの脱却〜オリジナルブロックエディタからGutenbergへ〜

by Shizumi Yoshiaki

Slide 1

Slide 1 text

ΧελϜϑΟʔϧυ੡଄ۀ͔Βͷ୤٫ ΦϦδφϧϒϩοΫΤσΟλ͔ΒGutenberg΁ ੩ւ ٛ໌ʢͣ͠Έʣ 2019-03-26

Slide 2

Slide 2 text

ࣗݾ঺հ 1990೥ʢฏ੒2೥ʣੜ·Ε ઐ໳ֶߍଔۀޙ ྲྀ௨ؔ܎ͷϓϩάϥϚʹ ݁ࠗΛظʹୀ৬ ಠཱͯ͠Webۀքʹ ݱࡏ͸ גࣜձࣾαϯφφ ͷऔక໾ ΋΍͍ͬͯ·͢ ฼ߍͷඇৗۈߨࢣ΋΍͍ͬͯ·͢ Twitter : @Shizumi0705 ൃදऀۙӨʢ̑೥લʣ

Slide 3

Slide 3 text

͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘ɹ

Slide 4

Slide 4 text

͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ACFΛۦ࢖ͯ͠࡞ͬͨ ΦϦδφϧͷϒϩοΫΤσΟλ

Slide 7

Slide 7 text

͍Ζ͍Ζͳ໰୊఺͕…

Slide 8

Slide 8 text

͍Ζ͍Ζͳ໰୊఺͕… ɾ ΧελϜϑΟʔϧυʹ͢΂ͯొ࿥͞ΕΔͨΊɺجຊతʹ͸ݕࡧʹֻ͔Βͳ͍ɻ ɾ ΧελϜϑΟʔϧυ΋ݕࡧର৅ʹ͢Ε͹Α͍͕ɺݕࡧʹ͕͔͔࣌ؒΔɻ ɾ ૢ࡞ϛε౳ͰผςʔϚʹมߋ͞ΕΔͱɺ಺༰͕Կ΋දࣔ͞Εͳ͍ɻ ɾ ผςʔϚΛೖΕͳ͍Α͏ʹ͍ͯ͠·͕ͨ͠ɺೲ඼ޙͷ୲౰ऀ͕͍Ζ͍Ζ৮ͬͨΓ…

Slide 9

Slide 9 text

هࣄอଘ࣌ʹग़ྗ಺༰Λ post_contentʹॻ͖ࠐΉॲཧΛ ௥Ճ͍ͯ͠·͢ɻ

Slide 10

Slide 10 text

Gutenbergͷొ৔

Slide 11

Slide 11 text

Gutenbergͷొ৔

Slide 12

Slide 12 text

͜Εͬͯࠓ·Ͱ࡞ͬͯͨ΋ͷʹ͍ۙʂʂ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

…ͱ͍͏͜ͱͰࠓ Gutenbergʹ߹Θͤͨ ઃܭͷ΍Γ௚͠Λ͍ͯ͠·͢

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ࣗ͝਎ͰGutenbergΛΧελϜ͢Δͱ͖ͷ ߟ͑ํͷҰྫͱͯ͠ޚཡ͍ͩ͘͞

Slide 17

Slide 17 text

ݟग़͠ཁૉ

Slide 18

Slide 18 text

͜Ε·Ͱ ɾ ݟग़͠ཁૉͷେ͖ܾ͞ఆ ɾ ը૾ʹ͢Δ͔ͷબ୒ʢσβΠϯʹґΔʣ

Slide 19

Slide 19 text

Gutenberg ɾ େ͖͞͸ϨΠΞ΢τͷબ୒ͰରԠ ɾ ը૾ˠΠϯϥΠϯը૾ͷ࢖༻

Slide 20

Slide 20 text

෼ׂίϯςϯπ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Gutenberg ɾ ΧϥϜϒϩοΫΛ࢖͑͹ղܾ ɾ ొ࿥಺༰ͷ࠶ઃఆ͸ෆཁ

Slide 23

Slide 23 text

ͱɺ͜͜·Ͱ͸ ඪ४Ͱ༻ҙ͞Ε͍ͯΔ΋ͷΛ࢖༻͍ͯ͠·͢

Slide 24

Slide 24 text

͍Ζ͍Ζͱ४උ͞Ε͍ͯΔͷͰศརͰ͢

Slide 25

Slide 25 text

ͨͩ͠… ग़ྗʹ͍ͭͯ͸ௐ੔Λ͢Δඞཁ͕͋Γ·͢

Slide 26

Slide 26 text

௨ৗͷग़ྗ͸

test

Slide 27

Slide 27 text

͜͏͍ͨ͠

Slide 28

Slide 28 text

ϒϩοΫϑΟϧλͷ blocks.getSaveElement Λ࢖༻͢Δ͜ͱͰɺ อଘܗࣜΛॻ͖׵͑Δ͜ͱ͕Ͱ͖·͢ɻ

Slide 29

Slide 29 text

https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/ ৄ͘͠͸ Gutenberg Handbook ͷ Block Filters Λ ޚཡ͍ͩ͘͞

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Block Filters Λۦ࢖͢Δ͜ͱͰରԠͰ͖·͢ɻ ɾblocks.registerBlockType ɾeditor.BlockEdit ɾblocks.getSaveContent.extraProps

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Gutenberg ɾ ෳ਺ݸͷೖྗཝ͕ଘࡏ͢Δ΋ͷ΋࡞੒Ͱ͖Δ ɾ ౤ߘը໘Ͱͷݟͨ໨͸CSSΛؤுΕ͹΄΅ಉ༷ʹ࡞੒Մೳ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

registerBlockTypeΛ࢖༻͠·͢

Slide 38

Slide 38 text

Handbookʹ͸ΧελϜϒϩοΫͷ ௥Ճͷํ๏΋νϡʔτϦΞϧͰࡌͬͯ·͢ʂ

Slide 39

Slide 39 text

ͪΒͬͱGoogleϚοϓͷݕࡧݟ͚͑ͨͲ…

Slide 40

Slide 40 text

GoogleϚοϓͷݕࡧ

Slide 41

Slide 41 text

ਖ਼௚Ұ൪ઃܭ͢Δ্Ͱ໽հͩͳ͊ͱ ࢥ͍ͬͯ·͢

Slide 42

Slide 42 text

PlaceSearchAPI͸͋ΔͷͰ ࡞Δ͜ͱ͸ՄೳͰ͢

Slide 43

Slide 43 text

ΫϥΠΞϯτ͝ͱʹAPIΩʔͷઃఆ͕ඞཁͳͷͰ ͦͷลΓผ్ը໘͕ඞཁʹͳΓͦ͏

Slide 44

Slide 44 text

Gutenberg͔Β͸཭ΕΔͷͰਂೖΓ͸͠·ͤΜ

Slide 45

Slide 45 text

ొ࿥͑͞Ͱ͖Ε͹ දࣔʹؔͯ͠͸͜Ε·Ͱಉ༷ʹͰ͖Δ͸ͣ

Slide 46

Slide 46 text

໰୊͸දࣔ༻ͷJS͸1౓͔͠ ग़ྗ͠ͳ͍ͱ͍͏෦෼

Slide 47

Slide 47 text

ηογϣϯ·Ͱʹௐ΂Α͏ͱࢥ͍ͬͯ·͕ͨ͠ ؒʹ߹͍·ͤΜͰͨ͠ ͝ΊΜͳ͍͞

Slide 48

Slide 48 text

޻෉࣍ୈͰ͸ରԠͰ͖Δ͸ͣͰ͢ʂ

Slide 49

Slide 49 text

ͱɺ͜Μͳײ͡ͰΰϦΰϦઃܭΛਐΊ͍ͯ·͢ɻ

Slide 50

Slide 50 text

ਖ਼௚ࢲ΋·ͩ·ͩษڧதͰ͢

Slide 51

Slide 51 text

࡞Γํʹ͍ͭͯ͸ઌਓୡ͕͍Βͬ͠ΌΔͷͰ ͦͷํͨͪͷ৘ใΛ ࢀߟʹ͍͖ͤͯͨͩ͞·͠ΐ͏

Slide 52

Slide 52 text

Gutenberg Handbook΋ಡΜͰΈ·͠ΐ͏ mimi͞Μ͕ઌఔ঺հ͞Ε·ͨ͠Ͷ

Slide 53

Slide 53 text

ӳޠා͘ͳ͍Α ֶੜͨͪʹ͍ͭ΋ݴ͏ݴ༿Ͱ͢ ࢲ΋ۤखͰ͢

Slide 54

Slide 54 text

ηογϣϯΛ࡞Δʹ͋ͨΓ ͍Ζ͍Ζ΍ͬͯΈ·͕ͨ͠

Slide 55

Slide 55 text

ௐ΂࢝ΊΔͱͪΐͬͱ೉ͦ͠͏ͳͷͰ͕͢ ҊͣΔΑΓ࢈Ή͕қ͠

Slide 56

Slide 56 text

࡞Γ͍ͨ΋ͷΛΏͬ͘Γਫ਼ࠪͯ͠੔ཧ͢Δ͜ͱ ͦͯ͠ɺઃܭΛ͔ͬ͠Γ͢Δ͜ͱ

Slide 57

Slide 57 text

Ͱ΋ཱͪࢭ·Γ͗ͣ͢ʹख΋ಈ͔ͯ͠ΈΔ͜ͱ

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

ࢲ͸ઃܭ͕Ұ൪ۤखͰ͢

Slide 60

Slide 60 text

ͦͯ͠…

Slide 61

Slide 61 text

࣮͸·ͩ໨ΛͦΉ͚͍ͯΔ໰୊͕͋Γ·͢

Slide 62

Slide 62 text

͜Ε·ͰͷΧελϜϑΟʔϧυͷ಺༰͸ post_metaʹઃఆ͞Ε͍ͯ·͢

Slide 63

Slide 63 text

ਖ਼ࣜʹҠߦ͢ΔͷͰ͋Ε͹ ͜Ε΋ίϯόʔτ͠ͳ͚Ε͹ͳΓ·ͤΜ

Slide 64

Slide 64 text

͜ͷลͷରॲͱ͔օ͞Μʹฉ͍ͯΈ͍ͨ͜ͱ͕ ͨ͘͞Μ͋Γ·͢ʂ

Slide 65

Slide 65 text

ͥͻ͜ͷ͋ͱͷ࠙਌ձͰ օ͞Μͱ৘ใަ׵͍ͤͯͩ͘͞͞ʂ

Slide 66

Slide 66 text

ݟ͍͖ͯͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

Slide 67

Slide 67 text

Any Questions?