ドラッグアンドドロップ

コンピュータの グラフィカル ユーザー インターフェイスでは、ドラッグ アンド ドロップは、ユーザーが仮想オブジェクトを「つかんで」別の場所または別の仮想オブジェクトにドラッグすることで選択するポインティング デバイス ジェスチャです。一般に、これはさまざまな種類のアクションを呼び出したり、2 つの抽象オブジェクト間にさまざまな種類の関連付けを作成したりするために使用できます。

ドラッグアンドドロップ機能は、すべてのソフトウェアに備わっているわけではありませんが、習得が早くて簡単なテクニックである場合もあります。しかし、アイテムをドラッグアンドドロップできることや、ドラッグアンドドロップによって実行されるコマンドがユーザーにとって必ずしも明確ではないため、使い勝手が低下する可能性があります。^[1]

ドラッグ アンド ドロップの基本的な手順は次のとおりです。

• ポインタをオブジェクトに移動する
• マウスやその他のポインティングデバイスのボタンを押したままにすると、オブジェクトを「つかむ」ことができます。
• ポインタをこのオブジェクトに移動して、目的の場所に「ドラッグ」します。
• ボタンを離してオブジェクトを「ドロップ」します

ドラッグは、ボタンを押さずに同じポインティングデバイスを動かすよりも、より多くの物理的な労力を必要とします。このため、ユーザーはドラッグ中にそれほど迅速かつ正確に移動できません（フィッツの法則を参照）。ただし、ドラッグアンドドロップ操作には、2つのオペランド（ドラッグするオブジェクトとドロップ場所）を1つのアクションに慎重にまとめるという利点があります。^[2] 長時間のドラッグアンドドロップ（グラフィックデザインなど）は、マウスを持つ手に負担をかける可能性があります。

同じボタンでアイテムを選択してドラッグすると、設計上の問題が発生します。不正確な動きにより、オブジェクトの選択がドラッグ動作として登録される可能性があります。

もう 1 つの問題は、ドロップのターゲットが他のオブジェクトの下に隠れる可能性があることです。ユーザーはドラッグを中止し、ソースとターゲットの両方を表示して、もう一度開始する必要があります。従来の Mac OS では、画面上部のメニュー バーが、ユニバーサルな「ドラッグ キャンセル」ターゲットとして機能していました。この問題は、Mac OS XでExposéが導入されたことで解決されました。

ドラッグアンドドロップは、当時はクリックアンドドラッグと呼ばれ、オリジナルのMacintoshでファイルを操作するために使用されていました（たとえば、ディスク^[3]またはフォルダ^[4]間でファイルをコピーするなど）。System 7では、ドキュメントアイコンをアプリケーションのアイコンにドロップすることで、アプリケーションでドキュメントを開く機能が追加されました。

Apple はSystem 7.5に「Macintosh ドラッグ アンド ドロップ」を追加し、「クリック アンド ドラッグ」を、ドキュメント内のテキスト コンテンツのコピーや移動などの一般的なクリップボード操作に拡張しました。コンテンツをファイル システムにドラッグして「クリッピング ファイル」を作成し、それを保存して再利用することもできます。また、ファイルをアプリケーション ウィンドウにドロップして、たとえば、ドキュメントを電子メールに添付したり、ワード プロセッサ ドキュメントに画像を追加したりすることもできます。

Mac OS では、その歴史のほとんどにおいて、マウスの上面の大部分をボタンが覆うシングルボタン マウスが使用されてきました。これにより、ドラッグ中にボタンを押し続けることに関する人間工学上の懸念が軽減される可能性があります。

OS/2のWorkplace Shell では、マウスのセカンダリ ボタンでドラッグ アンド ドロップを頻繁に使用し、プライマリ ボタンは選択とクリックに使用します。他の高度なCommon User Access機能と同様に、この使用法がネイティブ OS/2 アプリケーションをプラットフォームに依存しないポートと区別しています。

HTML5のワーキングドラフト仕様にはドラッグアンドドロップのサポートが含まれています。^[5] HTML5は、次のようなさまざまな種類のドラッグアンドドロップ機能をサポートしています。

• テキストとHTMLコードをドラッグアンドドロップ
• HTML要素をドラッグアンドドロップする
• ファイルをドラッグアンドドロップ

必要なアクションに基づいて、上記のいずれかのタイプを使用できます。HTML 要素をドラッグして現在の位置を移動すると、その ID が移動先の親要素に送信されるため、テキストが送信され、最初のグループと見なすことができます。

Google の Web ベースの電子メール アプリケーションGmail は、最新のGoogle Chromeブラウザと Apple のSafari (5.x) で画像と添付ファイルのドラッグ アンド ドロップをサポートしています。Google 画像検索では、画像ファイルをブラウザにドラッグ アンド ドロップして逆画像検索を実行できます。

タッチ スクリーン インターフェイスには、ドラッグ アンド ドロップ、より正確には、iPhoneやAndroid のホーム画面などで長押ししてからドラッグする操作も含まれます。

iOS 11ではドラッグアンドドロップ機能が実装されており、ユーザーはアプリ内またはiPad上のアプリ間でアイテムをタッチ（他の指でタップしてさらにドラッグ）することができます。^[6] iPhoneでは、この機能はユーザーがドラッグを開始した同じアプリ内でのみ利用できます。^[7]

ドラッグ アンド ドロップは、多くのエンドユーザー開発システムにおいて、重要なプログラム構築アプローチであると考えられています。より伝統的なテキストベースのプログラミング言語とは対照的に、多くのエンドユーザープログラミング言語は、ドラッグ アンド ドロップ インターフェイスを通じてエンドユーザーが操作するタイルやアイコンなどの視覚的なコンポーネントに基づいています。子供向けのプログラミング環境であるAgentSheets ^[8]は、ドラッグ アンド ドロップ ブロック プログラミングという現代的な概念を導入し、4 つのコア アフォーダンスを提供しました。1) エンドユーザーが構成可能なブロック、2) エンドユーザーが編集可能なブロック、3) ブロックをネストしてツリー構造を表すことができる、4) ブロックを幾何学的に配置して構文を定義する。ドラッグ アンド ドロップは、Blenderなどのグラフィック ツール用の多くのシェーダー編集プログラムでも採用されています。^{[9]ドラッグ アンド ドロップは、} Unreal Engine、GameMaker Studio、Construct 2、そして拡張されたUnityなど、一部のビデオ ゲーム エンジンでも採用されています。

一般的な例としては、仮想デスクトップ上のアイコンを特別なゴミ箱 アイコンにドラッグしてファイルを削除することが挙げられます。

その他の例としては、次のものがあります。

• データファイルをプログラムの アイコンまたはウィンドウにドラッグして表示または処理します。たとえば、テキスト ファイルを表すアイコンを Microsoft Word ウィンドウにドロップすると、「このドキュメントを Word で新しいドキュメントとして開く」という意味になります。
• ファイルを新しい場所/ディレクトリ/フォルダに移動またはコピーする、
• 処理対象オブジェクトのリストにオブジェクトを追加する
• グラフィカルユーザーインターフェースでウィジェットを並べ替えてレイアウトをカスタマイズする
• コマンドを適用するオブジェクトに属性をドラッグすると、
  • 例えば、色をグラフィックオブジェクトにドラッグして色を変更するなど、
• ツールをキャンバスの場所にドラッグしてその場所に適用します。
• ある場所または単語から別の場所またはドキュメントへのハイパーリンクを作成します。
• ほとんどのワードプロセッサでは、選択したテキストをあるポイントから別のポイントにドラッグできます。
• シェーダーやマテリアルを設計するために、 Blenderなどの一連のコード ブロックをドラッグします。

• マウスジェスチャー
• ポイントアンドクリック
• スナップ（コンピュータグラフィックス）