htmx

アソビューでバックオフィス向けのシステムを担当しているアズマです。今回ご紹介するのは、レガシー技術で構築されていたWebアプリケーションをhtmxで置き換えていく話です。 htmxとは htmxのコンセプトは、HTMLに可能な限りJavaScriptを記述することなくAJAX、CSS変換、サーバサイドレンダリングを実現するJavaScriptライブラリです。手軽に非同期処理ができ、コンテンツ切り替えもHTMLの属性を1つ2つ追加するだけで完了できます。 htmxを採用した背景と目的 比較的古い技術スタックで構成しているバックオフィス用のSpring Bootアプリケーションがあり、このアプリケ…

エキサイト株式会社エンジニアの佐々木です。htmxのhx-swap-oobとhx-select-oobを理解します。 前提 hx-swap-oob hx-select-oob まとめ 最後に 前提 HTML内にhtmxをロードしてください。 <script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script> hx-swap-oob h…

こんにちは、エキサイト株式会社の平石です。 今回は、HTMXでhx-getやhx-postを使ってリクエストを実行した後に任意のJavaScriptコードを実行する方法をご紹介します。 はじめに HTMXでは、hx-getやhx-postを利用して、リクエストを実行することができます。 そして、レスポンスとして返ってきたHTMLテンプレートで既存のテンプレートの全体または一部を置き換えることができます。 しかし、このリクエストの実行後に任意のJavaScriptコードを実行したい場合もあると思います。 今回は、その方法をブログ記事として残しておきたいと思います。 環境 以下の環境で動作確認をし…

こんにちは。 エキサイト株式会社の三浦です。 以前、「htmxでデータを送信する際、送信の設定をしたタグの親にformタグがある場合は、そのformタグに含まれるすべてのデータが送信される」ということを説明しました。 tech.excite.co.jp 今回は、親以外のformタグのデータを送信する方法について説明します。 htmxでデータを送信する際、親formタグのすべてのデータが送られる 親タグではないformタグのデータを送信する方法 最後に htmxでデータを送信する際、親formタグのすべてのデータが送られる 以前紹介しましたが、htmxでデータを送信すると、親formタグのデータ…

エキサイト株式会社メディア事業部エンジニアの佐々木です。htmxは、React.jsやVue.jsなどの大きいフロントエンドフレームワークを用いることなく、SPAのような仕組みを提供してくれるライブラリになります。 htmx.org htmxとSpringBoot Thymeleafを使用して、簡単なサンプルを作ってみます。 動作確認環境 SpringBoot側のコード HTML 実行 まとめ 最後に 動作確認環境 動作確認環境としては下記になります。 Java $ java --version openjdk 17.0.1 2021-10-19 OpenJDK Runtime Environ…

hyperbole: Interactive HTML apps using type-safe serverside Haskell hyperboleはWeb(HTML)アプリケーションフレームワークの一種。 特徴は、JavaScriptを書かずにサーバサイドのHaskellプログラムだけでインタラクティブなHTMLページを生成すること、らしい。 思想としてはhtmxが近いとのこと。 比較的簡単なWebアプリならこういうので作るのが楽なのかもしれない。 effectfulというextensible effectライブラリに依存しているらしいので、まずはそっちを理解する必要があるかも。

この記事はSecHack365 Advent Calendar 2024 3日目の記事です。 qiita.com こんにちは、ふたばとです。 今回は、WSL の仮想ハードディスクサイズの拡張、つまり WSL に割くストレージの量を拡張します。 先日のこちらの記事は、Windows 側のストレージの話です。 01futabato10.hateblo.jp 1. 現在のディスク使用状況を確認する まず、現在のディスク使用状況を確認します。以下のコマンドを実行してください。 $ df -h /mnt/wslg/distro 例として、以下のような出力が得られます。 Filesystem Size U…

こんにちは。エキサイトでデザイナーをしている齋藤です。 最近、JSの記述なしにAJAXやSPA風の振る舞いが実装できるhtmxに触れる機会がありました。 htmx.org 今回は、htmxで別のHTMLファイルにある要素を埋め込む方法をご紹介します。 実現したいこと どうやるか 前提 index.html /parts（厳密には/parts/index.html） htmxで埋め込んでみる さいごに 実現したいこと コンポーネントと同じ要領で、/partsにある「パーツA」を呼び出してindex.htmlに埋め込みたいとします。 実現したいことのイメージ どうやるか 実現したいことをhtmxで…

サクッとわかるITトレンドでご紹介した「htmx（Hotwire）」。興味ある！という方も多かったのではないでしょうか。そこで、htmxをさらに深掘り。今回は、htmxではDOMをどのように操作するのか、またその書き方を基礎知識とあわせて解説します。 htmxとは？ Hotwire（HTML Over The Wire）と呼ばれる、JavaScriptのプログラムを書くことなくAjaxのような動作を実現する技術があります。このHotwireの動作を手軽に実現できるのが【htmxというライブラリ】です。HTMLファイルの中で読み込むだけで簡単に動きのあるウェブサイトを作ることができます。 ▼ht…

サクッとわかるITトレンドでご紹介した「htmx（Hotwire）」。興味ある！という方も多かったのではないでしょうか。そこで、今回から2回にわたってhtmxをさらに深掘り。まずは、htmxでHTTPリクエストはどのように指定するのか、書き方だけでなく基礎知識もあわせて解説します。 htmxとは？ Hotwire（HTML Over The Wire）と呼ばれる、JavaScriptのプログラムを書くことなくAjaxのような動作を実現する技術があります。このHotwireの動作を手軽に実現できるのが【htmxというライブラリ】です。HTMLファイルの中で読み込むだけで簡単に動きのあるウェブサイ…

CBVとは Class-based Viewのことで、Viewに関するクラスがDjangoにはあり、それを継承して書いていくやり方です。 docs.djangoproject.com 一覧を表示するためのListView、詳細画面のDetailViewなどWebアプリケーションでよく使うパターンが、クラスとして提供されています。 CBVのメリット CBVを利用することでショートカットでき、必要な実装に集中できます。 特にListViewなどはページネーションがビルドインされているため、対象なるQuerySetを入れるだけでページネーションが動作します。 なぜCBVを使わないのか ListVie…

はじめに みなさん、こんにちは torihaziです 暑いです。暑すぎます。早く。涼しくなってください。 Githubをおしゃん計画を始めました。 まだまだアレですが、一旦いい感じじゃないでしょうか。 と言うことでレッツゴーです。 github.com 私のGithubのやつを秒でパクるなら！ 下のコードをコピーしてtorihaziと言うところをご自身のユーザ名に変更してください！ あとは スキルのアイコンを変えてください！ 対応するアイコンの名前はこちらを参考に！ https://github.com/tandpfun/skill-icons 多分それで全部動きます！ <h1 align="…

梅原大吾に聞く 「スト6」登場後の変化と格闘ゲームのこれから 永田町ひき逃げ事件の犠牲者はイトマン事件でも名前が出た「バブル紳士」だった | AERA dot. (アエラドット) [その42]放課後ひみつクラブ - 福島鉄平 | 少年ジャンプ＋ [2話]MAD - 大鳥雄介 | 少年ジャンプ＋ 中国・蘇州で日本人の未就学男児と母親らが刃物で刺され搬送、近くにいた中国人女性が重体 書店で本の題名が思い出せず “ポカリスエット探してるんです” と言われて正解を導き出せる人すごい→書店だけじゃなかった 僕が暇空茜（ひまそらあかね）の味方になると決めた理由｜黒名ユウ 最後までヒロアカ本家が超えることが…

[:contents] validation HTMXは、HTML5のバリデーションチェックAPIと統合してます。 HTMXでバリデーションチェックを有効にし、ユーザーの入力が無効である場合、フォームのリクエストを発行しません。 これは、AjaxリクエストとWebSocketの両方に当てはまります。 HTMXは、カスタム検証とエラー処理をフックするために使用できるヴァリエーションチェックを中心にイベント発行が可能です。 hx-on:htmx:validation:validateはcheckValidityメソッドが呼び出される前に呼び出されます。 hx-on:htmx:validation:…

Synchronization フロントエンドの開発では多くの場合、2つの要素間でリクエストを調整します。 たとえば、ある要素からのリクエストが完了するのを待ってから、ほかのリクエストを投げることが必要な場合があります HTMXはこれを実装するのに役立つhx-sync属性を提供します。 以下の例ではformのsubmitと、子要素でのリクエストの、個々の入力が存在することが確認できます。 <form hx-post="/page"> <input id="name" name="name" type="text" hx-post="/name_exists" hx-trigger="chang…