a-blog cmsの組み込みJSとhtmxで現在位置を指定する方法
記事を書いた人:Webデザイナー 新謙二
先に前回のブログ「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 | 現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に指定したclassを付与します |
---|---|
linkMatchLocationFullMark | 現在表示しているページのURLと、アンカーリンクのリンク先URLが完全一致した場合にclassを付与します |
linkMatchLocationBlogMark | 現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合にclassを付与します |
linkMatchLocationCategoryMark | 現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合にclassを付与します |
linkMatchLocationEntryMark | 現在表示しているエントリーのURLが、アンカーリンクのリンク先URL中に含まれている場合にclassを付与します |
今回は「linkMatchLocationMark(.js-link_match_location)」を利用して実装
![linkMatchLocationでタグの絞り込みをわかりやすく実装](https://www.ideasource.jp/media/003/202406/mode3_w858-htmx%2Bstay_240614_170251.png?v=20240614170251)
「主要なキーワード(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をお勧めする理由