名古屋商科大学ビジネススクール様 事例紹介

a-blog cms で構築された既存のサイトに htmx を取り入れる

Transcript

1. 名古屋商科大学ビジネススクール様 事例紹介 a-blog cms で構築された既存のサイトに htmx を取り入れる 2024-9-17 a-blog cms LIVE vol.19 笠谷亜貴子 @ appleple
2. 今日のセッションの内容 • 実際のサイト https://mba.nucba.ac.jp/ で部分更新 の挙動を紹介、確認 • htmxとは何か — ポストインクルードとの違い • a-blog cms の各バージョンでの取り入れ方の注意点 • 実装のポイントとコードの紹介
3. 実際のサイトで部分更新の挙動を紹介、確認 • エントリーからエントリーへの遷移でメインコンテンツ部分を 更新 • 一部モジュールユニットではモーダルを使用
4. htmxとは何か — ポストインクルードとの違い • htmxは hx-get, hx-swap, hx-target などの属性を追加 • ポストインクルードは js-post_include というクラスを追加 • htmxは2箇所以上を swap できる • htmxは hx-push-url でURLを変更することができる
5. headタグ内 <script src="https://unpkg.com/htmx.org@2.0.2"></script> <script src="https://unpkg.com/htmx.org/dist/ext/ajax-header.js"> </script> 1. 2. • 1行目はhtmxを使用する際は共通で必要 • 2行目は a-blog cms をバックエンドとして使用する際に必 要（Ver. 3.1.17以上であれば不要）
6. 対象要素 hx-ext="ajax-header" • 他の hx-* 属性に上記を追加する（Ver. 3.1.17以上であれ ば不要）
7. /private/config.system.yaml allow_tpl_path : [template-name.html ] • ポストインクルードでも必要だった設定（Ver. 3.1.17以上で あれば不要）
8. サイト全体をできるだけエントリーで作る • _top.html や index.html を極力使わないで _entry.html で作る • ブログトップやカテゴリーインデックスでエントリー一覧が必要な場合 はモジュールユニットを使用する • コンタクトフォームなどもエントリーで作ることも可能 • 読み込み先テンプレートを Entry_Body モジュールで共通化
9. 通常の遷移とhtmxでの部分更新の分岐が必要 • エントリーサマリーを使っているモジュールユニットは遷移先が必ずエ ントリー • ナビゲーションモジュールやリストモジュールなどは URL の欄にエン トリー以外のページや外部サイトが含まれる • htmxでの部分更新の場合はテンプレートor 管理画面の入力時にクエ リとして ?htmx=true を持たせる
10. aタグのhref属性とhx-*属性をincludeで共通化する href="{{href}}" <!-- BEGIN_IF [{{href}}/lk/?htmx=true/_and_/%{IS_ADMIN}/eq/0] --> hx-get="{{url}}<!-- BEGIN_IF [{{url}}/nre/.*/$] -->/<!-- END_IF -->tpl/include/htmx/entry/body.html" hx-push-url="{{url}}" hx-swap="innerHTML" hx-target="#main-content" hx-trigger="click"<!-- END_IF --> themes/theme_name/include/htmx/attributes-main-content.txt
11. aタグのインクルード元の書き方（エントリーサマリー） <a @include("/include/htmx/attributes-main-content.txt", { "href":"{url}?htmx=true", "url":"{url}" }) class="...">
12. aタグのインクルード元の書き方（ナビゲーションモジュールなど） <a @include("/include/htmx/attributes-main-content.txt", { "href":"{url}", "url":"{url}[rmHxQuery]" }) class="...">
13. swapしたあとの処理 addEventListener ('htmx:afterSwap' , function (evt) { // 部分更新した箇所に acms.jsを再度走らせる ACMS.Dispatch(evt.target); // main-content の場合 if(evt.target.id === "main-content" ){ window.scrollTo({top: 0, behavior: 'smooth'}); } });
14. モーダルのテンプレート • #modal-on-movieに表示する際にはbody-content-only.htmlをインク ルードしたテンプレートを読み込み、非表示の際にはdelete.htmlというテンプ レートを読み込んでいる • フェードイン、フェードアウトのアニメーションの始まるタイミングはJS側で制御して いる • .modal-bg には hx-trigger="click delay:0.8s" .modal-close-button には hx-trigger="click consume delay:0.8s" を設定してあり、アニメー ションが終わってからテンプレートをdelete.htmlに切り替えるようにしてある • JSで hx-*属性を変更したあとには htmx.process(document.body); が必 要 • hx-push-url を使う場合はブラウザのバックボタンとの整合性に注意が必要
15. まとめ a-blog cms × htmx では、今日ご紹介したコンテンツの部分更新以外にもさ まざまなカスタマイズができそうです。 ぜひいろいろなカスタマイズを試してみてください。
16. a-blog cms とhtmx でインタラクティブなWebサイトを簡単に構築: https://www.a-blogcms.jp/htmx/ 開発ブログ: https://developer.a-blogcms.jp/blog/htmx/ ハンズオン用環境: https://www.ablogcms.io/htmx/?theme=workshop@blog#form 次回のhtmx勉強会 10/2（水）20:00 - https://ablogcms-online.doorkeeper.jp/events/177635