Entry_GeoList と組み合わせて現在位置から近いエントリーを表示する
このドキュメントでは、htmx を Entry_GeoList と組み合わせて現在位置から近いエントリーを表示する方法を紹介します。
例えば、現在位置から近い店舗を表示するなどといった、ユーザーに優しい機能を作ることができます。
注意点
位置情報の取得は、安全なコンテキスト(HTTPS) でのみ利用できます。この機能を使用する場合は、HTTPS の環境をご用意ください。
また、最初にアクセスするときにブラウザが、位置情報を取得してもいいか、許可を求めてきます。ここでユーザーが許可を行わないと、位置情報の取得はできません。
実装方法
まず、Entry_GeoList モジュールのモジュールIDを作成し、基準点を「URLクエリストリングの位置情報を参照（?lat=xxx&lng=xxx）」に設定してください。
テンプレート上では、cms 内で独自に定義されている htmx extension である 「acms-geolocation」を利用することで、POST リクエスト時に自動的に位置情報を含めてAjaxリクエストすることができます。
<form
action=""
method="post"
hx-post
hx-trigger="intersect"
hx-ext="acms-geolocation"
hx-swap="outerHTML"
>
<input type="hidden" name="bid" value="%{BID}">
<input type="hidden" name="tpl" value="include/entry/geo-list.html">
<input type="hidden" name="ACMS_POST_2GET_Ajax">
</form>include/entry/geo-list.html には 先ほど作成したモジュールIDを使って、Entry_GeoList モジュールのテンプレートを記述します。
hx-trigger には load ではなく、 intersect を利用することで、htmx によるリクエスト時に「acms-geolocation」がまだ htmx extension として登録されておらず、位置情報を含めずに Ajax リクエストしてしまう可能性がある問題を回避しています。
これで、エントリーを現在位置から近い順で表示する事ができるようになります。