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

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?