Dragologyは宣言的ドラッギングを導入しUI開発を簡素化

個々のユニークなドラッグ操作に対して、幾何学、フィードバック、アニメーションを処理するための「煩雑な」コードを書く代わりに、開発者は要素が何になるべきかを指定する「宣言的ドラッギング」を使用できるようになります。Dragologyライブラリで実装されたこの移行により、システムはアプリケーションの将来の状態を推測的にレンダリングすることで、スムーズでレスポンシブなインタラクションを自動的に合成することが可能になります。

この画像は、複雑なUIインタラクションの作成を簡素化するというライブラリの主要な目標をハイレベルに要約しています。

ドラッグ＆ドロップ問題の反転

従来のドラッグ＆ドロップ設計では、開発者が特定の視覚的挙動を直接プログラムする必要があることが多く、複雑な幾何学形状に対しては労力がかかります。この障壁は、教育者、数学者、ゲームデザイナーが豊かな触覚的インタラクションを作成することを妨げることがよくあります。

宣言的ドラッギングはこのプロセスを反転させます。移動をプログラムするのではなく、インターフェースの作成者が、特定の要素をドラッグすることでアクセス可能になるべき将来のモデル状態を指定します。システムはその後、視覚的合成の重い処理を処理します。

「すべての視覚的挙動を直接プログラムする代わりに、ドラッグ可能にしたい各要素について、その要素をドラッグすることでアプリケーションのどの将来の状態に至るべきかを単に伝えるだけです。」

— Declarative Dragging

推測的レンダリングの仕組み

Dragologyエンジンは、モデルの状態を取得してビューにレンダリングすることで動作します。ユーザーがドラッグを開始すると、エンジンはドラッグによって導かれる可能性のある様々な将来の状態を推測的にレンダリングします。

これらの推測的レンダリングを分析することで、システムは各ビューにおけるドラッグされた要素の位置を抽出し、有効なドロップゾーンを決定します。その後、システムはこれらの「可能な世界」を単一の流動的なインタラクションに統合します。この際、作成者がパスを手動で定義する必要はありません。

この図は、システムが流動的なインタラクションを合成するために複数の「可能な世界」を分析する推測的レンダリングのコアメカニズムを説明しています。

コンポーザビリティと実世界への応用

Dragologyはコンポーザブルに設計されており、単純なモデル駆動型の挙動を組み合わせることができます。開発者はモディファイアを重ねて、グリッドへのスナップ、フローティング要素、または特定のトランジションアニメーションなどの機能を追加できます。

このシステムは、ねじれた木や編み込み図などのインタラクティブな数学的「探索可能（explorables）」を作成するためにすでに使用されています。また、Hazelという学術的プログラミング環境にも統合されており、そこではリファクタリングが物理的なインタラクションを通じて具体的で発見可能なものになります。

この視覚情報は、数学的「探索可能」や、この技術が促進できる特定の図のタイプに関する言及をサポートしています。

制限と技術的なトレードオフ

このシステムは高品質なインタラクションの作成を簡素化しますが、ソース資料にはフレームレートや推測的レンダリングの計算オーバーヘッドに関する具体的なパフォーマンスベンチマークは提供されていません。

現在の実装は特にWeb上のSVGインターフェース向けに構築されており、極めて高頻度の状態変化に対するスケーラビリティは、さらなる探索が必要な領域として残されています。