Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

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

Other Decks in Design

Transcript

  1. 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ͷ͓·͡ͳ͍Λ௥Ճ͢Δ
  2. 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Λ࠶ಡΈࠐΈ
  3. 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ʣ