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

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

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

76e74d380818461ec19cb0fed3e0ad28?s=128

Shizumi Yoshiaki

March 26, 2019
Tweet

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?