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
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
370
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
600
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
130
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
220
Where will it converge?
ibknadedeji
0
200
実装で解き明かす並行処理の歴史
zozotech
PRO
1
690
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
8
4.1k
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
250
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
280
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
130
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
360
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.8k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Visualization
eitanlees
149
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Optimizing for Happiness
mojombo
379
70k
Code Reviewing Like a Champion
maltzj
526
40k
Designing for humans not robots
tammielis
254
26k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Building Applications with DynamoDB
mza
96
6.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