
2026/07/21 2:07
Jelly UI: ネイティブ HTML フォーム要素用のソフトボディ物理演算
RSS: https://news.ycombinator.com/rss
要約▶
日本語翻訳:
Jelly UI は、依存関係を持たず、セットアップを最小限にした軽量な Web Components ライブラリであり、複雑な動作(例:ソフトボディ物理学)を外部パッケージやビルドステップなしに単一の script タグでプロジェクトに統合し、柔らかく触覚的な製品インタフェースを作成することを目的としています。このライブラリの主な利点は、外部パッケージまたはビルドステップを必要とせず、単一の script タグだけで複雑な挙動(例:ソフトボディ物理学)をプロジェクトに直接統合できることです。ライブラリには、
<jelly-button> などの即用可能な 40 つの Custom Elements が用意されており、リアルなフォームコントロール、ダークモード、RTL 対応、WCAG AA レベルの色トークンによる高いアクセシビリティなどを標準機能として備えています。物理的なインタラクションのメタファーを厳格な準拠ルールと組み合わせることで、Jelly UI は開発者がコードオーバーヘッドなしでアクセシブルな物理学ベースのインタフェースを素早くプロトタイプ化することを可能にします。この簡素化されたアプローチにより、統合時間が短縮されながら、現代の Web 開発における堅牢なパフォーマンスとユーザー体験の標準を維持することができます。本文
Jelly UI:柔らかく触覚的な Web Components ライブラリ
Jelly UI は、柔らかい触覚的な製品インターフェースを実現するための依存関係のない Web Components ライブラリです。リアルなフォームコントロールに「ソフトボディ」の物理挙動を取り込みつつ、以下の機能を実装しています。
主要な特徴
- 0 個の依存ライブラリ:軽量で動作速度が向上します。
- 40 個のカスタムエレメント:豊富なコンポーネントを提供しています。
- 1 つの script タグ:導入が極めて簡単です。
- WCAG AA 準拠:アクセシビリティを標準で確保しています。
- ダークモード対応:環境に合わせて自動適応します。
- RTL(右から左)対応:アラビア語やヘブライ語などの言語でも利用可能です。
シンプルな導入方法
以下のコードを HTML に追加するだけで、すぐに使用できるカスタムエレメントが動作します。
<script type="module" src="https://jelly-ui.com/package.js"></script> <jelly-theme mode="auto"> <jelly-button variant="mint">Publish</jelly-button> </jelly-theme>
次のアクション
- 📜 ショウケースをスクロールしてデザインを確認してください。
- 📚 **[API リファレンス]**を読み込んで詳細な仕様をご覧ください。