グラフィカルウィジェット

グラフィカルユーザーインターフェイスのグラフィカルウィジェット（グラフィカルコントロール要素またはコントロールとも呼ばれる）は、ボタンやスクロールバーなどのインタラクション要素です。コントロールは、コンピュータユーザーが直接操作してアプリケーションに関する情報を読み取ったり編集したりするために使用するソフトウェアコンポーネントです。Windows Presentation Foundation、Qt、GTK、Cocoaなどのユーザーインターフェイスライブラリには、コントロールのコレクションと、これらをレンダリングするためのロジックが含まれています。^[1]

各ウィジェットは、特定の種類のユーザーとコンピューターのインタラクションを容易にし、テーマによって定義され、レンダリング エンジンによってレンダリングされたアプリケーションの GUI の可視部分として表示されます。テーマにより、すべてのウィジェットが統一された美的デザインに準拠し、全体的なまとまりが生まれます。一部のウィジェットは、ラベル、ボタン、チェック ボックスなど、ユーザーとのインタラクションをサポートします。その他のウィジェットは、ウィンドウ、パネル、タブなど、 追加されたウィジェットをグループ化するコンテナーとして機能します。

ウィジェット ツールキットを使用してユーザー インターフェイスを構造化すると、開発者は同様のタスクにコードを再利用でき、ユーザーに対話用の共通言語が提供され、情報システム全体の一貫性が維持されます。

グラフィカル ユーザー インターフェイス ビルダーは、ユーザー インターフェイス マークアップ言語を使用して、WYSIWYG方式で GUI の作成を容易にします。通常は直接操作によって、開発者が提供する一般的な説明からウィジェットのすべてのソース コードを自動的に生成します。

1920 年頃、ウィジェットはアメリカ英語に入り、あらゆる便利な装置、特に販売用に製造された製品、つまりガジェットを表す一般的な用語になりました。

1988年、ウィジェットという用語は、プロジェクトAthenaとXウィンドウシステムの文脈で確認されました。Joel McCormackとPaul Asenteによる「An Overview of the X Toolkit」では、次のように述べられています。^[2]

このツールキットは、テキスト ラベル、スクロール バー、コマンド ボタン、メニューなどのユーザー インターフェイス コンポーネント (「ウィジェット」) のライブラリを提供し、プログラマーが新しいウィジェットを作成できるようにし、ウィジェットを完全なユーザー インターフェイスに組み立てるための接着剤を提供します。

同年、ラルフ・R・スウィックとテリー・ワイスマンによるマニュアル「X Toolkit Widgets - C Language X Interface」には次のように書かれている。^[3]

X ツールキットでは、ウィジェットは X ウィンドウまたはサブウィンドウとそれに関連付けられた入力および出力セマンティクスの組み合わせです。

最後に、同じ年に、ラルフ・R・スウィックとマーク・S・アッカーマンはウィジェットという用語の由来を説明しています。^[4]

他の一般的な用語はすべて不適切な意味合いでいっぱいだったので、この用語を選択しました。しかし、懐疑的な人に対しては、ウィジェットの主な実現は関連する X ウィンドウであり、共通の頭文字は役に立たないわけではないという見解を示します。

ウィジェットは、ウィンドウやテキスト ボックスなど、ユーザーが変更できる情報配置を表示します。ウィジェットの特徴は、特定の種類のデータを直接操作するための単一のインタラクション ポイントを提供することです。言い換えると、ウィジェットは、アプリケーション内で結合され、アプリケーションによって処理されるすべてのデータと、このデータに対して実行可能なインタラクションを保持する基本的な視覚的構成要素です。

GUI ウィジェットは、プログラムのヒューマン マシン インターフェイスを構築するために使用されるグラフィカル要素です。GUI ウィジェットは、ソフトウェア コンポーネントのように実装されます。ウィジェット ツールキットやソフトウェア フレームワーク ( GTK+やQtなど) には、ソフトウェア ライブラリに GUI ウィジェットが含まれているため、プログラマーはそれを使用してプログラムの GUI を構築できます。

パロアルト研究所によるゼロックスアルトユーザーインターフェースの研究に基づいて、一般的な情報を保持するための共通の再利用可能なウィジェットのファミリーが開発されました。これらの汎用ウィジェットのさまざまな実装は、多くの場合、ウィジェットツールキットに一緒にパッケージ化されており、プログラマーはこれを使用してグラフィカルユーザーインターフェース (GUI) を構築します。ほとんどのオペレーティングシステムには、プログラマーがアプリケーションに組み込み、動作を指定できる、すぐに調整できるウィジェットのセットが含まれています。^[5]各タイプのウィジェットは通常、オブジェクト指向プログラミング ( OOP ) によってクラスとして定義されます。そのため、多くのウィジェットはクラスの継承から派生しています。

アプリケーションのコンテキストでは、ウィジェットは特定の時点で有効または無効にすることができます。有効なウィジェットは、キーストロークやマウス操作などのイベントに応答できます。このようなイベントに応答できないウィジェットは無効であると見なされます。ウィジェットの外観は、通常、有効か無効かによって異なります。無効の場合、ウィジェットは明るい色 (「グレー表示」) で描画されるか、何らかの方法で視覚的に隠されます。例については、隣の画像を参照してください。

使用できないコントロールを完全に非表示にするのではなく無効にすることの利点は、コントロールが存在するが現在は使用できない (他のコントロールを変更すると使用可能になる可能性がある) ことがユーザーに表示されることです。これにより、ユーザーがコントロールがどこにあるのかまったくわからなくなる可能性がなくなります。ポップアップ ダイアログでは、誤ってクリックしたり、誤ってダブルタップしたりすることを防ぐために、ボタンは表示後すぐにグレー表示される場合があります。

ウィジェットは、物理的なボタンと区別するために仮想的であると分類されることがあります。たとえば、ポインターでクリックできる仮想ボタンと、指で押せる物理ボタン(コンピューターのマウスにあるボタンなど) などです。

関連する（ただし異なる）概念として、デスクトップ ウィジェットがあります。これは、時計、カレンダー、ニュース アグリゲータ、電卓、デスクトップ ノートなどの頻繁に使用される機能への視覚的な情報や簡単なアクセスを提供する、小さな特殊な GUI アプリケーションです。これらの種類のウィジェットは、ウィジェット エンジンによってホストされます。

• ボタン– クリックしてアクションを実行できるコントロール。機械や電子機器にある 押しボタンに相当します。
  • ラジオ ボタン- ラジオのチューニング専用のボタンのグループからラジオ局を選択するのと同様に、クリックしてオプションの選択肢から 1 つのオプションを選択できるコントロールです。ラジオ ボタンは常にペアまたは大きなグループで表示され、グループ内のオプションは一度に 1 つしか選択できません。グループのボタンから新しい項目を選択すると、以前に選択したボタンも選択解除されます。
  • チェック ボックス– クリックしてオプションを有効または無効にできるコントロール。チェック ボックスとも呼ばれます。ボックスは、チェックマーク/チェック マーク ☑ またはクロス ☒ によって「オン」または「オフ」の状態を示します。複数選択内のさまざまなオブジェクトが、チェック ボックスによって表されるプロパティに対して異なる値を持っていることを示すために、中間状態 (網掛けまたはダッシュ付き) で表示できます。ラジオ ボタンとは対照的に、グループ内の複数のチェック ボックスを選択できます。
  • トグル スイッチ- 機能的にはチェック ボックスと同様です。オンとオフを切り替えることができますが、チェック ボックスとは異なり、通常は即座に効果が現れます。
  • トグル ボタン - 機能的にはチェック ボックスに似ており、ボタンとして表示されますが、スイッチとして機能します。オンとオフを切り替えることができます。
  • 分割ボタン – ボタン（通常は何らかのデフォルトアクションを呼び出す）と、関連する二次アクションを含むドロップダウンリストを組み合わせたコントロール
  • サイクル ボタン- 2 つ以上の値の間でコンテンツを循環させ、項目のグループから 1 つを選択できるようにするボタン。
• スライダー– バー上で上下 (垂直スライダー) または左右 (水平スライダー) に移動して値 (ハンドルが 2 つある場合は範囲​​) を選択できるハンドルが付いたコントロール。バーを使用すると、ユーザーは許容される値の範囲内で値やプロセスを調整できます。
• リスト ボックス– 静的な複数行のテキスト ボックス内に含まれるリストから 1 つ以上の項目をユーザーが選択できるようにするグラフィカル コントロール要素。
• スピナー– 値の範囲を段階的に選択するための小さな上下ボタンを備えた値入力コントロール
• ドロップダウン リスト– 選択する項目のリスト。通常、リストには、特別なボタンまたはインジケーターがクリックされた場合にのみ項目が表示されます。
• メニュー– クリックして選択してアクティブにできる複数のアクションを持つコントロール
  • コンテキストメニュー–メニューが呼び出されたときのコンテキストまたは状態に応じて内容が変わるメニューの種類
  • パイメニュー– 方向に応じて選択できる円形のコンテキストメニュー
• メニューバー– ドロップダウンメニューを含むグラフィカルコントロール要素
• ツールバー– 画面上のボタン、アイコン、メニュー、その他の入力要素や出力要素が配置されるグラフィカルなコントロール要素
  • リボン– メニューとツールバーを組み合わせたもので、タブ付きインターフェースを通じて視覚的なレイアウトで多数のコマンドを表示します。
• コンボ ボックス(メニューが添付されたテキスト ボックスまたはリスト ボックス) - 単一行のテキスト ボックスとドロップダウン リストまたはリスト ボックスを組み合わせたもので、ユーザーはコントロールに値を直接入力するか、既存のオプションのリストから選択することができます。
• アイコン– ソフトウェア ツール、機能、またはデータ ファイルのすぐに理解できるシンボル。
• ツリービュー– 情報を階層的に表示するグラフィカルなコントロール要素
• グリッド ビューまたはデータグリッド-行と列に数字やテキストを入力できる、スプレッドシートのような表形式のデータ ビュー。

• リンク– クリックすると別の画面またはページに移動することを示す何らかのインジケーター (通常は下線や色) が付いたテキスト。
• タブ– 複数のドキュメントやパネルを 1 つのウィンドウ内に収めることができるグラフィカル コントロール要素
• スクロールバー– 連続したテキスト、画像、またはその他のコンテンツを所定の方向 (上、下、左、右) にスクロールできるグラフィカル コントロール要素

• テキストボックス（編集フィールド） - ユーザーがテキストを入力できるようにするためのグラフィカルコントロール要素

• ラベル– 別のウィジェットを説明するために使用されるテキスト
• ツールチップ– マウスを別のコントロールの上に置いたときに表示される情報ウィンドウ
• バルーンヘルプ
• ステータスバー– 通常はウィンドウの下部に表示される情報領域を表示するグラフィカルなコントロール要素
• 進行状況バー– ダウンロード、ファイル転送、インストールなどの長時間のコンピュータ操作の進行状況を視覚化するために使用されるグラフィカルなコントロール要素
• 情報バー– 多くのプログラムで、ユーザーに重要でない情報を表示するために使用されているグラフィカルなコントロール要素

• ウィンドウ– 所属するプログラムのグラフィカル ユーザー インターフェイス要素の一部を含む視覚領域で構成されるグラフィカル コントロール要素
• 折りたたみ可能なパネル - ウィジェットのタブをクリックして非表示または表示されるコンテンツをコンパクトに保存できるパネル。
  • 引き出し：画面の左端または右端に固定したり、画面から引き出したり、画面の左端または右端を超えて押し出したりできる補足コンテンツを含むサイドシートまたは表面。 ^[6]
• アコーディオン– ラベルやサムネイルなどのアイテムを縦に積み重ねたリストで、各アイテムを「展開」して関連するコンテンツを表示できます。
• モーダル ウィンドウ– アプリケーションのメイン ウィンドウに従属するグラフィカル コントロール要素で、メイン ウィンドウが使用できないモードを作成します。
• ダイアログボックス– ユーザーに情報を伝え、応答を求める小さなウィンドウ
• パレット ウィンドウ- 「ユーティリティ ウィンドウ」とも呼ばれる - すべての通常のウィンドウの上に浮かんで、現在のアプリケーションのツール、コマンド、または情報にすぐにアクセスできるグラフィカル コントロール要素です。
  • インスペクタウィンドウ– 選択したオブジェクトの現在の属性のリストを表示し、これらのパラメータをオンザフライで変更できるダイアログウィンドウの一種です。
• フレーム– グラフィックコントロール要素のコレクションをグループ化して、関係を視覚的に示すためのボックスの一種。
• キャンバス– グラフィック情報を表現するための一般的な描画要素
• Cover Flow – ドキュメント、Web サイトのブックマーク、アルバムのアートワーク、または写真のスナップショットを視覚的にめくるアニメーション化された 3 次元要素。
• バブルフロー – ユーザーがディスカッション スレッドのツリー ビュー全体を参照したり操作したりできるようにする、アニメーション化された 2 次元要素。
• カルーセル（コンピューティング） – ウェブサイトとモバイルアプリの両方で、ユーザーが素早く閲覧できるように視覚的なカードを表示するために使用されるグラフィカルウィジェット

• グラフィカルユーザーインターフェース要素
• 幾何学的プリミティブ
• ほとんど関連性のない、物理的にインスピレーションを得た「ウィジェット」用のウィジェット エンジン
• ウィジェットツールキット– ウィジェットのコレクションを含むソフトウェアライブラリ
• インタラクション技術

• パッケージ化された Web アプリ (ウィジェット) - パッケージ化と XML 構成 (第 2 版) - W3C 勧告 2012 年 11 月 27 日
• ウィジェット 1.0: ウィジェットの現状 (2008 年第 1 四半期)。W3C ワーキング ドラフト 2008 年 4 月 14 日
• ウィジェットの標準化の要件。W3C ワーキング グループ ノート 2011 年 9 月 27 日