htmx 初心者向け勉強会のハンズオン資料を公開します

2024年4月の名古屋から始まり、5月大阪、6月福岡と東京で「htmx初心者向け勉強会」というイベントを開催してきました。 前半は CMS を絡めず静的な HTML ベースで純粋に htmx で何ができるのかをご紹介し、後半はバックエンド側を a-blog cms にお任せすると、こんな実装になるということをお伝えしてきました。

名古屋・大阪で利用した勉強会ドキュメント

当初は、htmx の属性について1枚の HTML にまとめて、そのファイル自身を修正して自身のサーバーにアップして動きを見てもらうというカタチで開催していました。

しかし、このカタチだと、話を聞いてもらうだけで実際に手を動かして検証してもらうことが、あまりできてなかったと感じ、後半の地域では 以下のようにアップデート をしています。


福岡・東京で利用したハンズオンサイト

htmx@blog テーマという htmx を使ったブログテーマの上で、CMS にログインする事で簡単に htmx のコードを書き換えて試すことができるようにしました。また、全員が同じサイトではなく a-blog cms のお試しサーバーを利用し、テーマを勉強会用のものを選択すると、個々のサイトがサブドメインで作られるようにしてハンズオンをしっかりできるようにしました。


上記のキャプチャのリンク先は、ログインできないサンプルとしてリンクしておきます。(日数が経つと消えてしまうので、無くなっていたら以下のリンクからハンズオンサイトを作ってご覧ください)

ablogcms.io というお試し専用のサービスサイトは 30日で削除されますので、お気軽にお試しください!


ablogcms.io htmx ハンズオン 申し込みページ

勉強会用でテスト環境を構築する

リアルイベントのレポート


名古屋 / 2024年4月23日 16人


名古屋勉強会

名古屋での勉強会では、参加者全員が a-blog cms のユーザーの方ばかりでした。そのため、前半のセッションでは、htmx の基本概念や静的な HTML でのデモを通じて、初めての方にも理解しやすい内容を心がけました。後半では、a-blog cms と htmx の連携に重点を置き、実際のプロジェクトでの活用方法を具体的に解説しました。

参加された中でも IDEASOURCE の新さんは、翌日に自社のサイトのコンテンツの一部を htmx 化し、ブログの記事を公開いただきました。 a-blog cmsとhtmx(jsライブラリ)は非常に相性が良い


大阪 / 2024年5月22日 9人


大阪勉強会

大阪での勉強会では、名古屋でのフィードバックを反映し、より具体的な実装例を交えながら進めました。参加者の皆さんからは、「実際に手を動かすことで、より理解が深まった」との声を多くいただきました。

大阪での定期勉強会のための会場を探しています! オススメな会場があればお知らせください。


福岡 2024年6月14日 13人


福岡勉強会

福岡での勉強会では、ハンズオンのやり方を変更し、より実践的で分かりやすい内容に改訂しました。参加者の半分は a-blog cms を知らない方々でしたので、htmx に加え a-blog cms についても詳しく説明する機会となりました。これにより、参加者には htmx と a-blog cms の両方の魅力を感じていただけたと思います。

会場には、さくらインターネット 福岡オフィス をお借りしました。 htmx 化した さくらインターネット版「10万件のサンプルサイト 」


東京 / 2024年6月20日 9人


東京

東京では、午後から仕事時間中に参加が可能な人が参加できるイベントと、仕事が終わってから参加しやすい夜の2部構成で行いました。

htmx のために Ajax 関連の機能についてアップデートがされた a-blog cms 3.1.17 と htmx 2.0 にメジャーバージョンアップされた新しいハンズオンサイトも準備しての開催となりました。具体的な事例としては FAQ コンテンツを htmx を活用して実装するには、どう作るべきかなど、実際のプロジェクトでの活用方法についても触れ、多くの参加者にとって有意義な時間となりました。


最後に


まだ使い始めて4ヶ月くらいで、利用している機能は紹介しているものくらいなので、まだまだ知らない機能も多くあるのではと思っています。持っている情報はできるだけ共有させていただきました。

また、他の地域での勉強会やオンラインイベントも企画を進めておりますので、こんな使い方もオススメだという情報をお持ちの方がいたら、ぜひご参加いただき教えていただけると助かります。


シェアする

Webにまつわる お困りごとをご相談ください。

こんなお手伝いができます

Webコンサルタントとしてのお手伝い/UIデザインのご相談/デジタルメディアの総合プロデュース/パンフレット・DMなどのDTP、ロゴ制作などのビジュアルデザイン