htmx と a-blog cms の相性が良さそうな理由

htmx のことを調べてここに辿り着いた方は、a-blog cms を知らないかもしれませんので、少しだけ説明をしておきます。

a-blog cms とは

a-blog cms は、PHP + MySQL で動作する国産のローコードCMSです。基本的にはHTMLファイルとしてテンプレートを作成し、PHP や JavaScript などの難しいことを書かずにウェブサイトを作成できるCMS（コンテンツ・マネージメント・システム）です。

a-blog cms には htmx に似た Ajax 機能が標準搭載

a-blog cms には「post include」機能という名称で、10年以上前から htmx のような Ajax 機能が用意されています。よく利用される記述を以下にサンプルコードとして紹介します。

<form action="" method="POST" class="js-post_include" target="#result">
  <input type="text" name="keyword" value="%{KEYWORD}">
  <input type="hidden" name="tpl" value="/include/search-result.html">
  <input type="submit" name="ACMS_POST_2GET_Ajax" value="検索">
</form>
<div id="result">検索結果を表示</div>

post include 機能は、form タグに class="js-post_include" を設定することで、ページ遷移をせずに Ajax でページを更新します。form のボタンがクリックされると、target="#result" で指定されたエリアに、指定したテンプレート（/include/search-result.html）を用いて情報を表示します。

読み込まれる /include/search-result.htm のコード

<!-- BEGIN_MODULE Entry_List id="search-result" -->
  <ul>
    <!-- BEGIN entry:loop -->
      <li><a href="{url}">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
<!-- END_MODULE Entry_List -->

読み込みたい HTML だけを記述したテンプレートファイルを用意することで必要な HTML を部分的に読み込むことが可能です。その際には、特に PHP や SQL といったバックエンド側の事は何も書く必要がありません。

post include を htmx に置き換えてみる

作業は簡単で <form> タグ部分の属性を書き換えます。class の指定を hx-post に、target を hx-target に変更します。

<form action="" method="POST" hx-post="" hx-target="#result">
  <input type="text" name="keyword" value="%{KEYWORD}">
  <input type="hidden" name="tpl" value="/include/search-result.html">
  <input type="submit" name="ACMS_POST_2GET_Ajax" value="検索">
</form>
<div id="result">検索結果を表示</div>

ほとんど実装部分は同じで大丈夫なことが分かります。あとは <head> に htmx のライブラリの読み込みをするだけです。

<script src="https://unpkg.com/htmx.org@2.0.1"></script>

post include ではなく htmx にするメリット

同じことができるだけであれば、そのまま標準的な post include 機能を利用すればいいことになりますが、htmx を利用するメリットを紹介しておきます。

POST だけでなく GET も利用可能

post include という名前の通り a-blog cms の標準機能では POST（ <form>タグの中）での利用ということになり、使える場所の制限があります。 htmx を利用することにより GET での利用が可能になります。

<a href="sample.html" hx-get="sample.html" hx-target="#result">クリック</a>

History API を利用可能

Ajax でコンテンツを更新する際に、そのコンテンツ自身の URL がある場合、その URL に書き換える History API に対応しています。このコンテンツを Ajax で読み込んで表示してご覧になっているのであれば URL を確認してみてください。

設定としては hx-push-url="true" を追加するだけです。

<a href="sample.html" hx-get="sample.html" hx-target="#result" hx-push-url="true">クリック</a>

合わせて、タイトルタグの変更も変更することができますので、ブラウザの履歴を確認すると URL とタイトルが記録されていることも確認できるのではないでしょうか。

複数 target の更新可能

hx-target="#result" を更新するのが標準的な機能ではありますが、読み込む HTML 側に id="result" で表示する以外のコンテンツも追加で記述をすることで、他のエリアも更新が可能です。