Developer toolchain概要Drag and drop概要

注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。

概要

ドラッグアンドドロップ機能は、現在 Foundry と Gotham の両方をエンロールメントに持つ顧客のみが利用できます。今後、さらに広く提供される予定です。

ドラッグアンドドロップ機能は、ユーザーがアプリケーション間でデータを簡単に移動できるようにする機能です。たとえば、画像をフォルダーにドラッグアンドドロップする際に、この機能を使用することがあります。ドラッグアンドドロップ可能なコンポーネントを ドラッグアンドドロップ統合ポイント と呼びます。1 個のドラッグアンドドロップ統合ポイントを追加するだけで、ドラッグアンドドロップ機能をサポートする他のアプリケーションとユーザーのアプリケーションを接続し、新しいワークフローを作成できます。

ドラッグアンドドロップ機能は広く受け入れられているウェブ標準であり、アプリケーション間のシームレスな統合を可能にします。このドキュメントでは、Palantir 特有のドラッグアンドドロップ推奨事項およびガイドについて説明します。これには、Gotham、Foundry、およびユーザーが開発したアプリケーションとの間でのデータのドラッグアンドドロップが含まれます。Palantir 特有のドラッグアンドドロップ機能の詳細については、Palantir メディアタイプを参照してください。

Gotham と Foundry 間のドラッグアンドドロップ

コアコンセプト

ドラッグアンドドロップ機能を実装するために理解しておくべき 4 つの主要なコンセプトがあります。

  1. DataTransfer オブジェクト
  2. メディアタイプ
  3. ドラッグゾーン
  4. ドロップゾーン

DataTransfer オブジェクト

DataTransfer オブジェクトは、コンピュータ上で何かをある場所から別の場所に移動またはコピーする際に情報を保持するコンテナのようなものです。DataTransfer オブジェクト(「DataTransfers」とも呼ばれる)は、画像をあるフォルダーから別のフォルダーに移動するなどのドラッグアンドドロップアクションや、テキストをコピーしてドキュメントに貼り付けるなどのコピーアンドペーストアクションで使用されます。ドラッグアンドドロップの文脈では、DataTransfer オブジェクトはドラッグペイロードとも呼ばれます。

DataTransfer オブジェクトは、テキストや画像など、さまざまな種類の情報を保持できます。DataTransfer オブジェクトは元々ドラッグアンドドロップ専用に作られましたが、現在では他の機能にも使用されています。詳細については、MDN の DataTransfer に関するドキュメント ↗️ を参照してください。

メディアタイプ

メディアタイプ(以前は MIME タイプとして知られていた)は、転送されるデータの性質を表します。メディアタイプは、DataTransfer オブジェクトに使用され、転送されるデータの種類を識別します。たとえば、「Hello」というテキストを含む DataTransfer は text/plain メディアタイプを持ち、テキストを有効なメディアタイプとして受け入れるコンポーネントによってアクセス可能になります。詳細については、MDN のメディアタイプに関するドキュメント ↗️ を参照してください。

一般的なドラッグアンドドロップ機能のためのMDN 承認メディアタイプの完全なリスト ↗️も利用できます。Palantir 特有の機能に関する詳細については、以下の Palantir メディアタイプ を参照してください。

Palantir メディアタイプ

Palantir メディアタイプは、Palantir プラットフォームに特有の概念を表します。ユーザーのアプリケーションに Palantir 特有のドラッグアンドドロップサポートを追加すると、ユーザーがアプリケーションと Palantir プラットフォーム間でデータを移動できるようになります。標準のメディアタイプを受け入れる既存のドラッグアンドドロップゾーンもありますが、ドラッグアンドドロップワークフローを構築する際には Palantir メディアタイプをドラッグペイロードに追加することをお勧めします。これにより、相互運用性が向上します。

Palantir プラットフォームには、ドラッグペイロードに Palantir メディアタイプを追加するドラッグアンドドロップゾーンや、これらのメディアタイプを持つドラッグペイロードを受け入れるゾーンがあります。たとえば、Foundry オブジェクトリソース識別子(RID)データを表す object メディアタイプは image/jpeg のような一般的に使用されるメディアタイプではありません。むしろ、object メディアタイプは Palantir 特有の概念を表し、このタイプのデータをアプリケーション間で移動するには Palantir メディアサポートが必要です。

現在サポートされている Palantir メディアタイプには、objects および object sets が含まれます。

ドラッグゾーン

ドラッグゾーンは、ユーザーがデータを「つかんで」他の場所に転送できるようにする ドキュメントオブジェクトモデル (DOM) ↗️ 上のインタラクティブな要素です。ユーザーがドラッグを開始すると、dragstart イベントが発生します。ドラッグゾーンは、DOM 要素上の dragstart イベントをリッスンし、DataTransfer に追加のデータを追加することで機能します。

サンプルドラッグゾーン

ドロップゾーン

ドロップゾーンは、ユーザーがデータを要素に「ドロップ」することで転送できるようにする DOM 上のインタラクティブな要素です。ドロップゾーンは、DOM 要素上の ondrop イベントをリッスンし、イベントがトリガーされたときにイベントの DataTransfer から情報にアクセスすることで機能します。最良のユーザーエクスペリエンスのために、ドラッグアンドドロップ操作中に視覚的なフィードバックを提供するようにドロップゾーンをスタイル設定することをお勧めします。ドロップゾーンは、オプションでメディアタイプのサブセットのみを受け入れることができますので、メディアタイプがドロップゾーンに対して有効か無効かを視覚的にフィードバックすることで、ドラッグアンドドロップ機能がより直感的でユーザーフレンドリーになります。

サンプルドロップゾーン

ドラッグアンドドロップの仕組み

これらのコンセプトをまとめると、ドラッグアンドドロップのインタラクションは、ユーザーがドラッグするデータを保持する DataTransfer によって動作する広く受け入れられているウェブ標準です。データは、ドラッグゾーンが最初にドラッグされるときに DataTransfer に追加され、転送されるデータの種類に対応するメディアタイプと一緒に追加されます。このデータは、ドラッグペイロードにアクセスできるドロップゾーンにドラッグされます。ドロップゾーンは、ドラッグペイロードのメディアタイプに基づいて選択的にデータを受け入れることができ、ユーザーに提供されるドラッグアンドドロップインタラクションを調整できます。

ドラッグアンドドロップ機能の技術的な詳細を理解するために、ドラッグアンドドロップ統合ポイントの実装に関するチュートリアルを参照し、Workshop のドラッグアンドドロップドキュメントを確認してください。