Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
名古屋商科大学ビジネススクール様 事例紹介
Search
笠谷@アップルップル
September 17, 2024
Technology
0
48
名古屋商科大学ビジネススクール様 事例紹介
a-blog cms で構築された既存のサイトに htmx を取り入れる
笠谷@アップルップル
September 17, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
gree_tech
PRO
0
170
「魔法少女まどか☆マギカ Magia Exedra」におけるバックエンドの技術選定
gree_tech
PRO
0
120
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
130
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
150
事業開発におけるDify活用事例
kentarofujii
5
1.3k
まだ間に合う! 2025年のhono/ssg事情
watany
3
610
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
150
Building a cloud native business on open source
lizrice
0
170
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
0
420
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Cult of Friendly URLs
andyhume
79
6.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Music & Morning Musume
bryan
46
6.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Transcript
名古屋商科大学ビジネススクール様 事例紹介 a-blog cms で構築された既存のサイトに htmx を取り入れる 2024-9-17 a-blog cms
LIVE vol.19 笠谷亜貴子 @ appleple
今日のセッションの内容 • 実際のサイト https://mba.nucba.ac.jp/ で部分更新 の挙動を紹介、確認 • htmxとは何か — ポストインクルードとの違い
• a-blog cms の各バージョンでの取り入れ方の注意点 • 実装のポイントとコードの紹介
実際のサイトで部分更新の挙動を紹介、確認 • エントリーからエントリーへの遷移でメインコンテンツ部分を 更新 • 一部モジュールユニットではモーダルを使用
htmxとは何か — ポストインクルードとの違い • htmxは hx-get, hx-swap, hx-target などの属性を追加 •
ポストインクルードは js-post_include というクラスを追加 • htmxは2箇所以上を swap できる • htmxは hx-push-url でURLを変更することができる
headタグ内 <script src="https://unpkg.com/
[email protected]
"></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以上であれば不要)
対象要素 hx-ext="ajax-header" • 他の hx-* 属性に上記を追加する(Ver. 3.1.17以上であれ ば不要)
/private/config.system.yaml allow_tpl_path : [template-name.html ] • ポストインクルードでも必要だった設定(Ver. 3.1.17以上で あれば不要)
サイト全体をできるだけエントリーで作る • _top.html や index.html を極力使わないで _entry.html で作る • ブログトップやカテゴリーインデックスでエントリー一覧が必要な場合
はモジュールユニットを使用する • コンタクトフォームなどもエントリーで作ることも可能 • 読み込み先テンプレートを Entry_Body モジュールで共通化
通常の遷移とhtmxでの部分更新の分岐が必要 • エントリーサマリーを使っているモジュールユニットは遷移先が必ずエ ントリー • ナビゲーションモジュールやリストモジュールなどは URL の欄にエン トリー以外のページや外部サイトが含まれる •
htmxでの部分更新の場合はテンプレートor 管理画面の入力時にクエ リとして ?htmx=true を持たせる
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
aタグのインクルード元の書き方(エントリーサマリー) <a @include("/include/htmx/attributes-main-content.txt", { "href":"{url}?htmx=true", "url":"{url}" }) class="...">
aタグのインクルード元の書き方(ナビゲーションモジュールなど) <a @include("/include/htmx/attributes-main-content.txt", { "href":"{url}", "url":"{url}[rmHxQuery]" }) class="...">
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'}); } });
モーダルのテンプレート • #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 を使う場合はブラウザのバックボタンとの整合性に注意が必要
まとめ a-blog cms × htmx では、今日ご紹介したコンテンツの部分更新以外にもさ まざまなカスタマイズができそうです。 ぜひいろいろなカスタマイズを試してみてください。
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