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
47
名古屋商科大学ビジネススクール様 事例紹介
a-blog cms で構築された既存のサイトに htmx を取り入れる
笠谷@アップルップル
September 17, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
450
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
Agile PBL at New Grads Trainings
kawaguti
PRO
1
400
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
140
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
380
2025年になってもまだMySQLが好き
yoku0825
8
4.7k
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
160
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
180
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
100
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Facilitating Awesome Meetings
lara
55
6.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Unsuck your backbone
ammeep
671
58k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Music & Morning Musume
bryan
46
6.8k
For a Future-Friendly Web
brad_frost
180
9.9k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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