モーダルウィンドウ

出典: フリー百科事典『ウィキペディア(Wikipedia)』

モーダルウィンドウ: modal window)は、コンピュータアプリケーションソフトウェアユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの。モーダルウィンドウはGUIシステムで、ユーザーに注意を促したり、選択肢を提示したり、緊急の状態を知らせたりする目的でよく使われる。モーダルダイアログポップアップと呼ばれることもある[1][2]

"modal"とは「モードを持つ」という意味であり、モーダルウィンドウが表示されている間はアプリケーションの状態が「ユーザーの応答待ちモード」になっている。対義語は"non-modal"(非モーダル)あるいは"modeless"(モードレス)である[3][4][5]

ユースケース[編集]

モーダルウィンドウは以下のような状況でよく使われる。

  • 特に重要な情報への注意を喚起する。
この用法は効果的ではないという批判もある[6] [7] [8]
  • 必要な入力がなされるまで、アプリケーションの実行をブロックする。
この特性により、モーダルウィンドウ上の対話結果に応じてその後に実行する処理を分岐することが容易となる。
  • アプリケーションの設定オプションを1つのダイアログに集約する。
  • これから実行しようとしている操作は取り消すことができないことを警告する。ファイルの置換(上書き)や削除の際によく見られる。
しかし、その意図する「間違った操作を防ぐ」という効果については疑問視する意見もあり、アンドゥ操作ができるときは警告を出すべきではない、と述べる者もいる[9]

内部的な仕組み[編集]

モーダルウィンドウを表示すると、そのウィンドウが閉じられるまで呼び出し元に制御は返ってこない。しかしモーダルウィンドウを表示している間もイベントループ(メッセージループ)は回り続けるため、GUIがフリーズしてしまうことはない。モーダルウィンドウ表示中は通常のイベントループとは異なるモーダルループが回り、親のウィンドウに配送されるイベントが制限される。

類似要素[編集]

Microsoft Windows では、Mac OSX Window System ベースのUNIX系システムよりもモーダルウィンドウがよく使われる[要出典]。Windows でモーダルウィンドウが使われるような状況で、それ以外の環境ではトランジェントウィンドウ (transient window) が使われる。トランジェントウィンドウはモーダルウィンドウと似たような振る舞いをし、常に親ウィンドウの前面に表示され、ウィンドウリストには出現しないが、同じアプリケーションの他のウィンドウの使用を妨げない。

利点と問題点[編集]

モーダルウィンドウは、クローズされるまでそのプログラムの他のワークフロー全体をブロックする。ユーザーはモーダルウィンドウが注意を喚起していることに気づかない場合もあり、主ウィンドウが反応しなくなったことで困惑したり、入力すべきデータが判らなくなったりするといった問題も発生する。モードの明確化という点に関しては、ダイアログ表示中に背景となる主ウィンドウの明るさを下げてコントラストをつけることで配慮している例もある(WindowsランタイムWindows.UI.Popups.MessageDialogや、Androidandroid.app.AlertDialogなど)。

モーダルウィンドウに対する意見は、初期のマンマシンインタフェースにおける基本原則を想起させる。例えば、マイクロソフトWindows 95ウィザードを多用した[10]

[いつ?]もモーダルウィンドウは多くのGUIツールキットの主要部品の1つであり、よく使われる。多数のモードのないダイアログが表示されるとユーザーが混乱すると考えられているためであり、モーダルウィンドウを擁護する立場からは、ある時間内にユーザーが入力しなければならない情報の量を制限することができるという意見もある[3]。また、モーダルウィンドウとの対話中はユーザーによって親ウィンドウを操作されることがないため、ワークフローの管理や画面遷移の実装の容易さの観点からも有用である。

一方で、そのような意見に対して、ユーザーにフラストレーションを与えてまで制限を加えるのは誤りだと指摘しているユーザインタフェースの専門家もいる[11]。ユーザーは1度に1つの入力しかできず、モーダルだろうとなかろうとユーザーは常に注意していなければならない。たとえ複雑な情報であっても、それがうまく構造化された論理的設計で表現されていれば、ユーザーはそれを処理できる[要説明]

脚注[編集]

  1. ^ モーダルダイアログとは|モーダルウィンドウ|modal dialog : 意味/定義 - IT用語辞典
  2. ^ ポップアップとは|pop-up : 意味/定義 - IT用語辞典
  3. ^ a b モーダルと非モーダルダイアログ: 用いるべき場合とそうでない場合 – U-Site
  4. ^ Using Dialog Boxes - Win32 apps | Microsoft Docs
  5. ^ Modal and Modeless Dialog Boxes | Microsoft Docs
  6. ^ Joel Spolsky, User Interface Design for Programmers: Designing for People Who Have Better Things To Do With Their Lives
  7. ^ Raymond Chen, The Old New Thing: The default answer to every dialog box is "Cancel"
  8. ^ Jeff Atwood, Coding Horror: Teaching Users to Read
  9. ^ Aza Raskin, A List Apart: Never Use a Warning When you Mean Undo
  10. ^ David A. Karp, HELP WITH WINDOWS 98
  11. ^ Cooper, Alan (2003年3月17日). About Face 2.0: The Essentials of Interaction Design. Wiley. ISBN 0764526413 

[編集]

  • ThickBox - jQuery 上に構築された JavaScript のモーダルウィンドウ
  • TinyBox - Prototype 上に構築された JavaScript のモーダルウィンドウ
  • subModal - DHTMLのモーダルダイアログ
  • Control.Modal by Live Pipe
  • MOOdalBox - mootools 上のモーダルボックス
  • Lightbox JS by Lokesh Dhakar
  • GreyBox by Amir Salihefendic

関連項目[編集]