開発者ツールチェーンアプリケーション間のインタラクティビティドラッグアンドドロップドラッグアンドドロップの統合ポイントの作成

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

ドラッグアンドドロップの統合ポイントを作成する

以下のチュートリアルでは、同じメディアタイプを転送または受け入れるドラッグゾーンとドロップゾーン間のドラッグアンドドロップのみを扱います。たとえば、ドラッグゾーンが Foundry オブジェクト RID メディアタイプのデータを DataTransfer に追加する場合、Foundry オブジェクト RID メディアタイプを受け入れるドロップゾーンにのみドラッグできます。たとえば、Gotham オブジェクトメディアタイプを受け入れるドロップゾーンに Foundry オブジェクト RID データをドロップできるようにするには、オブジェクトのタイプマッピングを有効にする必要があり、このチュートリアルの後にエンリッチメントのチュートリアルに沿って進めてください。

ドラッグアンドドロップにより、ユーザーはアプリケーション内およびアプリケーション間でデータを動的に移動できます。以下のチュートリアルでは、アプリケーションと、Gotham および Foundry を含む Palantir プラットフォームの間でデータをドラッグする方法を説明します。アプリケーションにドラッグアンドドロップの統合ポイントを1つ追加するだけで、ユーザーはアプリケーションと Palantir プラットフォームにまたがるワークフローをシームレスに実行できるようになります。

Gotham から Foundry へのデータのドラッグアンドドロップの簡単な例。

ドラッグゾーンとドロップゾーンの実装は、主に次の2つで構成されます。

ドラッグゾーンを作成する：

HTML 要素をドラッグ可能にする
DataTransfer にデータを追加する

ドロップゾーンを作成する：

ドロップゾーンに項目をドロップできるようにする
ドロップを処理する
ドロップゾーンのスタイルを設定する

アプリケーションと Palantir プラットフォーム間のドラッグアンドドロップの相互運用性を高めるために、プラットフォームの最新バージョンをインストールすることを推奨します。

ドラッグゾーンを作成する

ドラッグゾーンは、ユーザーがデータを「つかみ」、ドロップゾーンに「ドロップ」して別の場所に転送できるインタラクティブな DOM 要素です。ドラッグゾーンは DataTransfer オブジェクトにデータを書き込み、ユーザーが draggable 要素をドラッグしたときにそのデータを転送できるようにします。以下の手順では、要素を draggable にし、DataTransfer オブジェクトにデータを追加して、ドラッグイベントを処理する方法を詳しく説明します。これらの概念の詳細については、ドラッグゾーンと DataTransfer オブジェクトを参照してください。

ドラッグゾーンのサンプル。

HTML 要素をドラッグ可能にする

draggable 属性を true に設定して、HTML 要素をドラッグゾーンにします。ドラッグイベントにデータをアタッチするには、DataTransfer にデータを設定する ondragstart ハンドラーを追加します。

Copied!1
2
3
<p id="p1" draggable="true" ondragstart="handleDragStart    (event)">
    Draggable Element
</p>

DataTransfer にデータを追加する

ドラッグイベントにデータを追加するには、アタッチされた DataTransfer の dataTransfer.setData メソッドを呼び出します。このメソッドは、指定されたメディアタイプの形式で DataTransfer にデータを追加します。詳細については、MDN の DataTransfer ドキュメント ↗を参照してください。

Copied!1
2
3
4
5
6
7
8
function handleDragStart(event) {
    event.dataTransfer.setData(
        <media type>,
        <data>
    );

   event.dataTransfer.effectAllowed = "move";
}

上記の <media type> を、ドラッグするデータのメディアタイプに置き換えます。たとえば、Foundry オブジェクト RID の場合は application/x-vnd.palantir.rid.phonograph2-objects.object です。JSON.stringify を使用してデータを文字列に変換し、<data> をシリアライズしたデータに置き換えます。ユースケースに適したメディアタイプを特定するには、Palantir メディアタイプのドキュメントを参照してください。

DataTransfer にデータを追加するときは、セキュリティ上の懸念を考慮してください。どのドロップゾーンからもこのデータにアクセスできます。

以下は、Foundry オブジェクト RID 用のドラッグ開始ハンドラーの例です。

Copied!1
2
3
4
5
6
7
8
9
function handleDragStart(event) {
    const foundryObjectRids = ["ri.phonograph2-objects.main.object.XXXXXXX", "ri.phonograph2-objects.main.object.YYYYYYY"]
    event.dataTransfer.setData(
        "application/x-vnd.palantir.rid.phonograph2-objects.object",
        JSON.stringify(foundryObjectRids)
    );

    event.dataTransfer.effectAllowed = "move";
}

このハンドラーは、Foundry オブジェクト RID メディアタイプを DataTransfer に追加します。ドラッグした DataTransfer がドロップされると、Foundry オブジェクト RID データを受け入れる任意のドロップゾーンで、foundryObjectRids 内のデータを受け取れます。

この時点で、DataTransfer 内のメディアタイプを受け入れるドロップゾーンに、ドラッグゾーンからドラッグできるようになっているはずです。メディアタイプに応じてドラッグペイロードを受け入れるドロップゾーンを見つけるには、Palantir メディアタイプを参照してください。

ドロップゾーンを作成する

ドロップゾーンは、ドラッグゾーンから「ドロップ」されたデータを受け取る、DOM 上のインタラクティブな要素です。ドロップゾーンは ondrop イベントをリッスンし、イベントが発生したときにそのイベントの DataTransfer から情報にアクセスすることで動作します。ドロップゾーンと DataTransfer オブジェクトについての詳しくはこちら。

ドロップゾーンのサンプル。

デフォルトのイベント動作を抑止する ondragover ハンドラーを追加すると、HTML 要素をドロップゾーンにできます。ドロップされた DataTransfer を処理するために、ondrop ハンドラーを追加します。

手順は次のとおりです。

ドロップゾーンに項目をドロップできるようにする
ドロップを処理する
ドロップゾーンのスタイルを設定する

このチュートリアルでは、Foundry オブジェクト RID メディアタイプを受け入れるドロップゾーンの作成を扱いますが、実装では任意のメディアタイプに置き換えられます。

ドロップゾーンに項目をドロップできるようにする

dragover および dragenter イベントのデフォルトの処理を抑止する関数を記述します。デフォルトのイベント動作ではドロップされたデータを受け入れないため、この動作をキャンセルし、ドロップゾーンに必要な、ドロップされたデータを要素が受け入れられるようにします。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ドロップイベントを確実に発火させるために必要です
// ドラッグペイロードが受け入れられる場合にのみデフォルトの動作を抑止します

function handleDragOver(event){
    if(event.dataTransfer?.types.includes("application/x-vnd.palantir.rid.phonograph2-objects.object")){
        event.preventDefault();
    }
}

function handleDragEnter(event){
   if(event.dataTransfer?.types.includes("application/x-vnd.palantir.rid.phonograph2-objects.object")){
        event.preventDefault();
    }
}

ドロップゾーンに handleDragOver イベントハンドラーを追加します

Copied!1
2
3
4
5
6
7
<div
  id="my-cool-drop-zone"
  ondragover="handleDragOver(event)"
  ondragenter="handleDragEnter(event)"
>
  Drop Zone
</div>

ドロップを処理する

ドロップ後に DataTransfer からデータにアクセスしてドロップを処理し、リンクデータを開くというデフォルトのイベント動作を抑止する関数を作成します。DataTransfer の getData 関数を呼び出して、DataTransfer から文字列形式のデータを返します。DataTransfer にデータがない場合、またはそのメディアタイプのデータがない場合、getData は空の文字列を返します。このメソッドの詳細については、MDN の getData ドキュメント ↗を参照してください。

以下は、DataTransfer から Foundry オブジェクト RID を取得する ondrop コールバックの例です。event.dataTransfer.getData 呼び出しのメディアタイプを、転送したいデータの種類に合ったメディアタイプに置き換えます。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function handleDrop(event) {
    // リンクを開くデフォルトの動作を抑止します
    event.preventDefault();

    // Foundry オブジェクトの RID データを取得します
    const data = event.dataTransfer.getData(
        "application/x-vnd.palantir.rid.phonograph2-objects.object"
    );

    try {
        if (data != null && data !== ""){
            // 返されたデータのパースを試みます
            const dataParsed = JSON.parse(data);

            // データを出力します
            console.log(dataParsed);

            // データを使って何らかの処理を行います
            doCoolThingWithFoundryObjects(dataParsed);
        }
    } catch (error) {
        console.error("Unable to parse data", error)
    }
}

以下のように、ドロップゾーンのコンポーネントに handleDrop 関数を追加します。

Copied!1
2
3
4
5
6
7
<div
  id="my-cool-drop-zone"
  ondrop="handleDrop(event)"
  ondragover="handleDragOver(event)"
>
  Drop Zone
</div>

この時点で、ドロップゾーンにデータをドロップできるようになっているはずです。ドロップゾーンにドロップできるドラッグゾーンを見つけるには、Palantir メディアタイプのドキュメントを参照してください。

（推奨）DataTransfer からデータを取得するときは、可能であれば実行時の型ガードまたはバリデーターを使用することを推奨します。メディアタイプ間のデータ接続は契約として存在しますが、型ガードを追加することで、受信したデータがその契約に従っていることを保証できます。

サポートされている Palantir メディアタイプについては、以下のドキュメントを参照してください。

ドロップゾーンにスタイルを適用する

ドロップゾーンがドラッグペイロードを受け入れるかどうかをユーザーが確認できるように、ドロップゾーンにスタイルを適用することが重要です。スタイルがないと、ドロップゾーンの使いやすさが損なわれます。ドラッグペイロードがドロップゾーンで有効かどうか、またはドラッグペイロードを受け入れるかどうかを判断するために追加の処理が必要かどうかに応じて、異なるスタイルをドロップゾーンに適用することを推奨します。ドロップ後にはドロップゾーンのスタイルをクリアする必要があります。この手順については、以下で説明します。

このチュートリアルを終えると、ドラッグペイロードを受け入れる場合にドロップゾーンが「ハイライト表示」されるようになります。ただし、このチュートリアルでは、デザインガイドラインで示されている「無効」と「読み込み中」のスタイルの実装は扱いません。より一貫性があり、使いやすいドラッグアンドドロップのインタラクションを実現するために、これらの追加のスタイルを実装することを推奨します。

ステップ1から4まで進めると、受け入れ可能なメディアタイプのペイロードをユーザーがアプリケーション上にドラッグしたときに、ドロップゾーンが「ハイライト表示」されるようになります。ステップ5から7まで進めると、ユーザーがアプリケーション内からドラッグを開始したときに、ドロップゾーンが「ハイライト表示」されるようになります。ステップ8まで進めると、下の画像に示すホバー時のスタイルがドロップゾーンに適用されるようになります。

ドラッグアンドドロップコンポーネントのスタイルの例。

CSS クラスの実装をコピーします。ドロップゾーンにスタイルを適用するには、スタイル用の CSS ファイルを作成し、デザインガイドラインから適切なドロップゾーンのスタイルクラスを追加します。このガイドラインには、ドロップゾーンのサイズに応じた異なるスタイルの推奨事項が含まれています。
ドラッグペイロードに受け入れ可能なメディアタイプが含まれている場合に、条件付きでスタイルを適用する関数を記述し、ドロップゾーンがドラッグペイロードを受け入れるときにスタイルを適用します。この関数は、classlist ↗ プロパティを使用して、ドロップゾーンがドラッグペイロードを受け入れる場合に、そのドロップゾーンにクラス名を追加します。ドラッグ時のホバースタイルの CSS については、デザインガイドラインを参照してください。

Copied!1
2
3
4
5
6
7
8
9
10
function conditionallyApplyStylingToDropZone(event, className){
    // ドラッグペイロードのメディアタイプが Foundry オブジェクトの RID を表す場合、ドロップゾーンはそのペイロードを受け入れます
    if(event.dataTransfer?.types.includes("application/x-vnd.palantir.rid.phonograph2-objects.object")){
        const dropzone = document.getElementById("my-cool-drop-zone");
        if(dropzone != null){
            // スタイルのクラス名を追加します
            dropzone.classList.add(className);
        }
    }
}

classlist プロパティを使用して、ドロップゾーンからスタイルを削除する関数を記述します。

Copied!1
2
3
4
5
6
function removeStylingFromDropZone(){
    const dropzone = document.getElementById("my-cool-drop-zone");
    if(dropzone != null){
        dropzone.classList.remove(className);
    }
}

dragenter と dragleave のイベントハンドラーを追加し、外部のドラッグゾーンからデータがドロップゾーン上にドラッグされたときに、ドロップゾーンにスタイルを適用します。子要素がイベントの上位への伝播を妨げる場合に備えて、イベントの capture フェーズでこれらのイベントをリッスンする必要があります。詳細については、MDN のイベントリスナーのキャプチャに関するドキュメント ↗を参照してください。

ここでは、各イベントが発火した回数をローカルで追跡する必要があります。これらのイベントは、ページ上のすべての子要素によって発火します。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let dragInsideApplicationCount = 0;

function handleDragEnter(event){
    if(dragInsideApplicationCount === 0){
        maybeApplyValidStylingToDropZone(event, "valid-small");
    }

    dragInsideApplicationCount += 1;
}

function handleDragLeave(event){
    if(dragInsideApplicationCount === 1){
        removeValidStylingFromDropZone("valid-small");
    }

    dragInsideApplicationCount -= 1;
}

document.addEventListener("drag-enter", handleDragEnter, {capture: true});
document.addEventListener("drag-leave", handleDragLeave, {capture: true});

上記のコードでは、外部のアプリケーションまたはウィンドウ上のドラッグゾーンからドラッグを開始した場合にのみ、ドロップゾーンがハイライト表示されます。アプリケーション内からのドラッグペイロードでもドロップゾーンをハイライト表示するには、次のステップで説明するように dragstart リスナーを追加します。

この時点で、外部のアプリケーションやウィンドウからペイロードをドラッグし、ドロップゾーンがそのドラッグペイロードを受け入れる場合にハイライト表示されることを確認できるはずです。ドロップゾーンにドラッグできるドラッグゾーンを探すには、Palantir メディアタイプのドキュメントを参照してください。ドラッグペイロードをドロップした後も、ドロップゾーンにはスタイルが適用されたままになります。ドロップ時にスタイルを削除する手順は、後のステップで説明します。

ドロップゾーンがドラッグペイロードを受け入れるときにスタイルを適用する、グローバルな dragstart イベントリスナーを記述します。このイベントリスナーは、ユーザーが同じページ上のドラッグゾーンからドラッグを開始したときに発火します。このスタイルは、ドロップゾーンがドラッグペイロードを受け入れることを示します。詳細については、MDN のドラッグ開始に関するドキュメント ↗を参照してください。

Copied!1
document.addEventListener("dragstart", maybeApplyValidDropStylingToDropZone, {capture: true});

ドロップゾーン上にドラッグされたときに、ドロップゾーンのスタイルを変更します。ドラッグペイロードがドロップゾーン上にあるときに視覚的な変化をユーザーに示すには、ドロップゾーンに drag-enter と drag-leave のハンドラーを追加して、それらのスタイルを適用および削除します。これらのイベントはドロップゾーン上の dragenter と dragleave イベントによってのみトリガーされるという点で、前述のグローバルな drag-enter と drag-leave のイベントリスナーとは異なります。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let dropHoveringOverDropZoneCount = 0;

function handleDragEnter(event){
    if (dropHoveringOverDropZoneCount === 0 && event.dataTransfer?.types.includes("application/x-vnd.palantir.rid.phonograph2-objects.object")){
        // ドロップゾーンがドラッグペイロードを受け入れる場合、ドロップを許可してスタイルを適用します
        event.preventDefault();
        conditionallyApplyStylingToDropZone(event, "valid-small-hover");
    }
    dropHoveringOverDropZoneCount += 1;
}

function handleDragLeave(event){
    if (dropHoveringOverDropZoneCount === 1){
        removeStylingFromDropZone("valid-small-hover");
    }
    dropHoveringOverDropZoneCount -= 1;
}

handleDragEnter と handleDragLeave のドラッグイベントハンドラーをドロップゾーンコンポーネントに追加します。

Copied!1
2
3
4
5
6
7
8
9
<div
  id="my-cool-drop-zone"
  ondragover="handleDragOver(event)"
  ondrop="handleDrop(event)"
  ondragenter="handleDragEnter(event)"
  ondragleave="handleDragLeave(event)"
>
  Drop Zone
</div>

スタイルのクリーンアップを行うようにドロップゾーンを更新します。データがドロップされた後、ドロップゾーンからドロップスタイルの CSS クラスを削除します。これは、ドロップゾーンが「ハイライト表示」された状態のままにならないようにするために必要です。また、新しいドラッグイベントが初期状態から処理されるように、ドラッグカウンターもリセットします。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function handleDrop(event) {
    // リンクを開くデフォルトの動作を抑止します
    event.preventDefault();

    // スタイルの後処理を行います
    // アクティブなドラッグペイロードがなくなったため、CSS クラスを外します
    removeStylingFromDropZone("valid-small-hover");
    removeStylingFromDropZone("valid-small");

    // カウンターをリセットします
    dropHoveringOverDropZoneCount = 0;
    dragInsideApplicationCount = 0;

    // Foundry オブジェクトの RID データを取得します
    const data = event.dataTransfer.getData(
        "application/x-vnd.palantir.rid.phonograph2-objects.object"
    );

    try {
        if (data != null && data !== ""){
            // 返されたデータのパースを試みます
            const dataParsed = JSON.parse(data);

            // データを出力します
            console.log("dropped data: ", dataParsed);

            // データを使って何らかの処理を行います
            doCoolThingWithFoundryObjects(dataParsed);
        }
    } catch (error) {
        console.error("Unable to parse data", error)
    }
}

このステップを終えると、ドロップゾーンが動作するようになるはずです。ドロップゾーンは、ドラッグペイロードのデータを受け入れるときにハイライト表示され、ドラッグペイロードをドロップした後にはデータがコンソールに出力されるはずです。また、ドラッグペイロードをドロップした後には、ドロップゾーンのスタイルも削除されるはずです。

ワークフローに Gotham と Foundry 間でのデータ転送が含まれる場合は、データエンリッチメントのチュートリアルに沿って進め、この機能を実装してください。

←

PREVIOUSオントロジー SDK アプリケーション間のドラッグアンドドロップ

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

→