Jelly UI:HTML UIにソフトボディ物理演算を実装
原題: Jelly UI: Soft-body physics for native HTML form controls
なぜ重要か
依存関係ゼロかつアクセシビリティ標準対応のWeb Componentsライブラリは、フロントエンド開発の効率化とUI差別化の両立を目指す動きを示す。
Jelly UIは、依存関係ゼロのWeb Componentsライブラリで、ネイティブHTMLフォームコントロールにソフトボディ物理演算を組み合わせた触覚的なUIを実現する。40種類のカスタム要素を1つのscriptタグで導入でき、ダークモード・RTL・WCAG AAカラートークンを標準搭載。MIT ライセンスで無償公開されている。
Jelly UIは、bmson.comが開発・公開したWeb Componentsライブラリ「Jelly UI v1.1」の公式サイトで紹介されている製品だ。最大の特徴は、実際のフォームコントロール(ボタン、入力フィールドなど)にソフトボディ物理演算を組み込み、触れるような柔らかい動きを持つインターフェースを実現している点にある。
技術面では、外部依存関係がゼロであり、40種類のカスタム要素を提供する。導入は1行のscriptタグを追加するだけで完了し、既存のHTMLプロジェクトへの組み込みが容易だ。アクセシビリティ面ではWCAG AAレベルのカラートークンを標準搭載し、ダークモードおよび右から左への表記(RTL)にも対応する。
使用例として公式サイトでは以下のようなコード例を示している。scriptタグでpackage.jsを読み込み、`<jelly-theme mode="auto">`タグ内に`<jelly-button variant="mint">`のようなカスタム要素を配置するだけで動作する。
ライセンスはMITで、無償で利用できる。開発はオープンに行われており、継続的な開発支援としてスポンサーシップも募っている。