「グラフィカルユーザインタフェース」の版間の差分
編集の要約なし タグ: モバイル編集 モバイルウェブ編集 |
m Bot作業依頼: Apple関連記事の改名に伴うリンク修正依頼 (iOS (Apple)) - log |
||
| 90行目: | 90行目: | ||
** [[Angular]]<ref>シンプルで宣言的なテンプレートを使用して素早く機能を構築します [https://angular.jp/ Angular] 2019-11-08閲覧</ref> |
** [[Angular]]<ref>シンプルで宣言的なテンプレートを使用して素早く機能を構築します [https://angular.jp/ Angular] 2019-11-08閲覧</ref> |
||
** [[Vue.js]]<ref>Vue.js のコアは、単純なテンプレート構文を使って宣言的にデータを DOM に描画することを可能にするシステムです [https://jp.vuejs.org/v2/guide/#%E5%AE%A3%E8%A8%80%E7%9A%84%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0 Vue.js - はじめに - 宣言的レンダリング]</ref> |
** [[Vue.js]]<ref>Vue.js のコアは、単純なテンプレート構文を使って宣言的にデータを DOM に描画することを可能にするシステムです [https://jp.vuejs.org/v2/guide/#%E5%AE%A3%E8%A8%80%E7%9A%84%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0 Vue.js - はじめに - 宣言的レンダリング]</ref> |
||
* [[macOS]], [[IOS ( |
* [[macOS]], [[IOS (Apple)|iOS]] |
||
** SwiftUI<ref>宣言型シンタックス. SwiftUIは宣言型シンタックスを使用しているため、ユーザーインターフェイスの動作をシンプルに記述することができます。 [https://developer.apple.com/jp/xcode/swiftui/ SwiftUI]</ref> |
** SwiftUI<ref>宣言型シンタックス. SwiftUIは宣言型シンタックスを使用しているため、ユーザーインターフェイスの動作をシンプルに記述することができます。 [https://developer.apple.com/jp/xcode/swiftui/ SwiftUI]</ref> |
||
* [[Android (オペレーティングシステム)|Android]] |
* [[Android (オペレーティングシステム)|Android]] |
||
2021年5月20日 (木) 22:55時点における版
 |
| オペレーティングシステム |
|---|
 |
| 主要項目 |
グラフィカルユーザインタフェース（Graphical User Interface、略称：GUI（ジーユーアイ、グイ、グーイ[1]））は、コンピュータグラフィックスとポインティングデバイスなどを用いる、グラフィカル（ビジュアル）であることを特徴とするユーザインタフェース。キャラクタユーザインタフェース (CUI) やテキストユーザインタフェース (TUI) と対比して語られることが多い。
歴史
世界初の実用となったGUIは1963年に完成したSAGEというアメリカ空軍の開発した防空管制システムである。これはCRTとライトガンを備えており、核爆弾を搭載した敵航空機を迎撃するために多数のレーダーからの情報を統合し、複数のオペレーターがライトガンで迎撃目標を指示するだけで全軍の適切な箇所に自動で指令が届き、その結果レーダー情報の膨大さを気にすることなく的確に敵機を迎撃できるというものであった。
また、オシロスコープはテレビやディスプレイと同じ原理を使った装置だが、コンピュータの内部の信号を直接観察できる装置としても都合が良いため、初期のコンピュータではしばしばそのような目的でブラウン管が情報出力のために備えられていた。これはGUIとして扱うには機能的には足りないものだが、最初期のコンピュータの1基であるEDSACにも付いており、OXOというゲームに使われている。実用の目的で情報表示にブラウン管が使われた例としてはMARS-1（1960年、日本国有鉄道）がある。
1960年代の米国において、サザランドのSketchpadや、マウスの発明者でもあるダグラス・エンゲルバートによるNLSなどといった、（軍用などの専用目的ではなく、汎用を意図した）初期のGUIシステムが開発された。NLSはエンゲルバートの提唱する「人間知性の拡大」という概念を実現するために作られており、ハイパーテキスト、ハイパーリンク、マルチウインドウなどの今日的なGUIには必須の概念を実装して見せたきわめて革新的なものである。またジャーナルと呼ばれるハイパーテキストベースの文書共有システムは正にWikiと同じ概念である文書によるコラボレーション・グループウェアを実装したものである。NLSの本質は単なるGUIの実装ではなく、GUIは会話・画像・文書をリアルタイムで共有する電子会議を通じた知的共有グループウェアを実現するための手段であった。さらに、後にWYSIWYGと呼ばれることになる機能もこのとき既に実装されていた[2]。
.png)
1970年代には、アラン・ケイにより、誰でも簡単に使えることを目指して暫定Dynabook環境が作られた。当初はData General社のNovaでスクリプト言語的な位置づけで開発されたSmalltalk-72だったが、約5〜10倍の能力とビットマップディスプレイ、マウスを装備したAltoへと移植され、マシンパワーを得るとすぐにオーバーラップ可能なウインドウシステムの構築が試みられた（Smalltalk-74）。このマルチウインドウシステムを効率よく機能させるために後に考え出されたダブルバッファリングおよびBitBltは、現在も、ちらつきのない画面描画のために使われるアルゴリズムおよびデータ操作/ハードウェア機能として知られる。
1974年までには、後にMicrosoft Wordの前身と言われるようになるBravoを開発していた別グループとの情報交換を経てパロアルト研究所初のWYSIWYGエディタも実装される。70年代半ば過ぎにはマウスによる操作、メニューによる命令実行、オーバーラップマルチウインドウシステム、絵と文章の共存できるWYSIWYGのマルチフォントエディタ、アイコンによる機能やオブジェクトの簡易表現など、現在ごくふつうに見られるグラフィカルユーザインタフェースの主要な要素は固まっていた。Smalltalk-72、同-74の後継であるSmalltalk-76ではさらに洗練・整備され、それを1979年に見たスティーブ・ジョブズが策定中のLisaの仕様決定に役立てた[3]。
概要
GUIでは、コンピュータの画面上に、ウィンドウ、アイコン、ボタンといったグラフィックが表示され、ユーザはそれらの中から目的の動作を表すグラフィックスをマウスなどのポインティングデバイスで選択する。
基本的には「デスクトップ」「ウィンドウ」「メニュー」「アイコン」「ボタン」など要素を組み合わせて構成され、それらをポインティングデバイスによって操作されるカーソルを通じて指示を与える。
端的に言うと、画面上のボタンや画像などを選択する事でリアクションを発生させる仕組みを総称してGUIと言う。
構成要素
- デスクトップ
- X Winodow System ではルートウィンドウと言う。「デスクトップ環境」のこと。この上にウィンドウを重ねることによってインタフェースはマルチタスクを実現する。一般的なインタフェースでは、ここにアプリケーションやデータのアイコンをおき、ここから作業を開始できるようにする。この画面は、既存のディレクトリ構成とは相容れない立場のため、特殊な位置におかれるディレクトリを参照する形でデータの内容を定義する。
- デスクトップの背景に画像や各種アクセサリを置いて、視覚的に楽しませる機能が提供される。また、アプリケーションの役割を果たすActive Desktopやガジェットなど（ウィジェットエンジン）を置くこともできる。
- 最近では、仮想デスクトップをキューブで表示する、アイコンの配置に立体感を着ける、ウィンドウを立体的に表示など、3D効果によって操作性を向上するデスクトップ環境が増えている。Unix系ウィンドウマネージャのCompiz、Windows VistaのAero、サン・マイクロシステムズのProject Looking Glassなどが例に挙げられる。
- ウィンドウ
- アプリケーションがデータを扱うためのグラフィカルインタフェースにおけるひとつの単位となるもの。ウィンドウ内においては、アプリケーションとデータは一体化する。ここにおいて、アプリケーションを操作し、データを管理、生成、編集する。通常はメニュー、アイコンなどを周辺に配置し、中央にデータをおく。
- ウィンドウには、データやアプリケーションに応じてタイトルが付けられ、ウィンドウの最上部にタイトルがおかれる。一般的には、ウィンドウをディスプレイ全体に表示する「最大化」、表示を隠す「最小化」、複数枚のウィンドウの最前面、タイトルだけを表示する「シェード」などがサポートされ、これにより、ウィンドウの操作を簡単に行うことが出来る。
- Single Document Interface (SDI)
- ウィンドウにおいて、ひとつのデータをひとつのウィンドウ内に完結させる方式。この場合は、データの数だけ、ウィンドウが出力される。他のアプリケーションのウィンドウと突き合わせて利用できるが、その分だけ、ウィンドウの数が多くなり、管理が繁雑になる。
- Multiple Document Interface (MDI)
- ひとつのウィンドウ内に入れ子状にウィンドウが表示され、複数のデータ管理を行う方式。この場合は、ウィンドウ管理が簡単になるが、作業の管理が二重になる。
- タブ
- MDIにおけるデータ管理方式のうち、データのタイトルをウィンドウ内に並べ、タイトルを選んで必要なデータだけを表示するもの。これにより、簡単にデータにアクセスできるようになる。
- メニュー
- アプリケーション、オペレーティングシステム (OS)より指示できるコマンドを階層上に表現したもの。画面上部、または画面下部におかれ、そのアプリケーションから利用できるコマンドがほぼ全て配置される。通常は左に重要度の高いものがおかれ、右にいくにしたがって重要度は低くなる。コマンドの階層はアプリケーションにより異なるが、ファイル操作、編集の機能を重視して、それらのコマンドから左側からおかれ、右には、ヘルプなどがおかれる。マウスの第一ボタンによって操作する。
- コンテキストメニュー
- アプリケーションの用意した階層上のメニューとは別に、メニュー以外のところでマウスの第二ボタンなどを押した際に機能するメニューの事。ボタンが呼び出された位置に応じてメニューの内容が変化し、編集操作を簡単に行うことが出来るようになっている。
- アイコン
- データ管理アプリケーションにおいて、データ、アプリケーション、ディレクトリなど表現したもの。
- データ管理アプリケーション、すなわち、ディレクトリにおけるユーザーデータの管理や、特定のデータを管理を行うアプリケーションの場合、アイコンによりデータを表現する。通常は、データの中身や、拡張子などから関連づけられたアプリケーションを表現するが、ユーザーが自由に変更する場合もある。
- データのアイコンは開くことにより、関連づけられたアプリケーションの起動からサポートしてくれる。アプリケーションアイコンは、アプリケーションの起動だけを行う。
- ボタン
- メニューのうち、利用頻度の高いコマンドを絵で表現し、アプリケーション内に配置したもの。
- アプリケーション上におかれるボタンは、普通はメニューの代わりをする。利用頻度の高いものからおかれ、メニューの階層を辿らなくてもその機能が使えるようになっている。ただし、ユーザーによりコマンドの利用頻度は異なるので、この配置を編集できるようになっているのが普通である。
その他
- ごみ箱
- ファイル消去に対するフェイルセーフを果たすために、「ゴミ箱」などと呼ばれる機能を持つものがある。これは、ファイルの消去を行なう際に、一時的に別の場所に移すことで、誤ったファイル消去を未然に防ぐことが出来る。Macintoshでは、ゴミ箱はファイルだけでなく、さまざまなオブジェクトの削除の機能を持っている。
- アプリケーションランチャ
- GUI上からアプリケーションを呼び出す際に様々な方式があるが、いくつかのOSではメニュー形式のアプリケーションランチャを持っている。NEXTSTEPとmacOSでは、ドックと呼ばれるパレット型の機構を持ち、ファイルやアプリケーションの各種の情報を格納してクリックでそれらを呼び出せる。
GUIにおけるタスク管理
GUIにおいて、作業はウィンドウ単位に分割される。MDIとMac OS（macOSを含む）の場合を除いて、「ウィンドウの数 = タスクの数」であることが多い。このため、インタフェース全体で見た場合、どのようにしてタスク管理を行うかが重要になる。Windows 95以降のWindowsファミリーをはじめとしていちばん多い方式は、タスクバーと呼ばれる棒状の領域をデスクトップ上に用意し、ここに、各ウィンドウのアイコンやタイトルを並べるものである。これにより、視認性、操作性を確保しながら、多くのウィンドウを管理することができる。他には、デスクトップ上のメニューに各ウィンドウを管理するメニューを追加する、デスクトップにタスクをアイコンで表示する（Windows 3.xまでのWindowsファミリーの方式）、タスクの数だけ仮想デスクトップを用意する（Palm WebOSなどの方式）などの方法がある。macOSはDockでタスク管理を行うが、Mission Controlというウィンドウ一覧表示モードも併用されている。
ポインティングデバイスによる操作
GUIの基本は、ポインティングデバイスによってカーソルを操作し、デバイスに付いたボタン（通常2〜3個）を押すことである。これにより、「位置」と「指示」を明確にし、視覚的な操作を行うことが出来る。
指示の内容は、カーソルの位置によって異なる。データ管理アプリケーションでは、第1ボタンは、カーソルの位置にあるデータを選択し、2回連続で押す（ダブルクリックする）ことによって、データに応じて適宜定義されたアプリケーションを呼び出し、処理を開始する。アプリケーションのメニュー、ボタン上では、そのコマンドを開始する。データ上では、データにおける操作の位置を指示する。
第2ボタンは、通常、どの場合でも、アプリケーションによって定義されたコンテキストメニューを出力する。このメニューを第一ボタンによって指示することで、そのコマンドを実行することができる。第3ボタンは、X Window Systemではよく使われる。
また、最近は第4ボタン、第5ボタンを装備したマウスや、第3ボタンがウィンドウに直接機能するホイール機能を兼ねているものがあり、適宜、アプリケーション又はOSによって定義された機能を提供する。
GUIとキーボード
GUIにおいても、キャラクタユーザインタフェースに劣らず、キーボードは重要なデバイスである。データの内容だけでなく、キーボードショートカットといった、インタフェース操作を向上させる機能と連動させることで、操作性の向上をはかることもある。
GUIと各種デバイス
上記にあげたデバイス以外にも、タブレットなどのペンデバイスによる操作もあり、特に画像データ操作や手書き入力において威力を発揮する。
タッチパネルによるGUI
タッチパネルに表示されたボタンやアイコンに直接指やペンで触れることで、各種の操作を行うデバイスもあり、ATMなどで一般化している。カーナビゲーションシステムやニンテンドーDSでも使われ、直感的な操作に優れる。2007年以降、パッドに接触する指の本数を認識し、その振る舞いを変えるマルチタッチ対応パネルを利用した機器が市場に出回るようになった。
実装
GUIは様々な方法・ライブラリを用いて生成される。ユーザーへ提示される視覚的要素はしばしばViewと呼ばれ、ユーザーからの入力を扱う内部要素はしばしばControllerと呼ばれる。
宣言的UI
宣言的UIは宣言型プログラミングを用いて構成されたGUI、それを実現する手法である。GUIの生成・更新を変更前状態に基づいた更新命令によってコーディングするのではなく、あるべき状態を宣言してコーディングする。状態を分離することでUIの状態をより予測しやすいものにできる。テンプレートエンジンは静的テンプレートと動的変数の関係を宣言しているとみなせるため、更新された状態とテンプレートからテンプレートエンジンによってUI生成をおこなってUIを更新する形は宣言的UIといえる。そういった意味でも宣言的UI自体は古くから存在するGUI実装手法の1つである。
2010年代中盤におけるWebアプリケーションの分野を皮切りに、様々なデバイスで宣言的UIを標榜するUIフレームワークが登場している。
データバインディング
データ（モデル）とUI（View）を結びつけ、片方の変更を暗示的に他方へ伝播する手法をデータバインディングという。宣言的UIと組み合わせることで、モデルの変更が自動的に宣言的UIの更新へと暗示的に反映されるようになる。
脚注
注釈
出典
- ^ “GUI”. IT用語辞典バイナリ. 2020年7月11日閲覧。
- ^ エンゲルバートによる1968年のプレゼンテーションの一部。レポートや論文をどのようにして共同作成・編集・完成・閲覧・出力させるかのデモ。[リンク切れ]
- ^ THE EARLY HISTORY OF SMALLTALK, Alan C.Kay
- ^ 宣言的な View React 2019-11-08閲覧
- ^ シンプルで宣言的なテンプレートを使用して素早く機能を構築します Angular 2019-11-08閲覧
- ^ Vue.js のコアは、単純なテンプレート構文を使って宣言的にデータを DOM に描画することを可能にするシステムです Vue.js - はじめに - 宣言的レンダリング
- ^ 宣言型シンタックス. SwiftUIは宣言型シンタックスを使用しているため、ユーザーインターフェイスの動作をシンプルに記述することができます。 SwiftUI
- ^ React components wrap existing native code and interact with native APIs via React’s declarative UI paradigm and JavaScript. React Native
- ^ declarative style used by Flutter Flutter - Introduction to Declarative UI
関連項目
- WYSIWYG（ウィジウィグ・ウィズウィグ）
- ウィジェット
- CUI（キャラクターユーザーインタフェース）
- テキストボックス
- コマンドボタン（GUI）
- ラジオボタン
- チェックボックス
- スピンボタン
- プルダウンメニュー
- ポップアップメニュー
- オンラインヘルプ
- サムネイル
- ユーザインタフェース設計
- ズーミングユーザインタフェース
外部リンク
| 典拠管理データベース: 国立図書館 |
|---|
