大阪で勉強会を開催しました
2024年5月22日(水) に大阪市北区の会議室をお借りして、[htmx初心者向け勉強会（a-blog cms 勉強会 in 大阪 2024/05）](https://ablogcms-osaka.doorkeeper.jp/events/173040) を開催しました。平日のお昼に、お仕事の一環として参加された参加者は、9人での勉強会ということになりました。 前半：htmx だけの勉強会 最...
コーポレートサイトでの htmx 実装をデモサイトで試してみよう
2024年2月、JavaScriptライブラリ **htmx** の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。 この 3つの記事の投稿後、さらに3つのカスタマイズに関するブログの記事を [a-blog cms 開発ブログ htmx](https://developer.a-blogcms.jp/blog/htmx/) に書き、実際に 2つのテーマ **site*...
a-blog cms ユーザーのための htmx初心者向け勉強会を開催しました
2023年4月23日 に ベースキャンプ名古屋 で「htmx初心者向け勉強会」を開催しました。前半は a-blog cms での利用は関係ない htmx だけの話から始め、後半は htmx を a-blog cms に実装していく方法などを共有させていただきました。 htmx@site テーマ a-blog cms の標準的なテーマである site テーマを利用し、出来るだ...
複数のエリアを同時に更新する hx-swap-oob
**a-blog cms** の **post include** で出来なかった事で **htmx** を採用する事でできるようになる大きなところとして「**複数のエリアを同時に更新**」が可能になったところではないでしょうか。 上記は **htmx** を活用したサンプルサイトです。 合わせてご覧ください。 hx-swap-oob 属性とは 要素を置換する場所を指...
htmx と a-blog cms で作る「もっと見る」ボタンの実装方法
まず、実践的な実装方法の一つとして、標準的なページャー UI を Ajax を使用した動的コンテンツ読み込みに置き換える方法を紹介します。これを実現するために、**htmx** を利用します。 head に htmx のライブラリを読み込み **a-blog cms** を **htmx** のバックエンドに利用する場合、**ajax-header.js** の読み込...
htmxで browser history API を活用する方法と a-blog cms 実装のポイント
**htmx** は標準で browser history API をサポートしており、属性に **hx-push-url="true"** を追加することで、これを簡単に利用できます。**a-blog cms** をバックエンドで使用する際の注意点をいくつか紹介します。 * [htmx.org / History Support](https://htmx.org/docs/#history) ※（例）と書かれている部分は実...
post_include を次のレベルへ！ a-blog cms における htmx の活用法
ウェブサイトやブログをよりインタラクティブにするためには、革新的な技術の採用が欠かせません。特に **a-blog cms** を使用している皆さんにとって、**post include** 機能は、フォームの POSTメソッドを介したデータ送信に依存することで、コンテンツの動的な組み込みや更新を可能にする強力なツールとして知られて...