a-blog cmsの「カスタムユニット」と、WordPressの「Gutenberg」のカスタマイズを比較する

2020年5月12日にオンラインで開催された「a-blog cms zoom up 2020/05」の発表スライドです。a-blog cmsとWordPressのGutenberg（グーテンベルク）はどちらもブロック形式のエディタですが、カスタマイズする場合の手順、注意点は大きく異なります。

1. BCMPH
   DNTͷΧελϜϢχοτͱ
   8PSE1SFTTͷ(VUFOCFSHͷ
   ΧελϚΠζΛൺֱ͢Δ ΢ΣϏϯάελδΦɹޱాɹ੟ࢠ
   ʢ5VFʣɹ๛ڮࢢͷࣗ୐ BCMPH
   DNT
   [PPN
   VQ
   
2. ޱాɹ੟ࢠ ͪͩ͘ ʢ͏͐ͼΜʣ ͍ͤ͜ XFCCJOHTUVEJP ϑϩϯτΤϯυΤϯδχΞ
   BCMPH
   DNTΤόϯδΣϦετ XFCCJOHTUVEJPDPN Ѫ஌ݝ
   ๛ڮࢢ
3. ·ͩߦͬͯͳ͍ΜͰ͢ΑͶ ίϩφ͋͋͋͋͋͋͋͋
4. 8PSE1SFTTͷϒϩοΫΤσΟλ
   (VUFOCFSH ϦϦʔε͔Β΋͏͙͢Ұ೥൒
6. (VUFOCFSHΛ
   ׬શʹఀࢭ͢ΔϓϥάΠϯ
7. Α͘܇࿅͞Εͨ
   BCMPH
   DNTϢʔβʔͷײ૝ ΧελϚΠζ͸
   ͦΜͳʹ
   ೉͘͠ͳ͍Αʜʁ
8. ର؛ͷՐࣄ͡Όͳ͍
   (VUFOCFSHීٴʹΑΔӨڹ ‣ 8PSE1SFTT͔Βͷ
   ৐Γ׵͑೉қ౓͕ߴ͘ͳΔ
   ‣ ൃ஫ऀଆͷʮϒϩοΫΤσΟλʯʹର͢Δ
   ظ଴஋͕ߴ͘ͳΔ
   ‣ ޻਺ͷಡΈҧ͍
9. BCMPH
   DNTͱ
   ޻ఔ͕ͲͷΑ͏ʹҧ͏͔
   ࣮ࡍʹݟͯΈ·͠ΐ͏
10. ⁞
    ؆୯ͳΧελϚΠζͷൺֱ
11. Iݟग़͠ʹ
    ελΠϧΛ௥Ճ͠Α͏ ݟग़̎͠ ݟग़̎͠@Լઢ෇͖ ݟग़̎͠@ΞϛΧέ
12. ฤूઃఆͰ
    ςΩετϢχοτͰ࢖͑ΔλάΛ௥Ճ
13. ࢦఆͨ͠Ϋϥε͕෇༩͞ΕΔͷͰ
    $44Λॻ͘
14. ςʔϚʹ+BWB4DSJQUΛ௥Ճ͠
    ϒϩοΫελΠϧΛఆٛ͢Δؔ਺Λॻ͘
15. ࢦఆͨ͠Ϋϥε͕෇༩͞ΕΔͷͰ
    $44Λॻ͘
16. ΄΅ಉ͡޻਺͕ͩ ‣ ฤूը໘ͷϓϨϏϡʔ༻$44΋ඞཁ
    ‣ Ϋϥε໊͕ࣗ༝ʹͳΒͳ͍
    ‣ ݟग़͠ϒϩοΫͷ৔߹
    IʙI
    ͢΂ͯʹ࢖͑ͯ͠·͏ ɹɹͷํ͕গ͠ख͕͔͔ؒΔ
17. ݟग़̐͠ʹ
    ࢖ͬͨΜͰ͕͢
    ่Εͯ͠·͍·ͨ͠ ああん
18.  
    ෳࡶͳΧελϚΠζͷൺֱ
19. ਧ͖ग़͕͠࡞ΕΔ
    ϢχοτɾϒϩοΫΛ௥Ճ͠Α͏
20. ฤूઃఆɾϢχοτઃఆͰ
    ͜Ε͔Β࡞੒͢ΔϢχοτΛొ࿥
21. ςʔϚ಺ͷࢦఆ͞Εͨ৔ॴʹ
    ೖྗϑΥʔϜɾදࣔ෦෼ͷ)5.-Λॻ͘ ΧελϜϑΟʔϧυϝʔΧʔͰ
    ࡞ͬͯίϐϖ͢Δ͚ͩ
22. ΧελϜϢχοτͷ
    ެࣜυΩϡϝϯτ͕͍͋·͍ ⁞
    υΩϡϝϯτʹܝࡌ͞Ε͍ͯΔखॱ
    ʢෳ਺ͷϢχοτΛ࡞੒Ͱ͖ͳ͍ʣ
    IUUQTEFWFMPQFSBCMPHDNTKQEPDVNFOUVOJUTDVTUPNIUNM
     
    ͏͐ͼΜ͞Μਪનͷखॱ
    IUUQTEFWFMPQFSBCMPHDNTKQIBOETPODBNQTQSJOH DVTUPN@VOJUIUNMFOUSZ ⁞ͱ ͷ޻਺ͷҧ͍͸Θ͔ͣͰ͢
23. 8PSE1SFTTެࣜͷϒϩοΫ࡞੒͸
    ͔ͳΓ೉͍͠ɹͿͬͪΌ͚ݩ͕औΕΜ IUUQTXXXXFCPQJYFMOFUXPSEQSFTTIUNM ͖ͪΜͱ࡞੒͢ΔͳΒ
    ϓϥάΠϯ։ൃͷ
    ஌͕ࣝඞཁ
24. #MPDL
    -BC
    ϓϥάΠϯͳΒ
    ؅ཧը໘͔Β࡞੒Ͱ͖Δʂ IUUQTKBXPSEQSFTTPSHQMVHJOTCMPDLMBC
25. #MPDL
    -BCͷઃఆը໘Ͱ
    ϒϩοΫͷೖྗ߲໨Λొ࿥͢Δ
26. ςʔϚ಺ͷࢦఆ͞Εͨ৔ॴʹ
    දࣔ෦෼ͷ)5.-Λॻ͘ υΩϡϝϯτΛ
    ࢀߟʹͯ͠
    खॻ͖͢Δ
27. ϓϨϏϡʔ༻$44΋ඞཁ
28. ϢχοτɾϒϩοΫ௥Ճ͸
    Ұ௕Ұ୹ ‣ ࢖͍ճ͠ɾΞϨϯδࣗࡏ
    ̎ճ໨Ҏ͕߱ͥΜͥΜҧ͏
    ‣ ϢχοτઃఆΛ๨Ε͕ͪ
    ‣ ॳճͷ੍࡞͸
    Ͳ͏ͯ͠΋޻਺͕ߴ͍ ‣ ϒϥ΢β͔Βͷొ࿥͸
    ָͰΘ͔Γ΍͍͢
    ‣ ։ൃऀ΁ͷαϙʔτඞਢ
    ‣ ࢖͍ճͤͳ͍
    ʹΤΫεϙʔτͰ͖ͳ͍
29. աڈͷΤϯτϦʔΛબΜͰ
    දࣔͰ͖ΔϢχοτΛ
    ࡞ͬͯ͘Ε·ͤΜ͔ にゃーん
30. ೉͍͠ʂ ฤूը໘͕ͱͯ΋ॏ͘ͳΔͷͰ
    Ωϟογϡͷ࡞੒͕ඞཁ ਓؾϓϥάΠϯͷ༗ྉ൛ͳΒʜ IUUQTXXXBEWBODFEDVTUPNpFMETDPN SFTPVSDFTCMPDLT
31. ⁠
    ޻਺ͷ͹Β͖ͭ
32. ޻਺ɿখ ޻਺ɿେ ε λ Π ϧ ͷ ௥ Ճ Χ ε λ Ϝ Ϣ χ ỽ τ ͷ ௥ Ճ ط ଘ Ϣ χ ỽ τ ͷ ̘ ̨ ̨ ௐ ੔ ά ϧ ồ ϓ ΍ Τ ε έ ồ ϓ ͕ ͋ Δ
    Χ ε λ Ϝ Ϣ χ ỽ τ ͷ ௥ Ճ ˞͏͐ͼΜͷओ؍Ͱ͢
33. ޻਺ɿখ ޻਺ɿେ Χ ϥ ồ ς ồ ϒ ϧ ͷ ௥ Ճ ε λ Π ϧ ͷ ௥ Ճ ϒ ϩ ỽ Ϋ ͷ ׬ શ ࣗ ࡞ ϓ ϥ ά Π ϯ Ͱ ϒ ϩ ỽ Ϋ ௥ Ճ ط ଘ ϒ ϩ ỽ Ϋ ͷ ̘ ̨ ̨ ௐ ੔ ˞͏͐ͼΜͷओ؍Ͱ͢
34. ελΠϧͷ௥Ճ͸
    ͲͪΒ΋؆୯
35. 8PSE1SFTT͸
    طଘϒϩοΫͷ
    छྨ͕ଟ͍
    
    σβΠϯࢦ͕ࣔ
    ଟ͍΄Ͳ
    ޻਺͕૿͑Δ
36. ؆୯ͳ
    ΧελϚΠζͳΒ
    8PSE1SFTTͷํ͕
    ޻਺͕গͳ͍
    ʜ͕
    ͩ͜ΘΔͱ
    ͍͖ͳΓ೉͘͠ͳΔ
37. 
    ɹͱ͖Ͳ͖ɹɹ
    Ͱड஫ͯ͠Δͱ ͜ΕɺBCMPH
    DNTͰ͸
    Ͱ͖ͳ͍ͷ͔ʜ BCMPH
    DNTΈ͍ͨʹ
    Ͱ͖Δͱࢥͬͯͨʜ やっべー
38. ⁡
    ஈ૊ػೳͷτϥοϓ
39. ஈ૊ɾഎܠ৭Λ࡞ΕΔ
    Ϣχοτάϧʔϓ͸ɺͭ·͖ͮ΍͍͢
40. Ϣχοτάϧʔϓͷػೳ੍ݶ ‣ qFYCPY
    $44
    (SJEͷஈ૊͕Ͱ͖ͳ͍
    ʹqPBUͷΈ
    ‣ άϧʔϓΛೖΕࢠʹͰ͖ͳ͍ େ෯ͳख໭ΓʹͳΔ͜ͱ΋ʜ ࣍ظόʔδϣϯظ଴͓ͯ͠Γ·͢
    N @@ N
41. 8PSE1SFTT͸
    ΧϥϜ ஈ૊ Λ
    άϧʔϓԽͰ͖Δ άϧʔϓͷ
    ೖΕࢠ΋Ͱ͖Δʂ ૢ࡞೉͍͚͠Ͳʜ
42. ΧϥϜϒϩοΫ͸
    ࡉ͔͍റΓ͕ଟ͍ ͜ͷબ୒ࢶ͸
    ؆୯ʹม͑ΒΕͳ͍
44. ΠϯϥΠϯελΠϧ ΠϯϥΠϯελΠϧ ΠϯϥΠϯελΠϧ
45. ̏ஈ૊͸
    σεΫτοϓը໘Ͱ
    ༨നΛ૿΍ͯ͠΄͍͠Ͱ͢ うふふ
46. ̐ஈ૊͸
    εϚʔτϑΥϯը໘Ͱ
    ̎ஈ૊ʹͯ͠΄͍͠Ͱ͢ てへっ
47. ·͋
    ͍Ζ͍Ζௐ΂·͕ͨ͠
48. ͜Ε͚ͩ͸
    ݴΘͶ͹ͳΔ·͍
49. Զͨͪͷ࣌୅͕དྷͨʂ
50. BCMPH
    DNTϢʔβʔʹ༗ར͔΋
    (VUFOCFSHීٴʹΑΔӨڹ ‣ ๛෋ͳϒϩοΫΤσΟλͷΧελϚΠζܦݧͰ
    ΑΓྑ͍ఏҊ
    ‣ 8PSE1SFTTத৺ͩͬͨڠۀઌ΋
    ϒϩοΫΤσΟλΛཧղ͠΍͘͢ͳΔ
    ‣ (VUFOCFSHʹ࠳ંͨ͠ਓΛBCMPH
    DNTʹʜʁ
51. )5.-ͷ஌͚ࣝͩͰ
    ߏஙͰ͖Δ
    BCMPH
    DNT͸
    ΍ͬͺΓ͍͢͝ うんうん
52. ͋Γ͕ͱ͏͍͟͝·ͨ͠ ίϯςϯπʹ৘೤ΛɺϚωʔδϝϯτʹ୳ٻΛ XFCCJOHTUVEJPDPN