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

2019年3月27日に開催されたWP Zoom UP #13で発表したミニセッションのスライドです。

Transcript

1. ΧελϜϑΟʔϧυ੡଄ۀ͔Βͷ୤٫ ΦϦδφϧϒϩοΫΤσΟλ͔ΒGutenberg΁ ੩ւ ٛ໌ʢͣ͠Έʣ 2019-03-26
2. ࣗݾ঺հ 1990೥ʢฏ੒2೥ʣੜ·Ε ઐ໳ֶߍଔۀޙ ྲྀ௨ؔ܎ͷϓϩάϥϚʹ ݁ࠗΛظʹୀ৬ ಠཱͯ͠Webۀքʹ ݱࡏ͸ גࣜձࣾαϯφφ ͷऔక໾ ΋΍͍ͬͯ·͢ ฼ߍͷඇৗۈߨࢣ΋΍͍ͬͯ·͢ Twitter : @Shizumi0705 ൃදऀۙӨʢ̑೥લʣ
3. ͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘ɹ
4. ͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘
5. ͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘ ίϯςϯπͷछྨΛબ୒ छྨʹ߹Θͤͨ಺༰Λొ࿥
6. ACFΛۦ࢖ͯ͠࡞ͬͨ ΦϦδφϧͷϒϩοΫΤσΟλ
7. ͍Ζ͍Ζͳ໰୊఺͕…
8. ͍Ζ͍Ζͳ໰୊఺͕… ɾ ΧελϜϑΟʔϧυʹ͢΂ͯొ࿥͞ΕΔͨΊɺجຊతʹ͸ݕࡧʹֻ͔Βͳ͍ɻ ɾ ΧελϜϑΟʔϧυ΋ݕࡧର৅ʹ͢Ε͹Α͍͕ɺݕࡧʹ͕͔͔࣌ؒΔɻ ɾ ૢ࡞ϛε౳ͰผςʔϚʹมߋ͞ΕΔͱɺ಺༰͕Կ΋දࣔ͞Εͳ͍ɻ ɾ ผςʔϚΛೖΕͳ͍Α͏ʹ͍ͯ͠·͕ͨ͠ɺೲ඼ޙͷ୲౰ऀ͕͍Ζ͍Ζ৮ͬͨΓ…
9. هࣄอଘ࣌ʹग़ྗ಺༰Λ post_contentʹॻ͖ࠐΉॲཧΛ ௥Ճ͍ͯ͠·͢ɻ
10. Gutenbergͷొ৔
11. Gutenbergͷొ৔
12. ͜Εͬͯࠓ·Ͱ࡞ͬͯͨ΋ͷʹ͍ۙʂʂ
13. ͡Ό͋࡞Γม͑ͪΌ͑͹ྑ͍͡ΌΜʂʂʂ
14. …ͱ͍͏͜ͱͰࠓ Gutenbergʹ߹Θͤͨ ઃܭͷ΍Γ௚͠Λ͍ͯ͠·͢
15. ຊ೔͸ͦͷ࡞ۀͷߟ͑ํʹ͍ͭͯͷ͓࿩Ͱ͢
16. ࣗ͝਎ͰGutenbergΛΧελϜ͢Δͱ͖ͷ ߟ͑ํͷҰྫͱͯ͠ޚཡ͍ͩ͘͞
17. ݟग़͠ཁૉ
18. ͜Ε·Ͱ ɾ ݟग़͠ཁૉͷେ͖ܾ͞ఆ ɾ ը૾ʹ͢Δ͔ͷબ୒ʢσβΠϯʹґΔʣ
19. Gutenberg ɾ େ͖͞͸ϨΠΞ΢τͷબ୒ͰରԠ ɾ ը૾ˠΠϯϥΠϯը૾ͷ࢖༻
20. ෼ׂίϯςϯπ
21. ͜Ε·Ͱ ɾ ࠨӈʹԿΛ഑ஔ͢Δ͔Λࡉ͔͘બ୒ ɾ ௥ՃͰ͖Δ಺༰Λݸผʹ࠶ઃఆ͢Δඞ ཁ͕͋Δ
22. Gutenberg ɾ ΧϥϜϒϩοΫΛ࢖͑͹ղܾ ɾ ొ࿥಺༰ͷ࠶ઃఆ͸ෆཁ
23. ͱɺ͜͜·Ͱ͸ ඪ४Ͱ༻ҙ͞Ε͍ͯΔ΋ͷΛ࢖༻͍ͯ͠·͢
24. ͍Ζ͍Ζͱ४උ͞Ε͍ͯΔͷͰศརͰ͢
25. ͨͩ͠… ग़ྗʹ͍ͭͯ͸ௐ੔Λ͢Δඞཁ͕͋Γ·͢
26. ௨ৗͷग़ྗ͸ <h2>test</h2>
27. ͜͏͍ͨ͠ <div class="grid_10 prefix_1 suffix_1”> <h2>test</h2> </div>
28. ϒϩοΫϑΟϧλͷ blocks.getSaveElement Λ࢖༻͢Δ͜ͱͰɺ อଘܗࣜΛॻ͖׵͑Δ͜ͱ͕Ͱ͖·͢ɻ
29. https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/ ৄ͘͠͸ Gutenberg Handbook ͷ Block Filters Λ ޚཡ͍ͩ͘͞
30. ඪ४Ͱ༻ҙ͞Ε͍ͯΔ͚Ͳɺ ઃఆ߲໨͕଍Γͳ͍ͱ͖͸ʁ
31. Block Filters Λۦ࢖͢Δ͜ͱͰରԠͰ͖·͢ɻ ɾblocks.registerBlockType ɾeditor.BlockEdit ɾblocks.getSaveContent.extraProps
32. શ͘৽͍͠ϒϩοΫΛ࡞Γ͍ͨ
33. ͓໰͍߹Θͤઌ৘ใ ͜Μͳͷ
34. ͜Ε·Ͱ ɾ ܾ·ͬͨ಺༰Λॱ൪ʹొ࿥͍ͯ͘͠ ɾ ొ࿥࣌ͷݟ͑ํͱαΠτ্Ͱͷݟ͑ํ ͸ҟͳΔ
35. Gutenberg ɾ ෳ਺ݸͷೖྗཝ͕ଘࡏ͢Δ΋ͷ΋࡞੒Ͱ͖Δ ɾ ౤ߘը໘Ͱͷݟͨ໨͸CSSΛؤுΕ͹΄΅ಉ༷ʹ࡞੒Մೳ
36. ΧελϜϒϩοΫͷ௥Ճํ๏͸ʁ
37. registerBlockTypeΛ࢖༻͠·͢
38. Handbookʹ͸ΧελϜϒϩοΫͷ ௥Ճͷํ๏΋νϡʔτϦΞϧͰࡌͬͯ·͢ʂ
39. ͪΒͬͱGoogleϚοϓͷݕࡧݟ͚͑ͨͲ…
40. GoogleϚοϓͷݕࡧ
41. ਖ਼௚Ұ൪ઃܭ͢Δ্Ͱ໽հͩͳ͊ͱ ࢥ͍ͬͯ·͢
42. PlaceSearchAPI͸͋ΔͷͰ ࡞Δ͜ͱ͸ՄೳͰ͢
43. ΫϥΠΞϯτ͝ͱʹAPIΩʔͷઃఆ͕ඞཁͳͷͰ ͦͷลΓผ్ը໘͕ඞཁʹͳΓͦ͏
44. Gutenberg͔Β͸཭ΕΔͷͰਂೖΓ͸͠·ͤΜ
45. ొ࿥͑͞Ͱ͖Ε͹ දࣔʹؔͯ͠͸͜Ε·Ͱಉ༷ʹͰ͖Δ͸ͣ
46. ໰୊͸දࣔ༻ͷJS͸1౓͔͠ ग़ྗ͠ͳ͍ͱ͍͏෦෼
47. ηογϣϯ·Ͱʹௐ΂Α͏ͱࢥ͍ͬͯ·͕ͨ͠ ؒʹ߹͍·ͤΜͰͨ͠ ͝ΊΜͳ͍͞
48. ޻෉࣍ୈͰ͸ରԠͰ͖Δ͸ͣͰ͢ʂ
49. ͱɺ͜Μͳײ͡ͰΰϦΰϦઃܭΛਐΊ͍ͯ·͢ɻ
50. ਖ਼௚ࢲ΋·ͩ·ͩษڧதͰ͢
51. ࡞Γํʹ͍ͭͯ͸ઌਓୡ͕͍Βͬ͠ΌΔͷͰ ͦͷํͨͪͷ৘ใΛ ࢀߟʹ͍͖ͤͯͨͩ͞·͠ΐ͏
52. Gutenberg Handbook΋ಡΜͰΈ·͠ΐ͏ mimi͞Μ͕ઌఔ঺հ͞Ε·ͨ͠Ͷ
53. ӳޠා͘ͳ͍Α ֶੜͨͪʹ͍ͭ΋ݴ͏ݴ༿Ͱ͢ ࢲ΋ۤखͰ͢
54. ηογϣϯΛ࡞Δʹ͋ͨΓ ͍Ζ͍Ζ΍ͬͯΈ·͕ͨ͠
55. ௐ΂࢝ΊΔͱͪΐͬͱ೉ͦ͠͏ͳͷͰ͕͢ ҊͣΔΑΓ࢈Ή͕қ͠
56. ࡞Γ͍ͨ΋ͷΛΏͬ͘Γਫ਼ࠪͯ͠੔ཧ͢Δ͜ͱ ͦͯ͠ɺઃܭΛ͔ͬ͠Γ͢Δ͜ͱ
57. Ͱ΋ཱͪࢭ·Γ͗ͣ͢ʹख΋ಈ͔ͯ͠ΈΔ͜ͱ
58. खΛಈ͔͢ͷָ͍ͬͯ͠Ͱ͢ΑͶʂ
59. ࢲ͸ઃܭ͕Ұ൪ۤखͰ͢
60. ͦͯ͠…
61. ࣮͸·ͩ໨ΛͦΉ͚͍ͯΔ໰୊͕͋Γ·͢
62. ͜Ε·ͰͷΧελϜϑΟʔϧυͷ಺༰͸ post_metaʹઃఆ͞Ε͍ͯ·͢
63. ਖ਼ࣜʹҠߦ͢ΔͷͰ͋Ε͹ ͜Ε΋ίϯόʔτ͠ͳ͚Ε͹ͳΓ·ͤΜ
64. ͜ͷลͷରॲͱ͔օ͞Μʹฉ͍ͯΈ͍ͨ͜ͱ͕ ͨ͘͞Μ͋Γ·͢ʂ
65. ͥͻ͜ͷ͋ͱͷ࠙਌ձͰ օ͞Μͱ৘ใަ׵͍ͤͯͩ͘͞͞ʂ
66. ݟ͍͖ͯͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
67. Any Questions?