ナビゲーションモジュールについては基本的には、管理画面から手動で自由にラベル・リンクを設定し、更新可能にするためのモジュールですが、例えば「採用情報」のコンテンツ以下のエントリーを追加した際に自動で増えるようなメニューに実装したいと思ったことはありませんでしょうか。

採用情報の公開のチェックを外し非表示にします。右側の（追加）ボタンをクリックし、ナビゲーションを 1行追加してください。

ここで、ラベルに acms://bid/1/cid/7/tpl/navi.html と記述します。 こうする事で、ラベルを編集する際に、acms:// で a-blog cms を再度実行し、bid=1 & cid=7の条件 で テンプレートnavi.html をラベルに編集することになります。

この機能は、1.x から実装されている機能ではありましたが、1回表示する際に a-blog cms をもう一度動作させて結果を取得する という事で、2倍の負荷になる事から、あまり推奨される記述ではありませんでした。推奨されない裏技として封印されてきていました。これを解決するために、テンプレートの部分的書き出し という機能で回避するという手段も用意されています。

しかし、Ver. 2.11.0 からモジュールID のキャッシュ機能ができた事から、本番環境では モジュールID キャッシュ を有効（0分 → 60分） にする事で、60分に1回しか2回動かさないことができるようになりました。

<!-- BEGIN_MODULE Navigation id="nav_global" -->
<nav class="navbar" aria-label="メインメニュー">
@include("/admin/module/setting.html")
<!-- BEGIN navigation:loop -->
	<!-- BEGIN ul#front --><ul><!-- END ul#front -->
		<!-- BEGIN li#front --><li {attr}><!-- END li#front -->
			<!-- BEGIN link#front --><!-- BEGIN_IF [{url}/nem] --><a href="{url}" {attr} target="{target}"><!-- END_IF --><!-- END link#front -->
			{label}[raw]
			<!-- BEGIN link#front --><!-- BEGIN_IF [{url}/nem] --></a><!-- END_IF --><!-- END link#front -->
			<!-- BEGIN li#rear --></li><!-- END li#rear -->
	<!-- BEGIN ul#rear --></ul><!-- END ul#rear -->
<!-- END navigation:loop -->
<a href="#top" class="acms-hide-tb acms-hide-pc">メニューを閉じる</a>
</nav>
<!-- END_MODULE Navigation -->

<!-- BEGIN_MODULE Entry_List id="recruit_navi" -->
<a href="%{HOME_URL}recruit/">採用情報</a>
  <ul>
    <!-- BEGIN entry:loop -->
    <li class="js-link_match_location"><a href="{url}">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
<!-- END_MODULE Entry_List -->

acms:// で「モジュールID」も設定できるようにすることができると汎用的に使えるテンプレートになるのですが、{{module_id}} のような変数が使える前の時代に用意され、変わっていない機能なので、ここでは recruit_navi のモジュールID固定で用意することになります。

acms://bid/1/cid/7/tpl/navi.html と書いてたので、カテゴリーID にチェックをつけていますが、モジュールID でカテゴリーを指定してしまう書き方でも大丈夫です。

acms://bid/1/field/gnavi/on/tpl/navi.html

また、field/name/value を追加してカスタムフィールドにチェックがあるものだけをメニューに表示させるような書き方もできます。

最近のバージョンでは、tpl の利用について制限が加えられていますので、特定のファイルのみを tpl 利用可能に設定する必要があります。

allow_tpl_path: [navi.html]

forbid_tpl_inheritance_when_path_unresolved や forbid_tpl_url_context が on の場合、除外するパスを設定します。例: [news.html,hoge/custom.html] カンマ区切りで指定

html_format_validate: off

htmlフォーマットでない場合は404で返す設定になります。

Ver.2.10よりルール機能に新しく「ログインユーザー権限」が追加されました。この追加されたルールを利用することで、投稿権限や管理者権限などの権限に応じて管理画面に表示するメニューを出し分けることも可能です。

設定方法

1. 権限用のルールを追加する

今回は「投稿者権限」のためのルールを新しく追加します。管理画面 > ルールよりルール管理画面に移動し、ルールを作成してください。ルール名は任意に決めてください。ここでは、「投稿者の場合」としています。

次に、ルールの詳細情報を設定します。Ver.2.10より詳細情報の設定で、「ログインユーザー情報」という項目が追加されています。今回は、投稿者の場合のルールを作成したいので、赤枠の左のセレクターを「=」に、右側のセレクターを「投稿者」に設定してください。

その後、「作成」ボタンをクリックしてルールを保存してください。

次に「メニュー管理」のページに移動します。管理画面の左のバーティカルメニューから？マークをクリックし表示されるドロップダウンメニューから「メニュー管理」を選択してください。

メニュー管理ページに移動した後、画面上部にある、「ルール」から先ほど作成した「投稿者の場合」のルールを選択してください。

あとは必要な投稿者に必要なメニューを選別し、必要のないメニューは「表示させない」レーンにドラッグして保存します。

実際に投稿者のアカウントでログインすると、管理メニューが「エントリー」だけになっていることが確認できます。

ウェブサイトやブログをよりインタラクティブにするためには、革新的な技術の採用が欠かせません。特に a-blog cms を使用している皆さんにとって、post include 機能は、フォームの POSTメソッドを介したデータ送信に依存することで、コンテンツの動的な組み込みや更新を可能にする強力なツールとして知られています。しかし、この機能の利用シナリオが POSTメソッドに限定されていることは、その潜在能力を完全には引き出していないかもしれません。

そこで登場するのが htmx です。この軽量な JavaScriptライブラリは、HTML を直接拡張し、Ajax、CSS Transitions、WebSocketsなどを簡単に利用できるようにすることで、ウェブページにリッチなインタラクティビティをもたらします。htmx を使用することで、post include 機能を単なるフォーム送信の枠を超えて、ページ全体の非同期更新や動的コンテンツの表示に活用できるようになります。

本記事では、a-blog cms における post include 機能の基本から出発し、htmx を組み合わせることでどのようにその適用範囲を拡大し、サイトのユーザーエクスペリエンスを向上させることができるのかを掘り下げていきます。従来の使い方に慣れ親しんでいた方々も、htmx が開く新しい扉に驚くことでしょう。

a-blog cms における post include 機能は、10年以上前から提供されている、Ajaxを利用したコンテンツの動的読み込み機能です。この機能は、特にフォームを介した POST メソッドのリクエストを介して、指定された HTMLテンプレートファイルの内容をページに非同期で挿入することができます。このプロセスは、ユーザーのページ遷移を発生させることなく、リッチなユーザーエクスペリエンスを提供します。

post include 機能の一般的な利用例としては、以下のようなフォームのコードが挙げられます。

<form action="" method="POST" class="js-post_include" target="#result">
  <input type="text" name="keyword" value="">
  <input type="hidden" name="tpl" value="result.html">
  <input type="submit" name="ACMS_POST_2GET" value="検索">
</form>
<div id="result">検索結果が表示されるエリア</div>

また、result.html のコードは以下のように書かれています。

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

a-blog cms を利用している方に向けた分かりやすい紹介として、htmx は、post include のように、複雑な JavaScript を記述せずとも HTML属性を加えるだけで Ajax を用いたコンテンツの読み込みを可能にする JavaScriptライブラリです。

a-blog cms の post include（acms.js）に比べて軽量であり、POST メソッドだけでなく GET メソッドでのリクエスト設定も可能です。記事の一覧のリンクからでも、Ajax でコンテンツの読み込みができるようになったり、1つのエリアだけでなく複数の離れたエリアを同時に更新することも可能です。

post include で実装したコードを htmx に置き換えると、以下のようになります。

<form action="" method="POST" hx-post="/" hx-trigger="click" hx-target="#result" hx-swap="outerHTML">
  <input type="text" name="keyword" value="">
  <input type="hidden" name="tpl" value="result.html">
  <input type="submit" name="ACMS_POST_2GET" value="検索">
</form>
<div id="result">検索結果が表示されるエリア</div>

<a href="result.html" hx-get="result.html" hx-trigger="click" hx-target="#result" hx-swap="outerHTML">クリック</a>
<div id="result">検索結果が表示されるエリア</div>

さらに、a-blog cms の post include で実現できない機能として、リンクに hx-get 属性を設定することで、htmx の実行が可能です。

<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/ajax-header.js"></script>

a-blog cms のテンプレートの中で、htmx を呼ぶためには、hx-ext="ajax-header" を追加する必要があります。そして、これを利用するためには、<head> タグ内に以下のように htmx のライブラリとあわせて ajax-header.js も読み込みます。

今回は、CDN を利用していますが、テストではなく実運用するサイトでは、ダウンロードしてご自身のサイトに JavaScript を設置してご利用ください。

現在、htmx@site という名前で、site テーマの子テーマとして、htmx を活用したテーマの実験的な作成を進めています。

site テーマのトップページに配置された「お知らせ」セクションでは、htmx を用いて、続く「お知らせ」記事を読み込む機能を実装しています。

キャプチャ画像では詳細が伝わりにくいかもしれませんが、この機能により、ユーザーが物件を検索する際の画面遷移を排除し、結果の一覧と詳細ページをスムーズに更新できるようになっています。

このカスタマイズを施したテーマに関しては、後日このブログで詳細な解説と共に、テーマのダウンロードリンクを提供予定です。

この記事を通じて、a-blog cms の post include 機能に既に精通している方々に、htmx の導入が難しくないことをお伝えしたいと思います。更に、htmx を利用することで、a-blog cms の開発者は、従来は実現困難だった新しいUI/UXを提案できるようになります。

htmx はページ遷移なしにコンテンツを簡単に読み込むことができるシンプルな仕組みを提供します。この軽量なライブラリと、デザインとロジックの分離を実現し、直感的で理解しやすいテンプレートを提供する CMS である a-blog cms との組み合わせは、非常に相性が良いです。

両者はシンプルでローコードなアプローチを共有しており、htmx の活用法を共有することが、a-blog cms の開発者にとって非常に有益であると考えています。

引き続き、htmx に関するカテゴリーを新たに追加しましたので、さらなる Tips を共有していきます。どうぞお楽しみに。