先に前回のブログ「a-blog cmsにhtmx（jsライブラリ）を実装してみました【ver3.1.17対応版】」の続きになりますが、絞り込み中のタグをより分かりやすくするために、選択中のボタンに変化を加える処理を考えてみました。

自分でjsを作れば色々対応は出来ますが、a-blog cmsにはシステムに用意された「組み込みJS」という機能があります。こちらの機能はWebサイトを制作する上でよく使う機能があらかじめ用意されており、目的に合うものがあれば便利に使う事ができます。

・a-blog cms Developers 組み込みJS

今回はそんな「組み込みJS」の中から、現在位置の状態を取得可能な「linkMatchLocation」を使ってみることにしました。

linkMatchLocationとは

表示中のページのURLとclassを付与した<a>の「href」を比較して、条件が合う場合に指定した別のclassを<a>に付与する事が出来る機能です。下記はテンプレートの記述例とその実行後の状態になります。条件に合うとclassに「指定した値（今回はstay）」が付与されます。

・a-blog cms Developers 現在位置を装飾する

<!-- 例：ブラウザのアドレスが「https://www.ideasource.jp/blog/」の場合で付与するclassが「stay」の場合 -->
<!-- テンプレートの記述 -->
<a href="https://www.ideasource.jp/blog/" class="js-link_match_location">ブログ</a>

<!-- 実行後 -->
<a href="https://www.ideasource.jp/blog/" class="js-link_match_location stay">ブログ</a>

linkMatchLocationの種類

「linkMatchLocation」には複数種類があります。
値を含んでいる場合、完全一致する場合、ブログ、カテゴリー、エントリーが含まれている場合など、判定したい用途に合わせて設定します。

今回は「linkMatchLocationMark（.js-link_match_location）」を利用して実装

「主要なキーワード（tag）」で絞り込んだ際に、ボタンの<a>にclassで「stay」を付与し、cssで色を変えています。
「linkMatchLocationMark」はURLを含む値で判定できますので、ページャーなどで次ページに移った際にも判定出来ますので、ボタンの「stay」の状態が切れることはありません。htmxでURLを変更した際にも「linkMatchLocation」は問題なく動作しますので、htmxのSPA的な動きと組み合わせると色々なところで応用が効きそうです。

・実装したページはこちら（弊社の制作事例ページ）

最後に

今回はa-blog cmsの「組み込みJS」とhtmxを使い、簡単に現在位置の反映ができました。この様にa-blog cmsはhtmxとの連携にも強く、a-blog cmsに元々備わっている「組み込みJS」を使った場合にも、効率的に動作させる事が出来ます。a-blog cms ver3.1.17でhtmxの利用が従来より簡単になり、セキュリティ面も強化されましたので、さらに安心して利用する事が出来る様になりました。htmxはUXの改善にも使いやすいので非常に嬉しいです。

ということで、今回はa-blog cmsとhtmxで「組み込みJS」を使ってみました。
またa-blog cmsとhtmxにつきましては、随時レポートしていこうと思います。

弊社がなぜa-blog cmsを愛用しているのか、a-blog cmsの特徴やメリットとは。
a-blog cmsをお勧めする理由につきましてはこちらのページをご覧ください。
a-blog cmsをお勧めする理由