(Translated by https://www.hiragana.jp/)
グラフィカルユーザインタフェース - Wikipedia コンテンツにスキップ

グラフィカルユーザインタフェース

出典しゅってん: フリー百科ひゃっか事典じてん『ウィキペディア(Wikipedia)』
GUIから転送てんそう
GUIを提供ていきょうするソフトウェアの1つ、GNOME

グラフィカルユーザインタフェースえい: graphical user interface略称りゃくしょうGUI(ジーユーアイ、グイ、グーイ[1]))は、コンピュータグラフィックスポインティングデバイスなどをもちいる、グラフィカル(ビジュアル)であることを特徴とくちょうとするユーザインタフェースキャラクタユーザインタフェース (CUI) やテキストユーザインタフェース (TUI) と対比たいひしてかたられることがおおい。

歴史れきし

[編集へんしゅう]
SAGE制御せいぎょしつ。スクリーンにはアメリカ東海岸ひがしかいがん表示ひょうじされている。ふたつのターゲットが追跡ついせきされているところ

世界せかいはつ実用じつようとなったGUIは1963ねん完成かんせいしたSAGEというアメリカ空軍くうぐん開発かいはつした防空ぼうくう管制かんせいシステムである。これはCRTライトガンそなえており、かくばくだん搭載とうさいしたてき航空機こうくうき迎撃げいげきするために多数たすうのレーダーからの情報じょうほう統合とうごうし、複数ふくすうのオペレーターがライトガンで迎撃げいげき目標もくひょう指示しじするだけでぜんぐん適切てきせつ箇所かしょ自動じどう指令しれいとどき、その結果けっかレーダー情報じょうほう膨大ぼうだいさをにすることなく的確てきかくてき迎撃げいげきできるというものであった。

また、オシロスコープはテレビやディスプレイとおな原理げんり使つかった装置そうちだが、コンピュータの内部ないぶ信号しんごう直接ちょくせつ観察かんさつできる装置そうちとしても都合つごういため、初期しょきのコンピュータではしばしばそのような目的もくてきブラウン管ぶらうんかん情報じょうほう出力しゅつりょくのためにそなえられていた。これはGUIとしてあつかうには機能きのうてきにはりないものだが、最初さいしょのコンピュータの1であるEDSACにもいており、OXOというゲームに使つかわれている。実用じつよう目的もくてき情報じょうほう表示ひょうじブラウン管ぶらうんかん使つかわれたれいとしてはMARS-1(1960ねん日本にっぽん国有こくゆう鉄道てつどう)がある。

1960年代ねんだい米国べいこくにおいて、サザランドSketchpadや、1960年代ねんだい後半こうはんマウス発明はつめいしゃでもあるダグラス・エンゲルバートひきいるスタンフォード研究所けんきゅうじょ研究けんきゅうしゃは、当時とうじあたらしいデバイスであるマウスで操作そうさされるテキストベースのハイパーリンクを使用しようするオンラインシステムNLS開発かいはつした(軍用ぐんようなどの専用せんよう目的もくてきではなく、汎用はんよう意図いとした)。 1968ねん12月のNLSのデモンストレーションは、「すべてのデモのはは」としてられるようになった。NLSはエンゲルバートの提唱ていしょうする「人間にんげん知性ちせい拡大かくだい」という概念がいねん実現じつげんするためにつくられており、ハイパーテキストハイパーリンクマルチウインドウなどの今日きょうてきなGUIには必須ひっす概念がいねん実装じっそうしてせたきわめて革新かくしんてきなものである。またジャーナルばれるハイパーテキストベースの文書ぶんしょ共有きょうゆうシステムはまさにWikiとおな概念がいねんである文書ぶんしょによるコラボレーション・グループウェアを実装じっそうしたものである。NLSの本質ほんしつたんなるGUIの実装じっそうではなく、GUIは会話かいわ画像がぞう文書ぶんしょをリアルタイムで共有きょうゆうする電子でんし会議かいぎつうじた知的ちてき共有きょうゆうグループウェアを実現じつげんするための手段しゅだんであった。さらに、のちWYSIWYGばれることになる機能きのうもこのときすで実装じっそうされていた[2]

AltoやNoteTakerで動作どうさした暫定ざんていDynabook環境かんきょう(Smalltalk-76、どう-78のころ)のGUI

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 Window System ではルートウィンドウとう。「デスクトップ環境かんきょう」のこと。このうえにウィンドウをかさねることによってインタフェースはマルチタスク実現じつげんする。一般いっぱんてきなインタフェースでは、ここにアプリケーションやデータのアイコンをおき、ここから作業さぎょう開始かいしできるようにする。この画面がめんは、既存きそんのディレクトリ構成こうせいとは相容あいいれない立場たちばのため、特殊とくしゅ位置いちにおかれるディレクトリを参照さんしょうするかたちでデータの内容ないよう定義ていぎする。
デスクトップの背景はいけい画像がぞう各種かくしゅアクセサリをいて、視覚しかくてきたのしませる機能きのう提供ていきょうされる。また、アプリケーションの役割やくわりたすActive Desktopやガジェットなど(ウィジェットエンジン)をくこともできる。
最近さいきんでは、仮想かそうデスクトップをキューブで表示ひょうじする、アイコンの配置はいち立体りったいかんける、ウィンドウを立体りったいてき表示ひょうじなど、3D効果こうかによって操作性そうさせいわる向上こうじょうするデスクトップ環境かんきょうえている。UnixけいウィンドウマネージャCompizWindows VistaAeroサン・マイクロシステムズProject Looking Glassなどがれいげられる。
ウィンドウ
アプリケーションがデータをあつかうためのグラフィカルインタフェースにおけるひとつの単位たんいとなるもの。ウィンドウないにおいては、アプリケーションとデータは一体化いったいかする。ここにおいて、アプリケーションを操作そうさし、データを管理かんり生成せいせい編集へんしゅうする。通常つうじょうはメニュー、アイコンなどを周辺しゅうへん配置はいちし、中央ちゅうおうにデータをおく。
ウィンドウには、データやアプリケーションにおうじてタイトルがけられ、ウィンドウのさい上部じょうぶにタイトルがおかれる。一般いっぱんてきには、ウィンドウをディスプレイ全体ぜんたい表示ひょうじする「最大さいだい」、表示ひょうじかくす「最小さいしょう」、ふくすうまいのウィンドウの最前さいぜんめん、タイトルだけを表示ひょうじする「シェード」などがサポートされ、これにより、ウィンドウの操作そうさ簡単かんたんおこなうことが出来できる。
Single Document Interface (SDI)
ウィンドウにおいて、ひとつのデータをひとつのウィンドウない完結かんけつさせる方式ほうしき。この場合ばあいは、データのかずだけ、ウィンドウが出力しゅつりょくされる。のアプリケーションのウィンドウとわせて利用りようできるが、そのぶんだけ、ウィンドウのかずおおくなり、管理かんり繁雑はんざつになる。
Multiple Document Interface (MDI)
ひとつのウィンドウないじょうにウィンドウが表示ひょうじされ、複数ふくすうのデータ管理かんりおこな方式ほうしき。この場合ばあいは、ウィンドウ管理かんり簡単かんたんになるが、作業さぎょう管理かんりじゅうになる。
タブ
MDIにおけるデータ管理かんり方式ほうしきのうち、データのタイトルをウィンドウないならべ、タイトルをえらんで必要ひつようなデータだけを表示ひょうじするもの。これにより、簡単かんたんにデータにアクセスできるようになる。
メニュー
アプリケーション、オペレーティングシステム (OS)より指示しじできるコマンドを階層かいそうじょう表現ひょうげんしたもの。画面がめん上部じょうぶ、または画面がめん下部かぶにおかれ、そのアプリケーションから利用りようできるコマンドがほぼすべ配置はいちされる。通常つうじょうひだり重要じゅうようたかいものがおかれ、みぎにいくにしたがって重要じゅうようひくくなる。コマンドの階層かいそうはアプリケーションによりことなるが、ファイル操作そうさ編集へんしゅう機能きのう重視じゅうしして、それらのコマンドから左側ひだりがわからおかれ、みぎには、ヘルプなどがおかれる。マウスのだいいちボタンによって操作そうさする。
コンテキストメニュー
アプリケーションの用意よういした階層かいそうじょうのメニューとはべつに、メニュー以外いがいのところでマウスのだいボタンなどをしたさい機能きのうするメニューのこと。ボタンがされた位置いちおうじてメニューの内容ないよう変化へんかし、編集へんしゅう操作そうさ簡単かんたんおこなうことが出来できるようになっている。
アイコン
データ管理かんりアプリケーションにおいて、データ、アプリケーション、ディレクトリなど表現ひょうげんしたもの。
データ管理かんりアプリケーション、すなわち、ディレクトリにおけるユーザーデータの管理かんりや、特定とくていのデータを管理かんりおこなうアプリケーションの場合ばあい、アイコンによりデータを表現ひょうげんする。通常つうじょうは、データの中身なかみや、拡張子かくちょうしなどから関連かんれんづけられたアプリケーションを表現ひょうげんするが、ユーザーが自由じゆう変更へんこうする場合ばあいもある。
データのアイコンはひらくことにより、関連かんれんづけられたアプリケーションの起動きどうからサポートしてくれる。アプリケーションアイコンは、アプリケーションの起動きどうだけをおこなう。
ボタン
メニューのうち、利用りよう頻度ひんどたかいコマンドを表現ひょうげんし、アプリケーションない配置はいちしたもの。
アプリケーションじょうにおかれるボタンは、普通ふつうはメニューのわりをする。利用りよう頻度ひんどたかいものからおかれ、メニューの階層かいそう辿たどらなくてもその機能きのう使つかえるようになっている。ただし、ユーザーによりコマンドの利用りよう頻度ひんどことなるので、この配置はいち編集へんしゅうできるようになっているのが普通ふつうである。

その

[編集へんしゅう]
ごみばこ
ファイル消去しょうきょたいするフェイルセーフたすために、「ゴミ箱ごみばこ」などとばれる機能きのうつものがある。これは、ファイルの消去しょうきょおこなうさいに、一時いちじてきべつ場所ばしょうつすことで、あやまったファイル消去しょうきょ未然みぜんふせぐことが出来できる。Macintoshでは、ゴミ箱ごみばこはファイルだけでなく、さまざまなオブジェクトの削除さくじょ機能きのうっている。
アプリケーションランチャ
GUIじょうからアプリケーションをさい様々さまざま方式ほうしきがあるが、いくつかのOSではメニュー形式けいしきのアプリケーションランチャをっている。NEXTSTEPmacOSでは、ドックばれるパレットがた機構きこうち、ファイルやアプリケーションの各種かくしゅ情報じょうほう格納かくのうしてクリックでそれらをせる。

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の更新こうしんへと暗示あんじてき反映はんえいされるようになる。

脚注きゃくちゅう

[編集へんしゅう]

注釈ちゅうしゃく

[編集へんしゅう]

出典しゅってん

[編集へんしゅう]
  1. ^ GUI”. IT用語ようご辞典じてんバイナリ. 2020ねん7がつ11にち閲覧えつらん
  2. ^ エンゲルバートによる1968ねんのプレゼンテーションの一部いちぶ。レポートや論文ろんぶんをどのようにして共同きょうどう作成さくせい編集へんしゅう完成かんせい閲覧えつらん出力しゅつりょくさせるかのデモ。[リンク]
  3. ^ THE EARLY HISTORY OF SMALLTALK, Alan C.Kay
  4. ^ 宣言せんげんてきな View React 2019-11-08閲覧えつらん
  5. ^ シンプルで宣言せんげんてきなテンプレートを使用しようして素早すばや機能きのう構築こうちくします Angular 2019-11-08閲覧えつらん
  6. ^ Vue.js のコアは、単純たんじゅんなテンプレート構文こうぶん使つかって宣言せんげんてきにデータを DOM に描画びょうがすることを可能かのうにするシステムです Vue.js - はじめに - 宣言せんげんてきレンダリング
  7. ^ 宣言せんげんがたシンタックス. SwiftUIは宣言せんげんがたシンタックスを使用しようしているため、ユーザーインターフェイスの動作どうさをシンプルに記述きじゅつすることができます。 SwiftUI
  8. ^ React components wrap existing native code and interact with native APIs via React’s declarative UI paradigm and JavaScript. React Native
  9. ^ declarative style used by Flutter Flutter - Introduction to Declarative UI

関連かんれん項目こうもく

[編集へんしゅう]

外部がいぶリンク

[編集へんしゅう]