interact.jsでブラウザの操作面を組み立てる

操作モデルと対象ブラウザ

READMEはinteract.jsを、現代のブラウザとIE9以降を対象にしたドラッグ＆ドロップ、リサイズ、マルチタッチジェスチャーのJavaScriptライブラリと説明しています。慣性とスナップ、同時インタラクション、デスクトップとモバイルのChrome、Firefox、Opera、SVG操作、単体利用とカスタマイズが機能です。

ライブラリはDOMを操作してレイアウトを完成させるUIフレームワークではなく、操作イベントと設定をアプリへ渡す部品です。READMEには対応ブラウザの範囲はありますが、各ブラウザ版の細かな差、アクセシビリティ、複雑なレイアウトの制約は示されていません。プロダクトの操作モデルに合わせた試験が必要です。

npmとCDNの導入選択

npmでは`npm install interactjs`で導入できます。CDNはjsDelivrの`https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js`とunpkgの同等URLが例示されています。Rails 5.1以降では`yarn add interactjs`後に`//= require interactjs/interact`、Webjars SBT/Play 2ではMaven形式の依存指定が示されています。

アプリのビルドへ組み込むならnpmで版をロックし、CDNを使うならURLの版固定、キャッシュ、障害時のフォールバックを確認します。どの導入経路でも、同じ設定でイベントが発火するかを比較します。CDNの利用可能性はライブラリ本体のライセンスや機能保証とは別の論点です。

ドラッグ、リサイズ、スナップ

ドラッグ＆ドロップでは、開始、移動、終了の各段階でアプリが要素の位置を更新する構成を試します。スナップを使う場合は、指定した点やグリッドに近づいたときの位置と、操作を離した後の最終位置を分けて確認します。慣性では入力終了後も動くため、停止条件と境界外へ出ない処理をテストします。

READMEは具体的な設定値を本文で網羅していないため、APIドキュメントの対象版を参照します。スクロール領域、拡大表示、複数要素、キーボード操作が混在する画面では、ポインター座標とCSS変形の扱いがずれないかを観察します。ドラッグ中に別要素のクリックや選択が誤発火しないことも検証項目です。

マルチタッチとSVGの試験

interact.jsはマルチタッチと同時インタラクション、SVG要素との操作を機能として挙げています。タブレットやスマートフォンでは二本指の開始順、片方を離したときの状態、画面回転、ブラウザのスクロールとの競合を確認します。SVGではviewBox、変換、座標系の違いによって見た目の位置とイベント座標がずれないかを見ます。

試験ページは通常のHTML要素とSVG要素を同じ画面に置き、ポインター種別と座標をログへ記録します。タッチを扱う設定はページのスクロールやズームを阻害することがあるため、操作対象だけで意図どおり制御されるか確認します。READMEにない端末固有の動作は、端末名、OS、ブラウザ版とともに再現手順へ残します。

DOMへの副作用を小さく保つ

READMEはカーソル変更を除きDOMを変更しないと説明し、カーソル変更も無効化できるとしています。これはライブラリが要素の構造やアプリの状態管理を勝手に置き換えない、という設計上の手掛かりです。実際のアプリでは、位置やサイズをReactなどの状態へ反映する方法を別に設計します。

検証ではイベント前後のDOM、class、style、ARIA属性を比較し、アプリが管理する値とライブラリの出力を区別します。再描画後も操作対象が失われないか、解除時にイベントリスナーやカーソル設定が残らないかを確認します。ドラッグだけが動くことより、画面の更新とキーボード・支援技術の操作が壊れないことを優先します。

型定義、文書、MIT

プロジェクトはTypeScriptで書かれ、npmパッケージに型定義が含まれます。型だけが必要なら`npm install --save-dev @interactjs/types`が案内されています。詳細は`http://interactjs.io/docs`にあり、READMEのExampleには動作例があります。

ライセンスはMITです。導入後は使用するAPIと型定義の版を一致させ、型チェックと実ブラウザ試験を別々に実行します。リリース更新ではタッチ、SVG、スナップ、古いブラウザを一度に確認し、既存画面の操作ログとスクリーンショットを比較します。READMEに記載のない性能値やアクセシビリティ適合を推測で補いません。

interact.js固有の確認として、npmで版を固定した試験ページにHTML要素とSVG要素を置きます。ドラッグ、リサイズ、スナップ、慣性をポインターイベントのログと画面録画で確認し、二本指操作ではスクロールとの競合を記録します。操作解除後にDOM、class、style、カーソルが元の管理状態へ戻ることをブラウザごとに比較します。

interact.jsでブラウザの操作面を組み立てるの採用判断では、対象版のREADMEにある入力と出力を固定し、担当者が同じ手順を再実行できる状態で結果を残します。動いたという記録だけでなく、失敗条件、戻し方、ライセンス確認の結果も対象プロジェクトに結び付けて管理します。

編集部の結論

interact.jsは、デスクトップとモバイルのブラウザでドラッグ操作、リサイズ、同時タッチを実装したいフロントエンド向けです。まずnpm版を使って固定サイズの要素を一つだけ動かし、スナップ位置、慣性停止、タッチ入力、SVG要素、DOMへの副作用を対象ブラウザで確認してください。IE9対応の記載だけで現行ブラウザの全挙動を保証するものではありません。

公式情報源

1. Official documentation
2. Official README
3. Project repository