少し変わったテーマ制作で役立ったver3.2の新機能

2025/11/21に名古屋で開催された「a-blog cms Training Camp 2025」で発表させていただいたスライドです。
オリジナルテーマ開発に役立ったa-blog cms ver3.2の新機能（ブロックエディタ／htmx）を、テーマの解説と合わせてご説明させていただきました。

Transcript

1. ΞΠσΞιʔε
   ৽
   ݠೋ 
   ΦϦδφϧςʔϚ։ൃ
    গ͠มΘͬͨςʔϚ੍࡞Ͱ໾ཱͬͨ
   ver3.2ͷ৽ػೳ
2. ৽
   ݠೋʢ͋Β͚ͨΜ͡ʣ BCMPHͷ࣌୅͔ΒѪ༻͓ͯ͠ΓɺBCMPH
   DNT
   7FS
   ϦϦʔε࣌ʹ͸ɺಉࠝ͞Εͨʮ$PNQBOZʯςʔϚͷ ੍࡞ʹ΋ؔΘ͓ͬͯΓ·ͨ͠ɻ
   
   झຯ͸ʜ
   ɾݹ͍ۭྫྷϑΥϧΫεϫʔήϯ
   ɾΧϝϥͱࣸਅ
   ɾΩϟϯϓ ࣗݾ঺հ גࣜձࣾΞΠσΞιʔε σ Ο ϨΫλʔ
   
   8FCɾάϥϑΟοΫσβΠφʔ
   BCMPH
   DNT
   QBSUOFS
   
   BCMPH
   DNT
   FYQFSU
3. ࠷ۙݟ͔͚ΔதԝʹεϚϗϨΠΞ΢τͷ
   ίϯςϯπΛઃ͚ͨʮεϫΠϓܕ-1ϖʔδʯ ςʔϚ੍࡞ͷഎܠ ˞ࢀߟΠϝʔδ ˙1$ ˙εϚϗ
4. εϫΠϓܕ-1ͷಛ௃ͱ͸ʁ ΦϦδφϧςʔϚ εϫΠϓܕ-1ͱ͸ɺεϚʔτϑΥϯͰͷૢ࡞ʹ࠷దԽ͞ΕͨɺεϫΠϓܗࣜͷ ϥϯσΟϯάϖʔδͰ͢ɻը໘ͣͭ৘ใΛݟͤΔߏ੒ͷͨΊɺετʔϦʔʹ ԊͬͯεϜʔζʹӾཡ͍͚ͯͨͩ͠Δ఺͕ಛ௃Ͱ͢ɻ
   ཭୤Λ཈͑ͳ͕Β࠷ޙ·ͰಡΈਐΊͯ΋Β͍΍͘͢ɺ4/4ͷΑ͏ͳૢ࡞ײ͔Β ए೥૚΍εϚʔτϑΥϯར༻͕த৺ͷϢʔβʔͱ૬ੑͷྑ͍ܗࣜͰ͢ɻ $IBU
   (15ʹฉ͍ͨΒ͜Μͳײ͡ʜ
5. BCMPH
   DNT
   WFSͷ
   ʮCFHJOOFSʯςʔϚΛར༻ͯ͠࡞ͬͯΈ·ͨ͠ʢ୞ࠓ։ൃதʣ ΦϦδφϧςʔϚ https://www.ideasource.jp/swipelp/
6. BCMPH
   DNT
   WFSͷ
   ʮCFHJOOFSʯςʔϚΛར༻ͯ͠࡞ͬͯΈ·ͨ͠ʢ୞ࠓ։ൃதʣ ΦϦδφϧςʔϚ https://www.ideasource.jp/swipelp/
7. BCMPH
   DNT
   WFSͷ
   ʮCFHJOOFSʯςʔϚΛར༻ͯ͠࡞ͬͯΈ·ͨ͠ʢ୞ࠓ։ൃதʣ ΦϦδφϧςʔϚ ˡϝΠϯΤϦΞʢ͜͜ΛεϫΠϓʣ
8. εϫΠϓ෦෼ͷߏ଄ ΦϦδφϧςʔϚ ˡॎ࣠͸ΧςΰϦʔ ˡԣ࣠͸ΤϯτϦʔ ˙εϫΠϓ෦෼ͷશମ૾ ˙ΤϯτϦʔͷߏ଄ʢΧελϜϑΟʔϧυͰ࣮ݱʣ ˡจষͳͲͷίϯςϯπ ˡը૾ ˡಈը ͭͷηΫγϣϯ
   ʢΧʔυʣ͸
   ϨΠϠʔߏ଄Ͱ࣮ݱ
9. ࠓճ஫໨ͨ͠WFSͷ৽ػೳ WFSͷ৽ػೳΛ੝ΓࠐΉ ɾϒϩοΫΤσΟλͷಋೖ
   ɾϑΥʔϜͰIUNYͷར༻
10. ࠓճ஫໨ͨ͠WFSͷ৽ػೳ WFSͷ৽ػೳΛ੝ΓࠐΉ ϒϩοΫΤσ Ολͷಋೖ
11. ΤϯτϦʔͷฤूը໘ ࠓճ஫໨ͨ͠WFSͷ৽ػೳ ˡΧελϜϑΟʔϧυͰ
    ɹϒϩοΫΤσΟλΛ࣮૷ ˡΧελϜϑΟʔϧυͰ
    ɹϝσΟΞΛ࣮૷
12. ϒϩοΫΤσΟλΛΧελϜϑΟʔϧυͰಋೖ ࠓճ஫໨ͨ͠WFSͷ৽ػೳ ˡϒϩοΫΤσΟλͰ࣮૷ʢಋೖ༻ʣ ˙Ұཡը໘
13. ϒϩοΫΤσΟλΛΧελϜϑΟʔϧυͰಋೖ ࠓճ஫໨ͨ͠WFSͷ৽ػೳ ˡϒϩοΫΤσΟλͰ࣮૷ʢΤϯτϦʔৄࡉ༻ʣ
    ʮଓ͖ΛಡΉʯతͳ΋ͷ ˙ΤϯτϦʔৄࡉը໘
14. ΧελϜϑΟʔϧυͰϒϩοΫΤσΟλΛͭಋೖ ࠓճ஫໨ͨ͠WFSͷ৽ػೳ ˡಋೖ༻ͱΤϯτϦʔৄࡉ༻Λ
    ɹ෼͚ͯઃఆ͢Δ͜ͱͰɺ
    ɹ಺༰Λ૿΍ͤΔΑ͏ʹ ˙ฤूը໘
15. ࠓճ஫໨ͨ͠WFSͷ৽ػೳ WFSͷ৽ػೳΛ੝ΓࠐΉ ϑΥʔϜͰIUNYͷར༻
16. IUNYΛϑΥʔϜʹར༻͠ૢ࡞ੑΛվળ ࠓճ஫໨ͨ͠WFSͷ৽ػೳ
17. IUNYΛϑΥʔϜʹར༻͠ૢ࡞ੑΛվળ ࠓճ஫໨ͨ͠WFSͷ৽ػೳ <!-- BEGIN step --> <!-- ϑΥʔϜεςοϓɿॳظ --> <div id="formarea_htmx" class="form-initial-step-layout acms-mb-10"> <!-- BEGIN_MODULE Touch_NotEdit --> <section> <h2 class="heading-lg">͓໰͍߹Θͤ</h2> @include("/contact/form/step.html") <form action="?step=reapply" method="post" class="js-unload_alert js-validator h-adr acms-form" enctype="multipart/form-data" hx-post="? step=reapply" hx-target="#formarea_htmx" hx-swap="outerHTML" hx-select="#formarea_htmx" hx-trigger="submit"> @include("/contact/form/input.html") <div class="form-button-group"> <input type="hidden" name="step" value="con fi rm" /> <input type="hidden" name="error" value="reapply" /> <input type="hidden" name="id" value="contactForm" /> <input type="submit" name="ACMS_POST_Form_Con fi rm" value="಺༰ͷ֬ೝ΁" id="btnCon fi rm" class="button is-lg is-width-lg" /> </div> </form> </section><!-- END_MODULE Touch_NotEdit --> </div> <!-- END step --> ֤TUFQʹIUNYͷ͓·͡ͳ͍Λ௥Ճ͢Δ
18. IUNYΛϑΥʔϜʹར༻͠ૢ࡞ੑΛվળ ࠓճ஫໨ͨ͠WFSͷ৽ػೳ <!-- BEGIN step#reapply --> <!-- ϑΥʔϜεςοϓɿमਖ਼ɾΤϥʔ --> <div id="formarea_htmx" class="step_reapply"> <script> //༣ศ൪߸Ͱͷॅॴิ׬ addEventListener('htmx:afterSwap', function (event) { ACMS.Dispatch(event.target); new YubinBango.MicroformatDom(); }); </script> <div class="acms-mb-10"> @include("/contact/form/step.html") <p class="form-message">಺༰Λ֬͝ೝ͍ͩ͘͞</p> <form action="?step=reapply" method="post" class="js-unload_alert js-validator h-adr acms-form" enctype="multipart/form-data" hx-post="? step=reapply" hx-target="#formarea_htmx" hx-swap="outerHTML" hx-select="#formarea_htmx" hx-trigger="submit"> @include("/contact/form/input.html") <div class="form-button-group"> <input type="hidden" name="step" value="con fi rm" /> <input type="hidden" name="error" value="reapply" /> <input type="hidden" name="id" value="contactForm" /> <input type="submit" name="ACMS_POST_Form_Con fi rm" value="಺༰ͷ֬ೝ΁" id="btnCon fi rm" class="button is-lg is-width-lg" /> </div> </form> . . . TUFQSFBQQMZͰ͸༣ศ൪߸ͷॅॴิ׬༻KTΛ࠶ಡΈࠐΈ
19. IUNYΛϑΥʔϜʹར༻͠ૢ࡞ੑΛվળ ࠓճ஫໨ͨ͠WFSͷ৽ػೳ <!-- BEGIN step#con fi rm --> <!-- ϑΥʔϜεςοϓɿ֬ೝը໘ --> <div id="formarea_htmx" class="step_con fi rm"> <div class="acms-mb-10"> <!-- ϑΥʔϜεςοϓ --> @include("/contact/form/step.html") <p class="form-message">಺༰Λ֬͝ೝ͍ͩ͘͞ɻ</p> @include("/contact/form/con fi rm.html") <div class="form-button-group"> <form action="?step=reapply" method="post" class="js-unload_alert form-button form-button-return" hx-post="?step=reapply" hx- target="#formarea_htmx" hx-swap="outerHTML" hx-select="#formarea_htmx" hx-trigger="submit"> <input type="hidden" name="step" value="reapply" /> <input type="hidden" name="takeover" value="{takeover}" /> <input type="submit" name="ACMS_POST_Form_Chain" value="मਖ਼͢Δ" class="button is-bordered" /> </form> <form action="" method="post" class="js-unload_alert form-button form-button-send" enctype="multipart/form-data" hx-post="" hx- target="#formarea_htmx" hx-swap="outerHTML" hx-select="#formarea_htmx" hx-trigger="submit"> <input type="hidden" name="To[]" value="{email}" /> <input type="hidden" name="AdminReply-To[]" value="{email}" /> <input type="hidden" name="AdminFrom[]" value="{email}" /> . . . TUFQDPO fi SNͰ͸IYQPTUlzʢۭʣʹ͢Δ ↑ ʢ࠷ޙͷpost͚ۭͩͰOKʣ
20. IUNYΛϑΥʔϜʹར༻͠ૢ࡞ੑΛվળ ࠓճ஫໨ͨ͠WFSͷ৽ػೳ JOQVU
    DMBTT
    #&(*/@*'
    <\IPHFW^FR>
    
    JOWBMJE
    &/%@*'
    
    
    
    
    #&(*/@*'
    <\IPHFW^FR>
    
    
    
    BSJBJOWBMJEUSVF
    
    
    
    &/%@*'
    
     Τϥʔը໘Ͱඞਢ߲໨ͷ੺࿮Λద༻͢Δ
21. IUNYΛϑΥʔϜʹར༻͠ૢ࡞ੑΛվળ ࠓճ஫໨ͨ͠WFSͷ৽ػೳ ɾ֤TUFQͷXSBQQFSʹڞ௨ͷ
    JElGPSNBSFB@IUNYzΛઃఆ͠
    ɹ֤GPSNʹIYQPTU IYUBSHFU IYTXBQ IYTFMFDU IYUSJHHFSΛઃఆ
    ɾTUFQSFBQQMZͰ༣ศ൪߸ิ׬KTΛ࠶࣮ߦ͢Δ
    ɾWBMJEBUJPOͷ੺࿮ʹ͸ʮJOWBMJEʯॲཧΛ௥Ճ
22. ࠷ޙʹͻͱ͜ͱ ͝঺հͨ͠48*1&ܕςʔϚ͸ݱࡏ։ൃதͰ͕͢ɺ
    ؾʹͳΔ఺ͳͲ͋Ε͹ؾܰʹ͓੠͕͚͍ͩ͘͞ɻ
    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ