モーダル‐ウインドー【modal window】
モーダルウィンドウ
モーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことである。
モーダルウィンドウが表示されると、その中で指定された操作を完了するかキャンセルするかして、そのウィンドウを閉じない限り、親ウィンドウ側に対する操作ができないようになる。このため、モーダルウィンドウはユーザーに特定の操作をさせたり、確認を促したりといった目的で用いられることが多い。
モーダルウィンドウのうち、Windowsなどおけるダイアログボックスがモーダルウィンドウになっているものを、特に「モーダルダイアログ」と呼ぶ。
最近では、Webユーザインターフェースにおいてモーダルウィンドウを実現する例も多数登場している。「LightBox」や「ThickBox」のように、JavaScriptのライブラリとして公開されている場合も多い。
| Webデザイン： | KISS クリッカブルマップ グローバルナビゲーション モーダルウィンドウ リキッドレイアウト 白抜き文字 Twitterライク |
モーダルウィンドウ
 |
モーダルウィンドウ（英: modal window）は、コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの。モーダルウィンドウはGUIシステムで、ユーザーに注意を促したり、選択肢を提示したり、緊急の状態を知らせたりする目的でよく使われる。モーダルダイアログやポップアップと呼ばれることもある[1][2]。
"modal"とは「モードを持つ」という意味であり、モーダルウィンドウが表示されている間はアプリケーションの状態が「ユーザーの応答待ちモード」になっている。対義語は"non-modal"（非モーダル）あるいは"modeless"（モードレス）である[3][4][5]。
ユースケース
 | この節には独自研究が含まれているおそれがあります。 |
モーダルウィンドウは以下のような状況でよく使われる。
- 特に重要な情報への注意を喚起する。
- 必要な入力がなされるまで、アプリケーションの実行をブロックする。
- この特性により、モーダルウィンドウ上の対話結果に応じてその後に実行する処理を分岐することが容易となる。
- アプリケーションの設定オプションを1つのダイアログに集約する。
- これから実行しようとしている操作は取り消すことができないことを警告する。ファイルの置換（上書き）や削除の際によく見られる。
- しかし、その意図する「間違った操作を防ぐ」という効果については疑問視する意見もあり、アンドゥ操作ができるときは警告を出すべきではない、と述べる者もいる[9]。
内部的な仕組み
モーダルウィンドウを表示すると、そのウィンドウが閉じられるまで呼び出し元に制御は返ってこない。しかしモーダルウィンドウを表示している間もイベントループ（メッセージループ）は回り続けるため、GUIがフリーズしてしまうことはない。モーダルウィンドウ表示中は通常のイベントループとは異なるモーダルループが回り、親のウィンドウに配送されるイベントが制限される。
類似要素
Microsoft Windows では、Mac OS や X Window System ベースのUNIX系システムよりもモーダルウィンドウがよく使われる[要出典]。Windows でモーダルウィンドウが使われるような状況で、それ以外の環境ではトランジェントウィンドウ (transient window) が使われる。トランジェントウィンドウはモーダルウィンドウと似たような振る舞いをし、常に親ウィンドウの前面に表示され、ウィンドウリストには出現しないが、同じアプリケーションの他のウィンドウの使用を妨げない。
利点と問題点
モーダルウィンドウは、クローズされるまでそのプログラムの他のワークフロー全体をブロックする。ユーザーはモーダルウィンドウが注意を喚起していることに気づかない場合もあり、主ウィンドウが反応しなくなったことで困惑したり、入力すべきデータが判らなくなったりするといった問題も発生する。モードの明確化という点に関しては、ダイアログ表示中に背景となる主ウィンドウの明るさを下げてコントラストをつけることで配慮している例もある（WindowsランタイムのWindows.UI.Popups.MessageDialogや、Androidのandroid.app.AlertDialogなど）。
モーダルウィンドウに対する意見は、初期のマンマシンインタフェースにおける基本原則を想起させる。例えば、マイクロソフトは Windows 95 でウィザードを多用した[10]。
今[いつ?]もモーダルウィンドウは多くのGUIツールキットの主要部品の1つであり、よく使われる。多数のモードのないダイアログが表示されるとユーザーが混乱すると考えられているためであり、モーダルウィンドウを擁護する立場からは、ある時間内にユーザーが入力しなければならない情報の量を制限することができるという意見もある[3]。また、モーダルウィンドウとの対話中はユーザーによって親ウィンドウを操作されることがないため、ワークフローの管理や画面遷移の実装の容易さの観点からも有用である。
一方で、そのような意見に対して、ユーザーにフラストレーションを与えてまで制限を加えるのは誤りだと指摘しているユーザインタフェースの専門家もいる[11]。ユーザーは1度に1つの入力しかできず、モーダルであろうとなかろうとユーザーは常に注意していなければならない。たとえ複雑な情報であっても、それがうまく構造化された論理的設計で表現されていれば、ユーザーはそれを処理できる[要説明]。この指摘はシングルスレッドやシングルプロセスにおける文脈であれば通用するかもしれないが、リアクティブプログラミングによる1対多の同時操作や、マルチスレッド、アドオンなどにおけるプロセスがアクセスを禁じたいウィジェットにアクセスできるのが当たり前になりつつあるリアルタイム・並行実行全盛期となった（少なくとも）2020年代では無意味な指摘である。[独自研究?]
Webブラウザで使用されるJavaScriptには、ダイアログを表示するためのウィンドウオブジェクトに対するメソッドとしてalert(), confirm(), prompt()が用意されているが、これらは歴史的な経緯からモーダルダイアログとなっている。ダイアログに対してユーザーの応答がなされるまで、表示元のWebページを操作することができなくなる。しかし、これらの機能はブラウジングを妨げ、ユーザーに危害を及ぼすために悪用されることが多い（フェイクアラート[12]）。また、タブブラウザであってもタブごとではなくアプリのウィンドウに対してモーダルとなる実装が以前は多かったため、ダイアログを表示しているタブが1つでもある場合は他のタブに切り替えることができず、例えば悪意のあるWebサイトを閲覧したときにモーダルダイアログが表示されると、そのタブのみを閉じるという操作ができなくなってしまっていた。そのため、Google Chromeでは2017年以降、タブを切り替えたときにダイアログが自動的に閉じられる動作となった[13]。FirefoxやSafariなど、他のブラウザではタブごとにダイアログが表示されるようになり、同様にタブの切り替えを阻害しない仕様となった[14]。
脚注
- ^ モーダルダイアログとは｜モーダルウィンドウ｜modal dialog ： 意味/定義 - IT用語辞典
- ^ ポップアップとは｜pop-up ： 意味/定義 - IT用語辞典
- ^ a b モーダルと非モーダルダイアログ： 用いるべき場合とそうでない場合 – U-Site
- ^ Using Dialog Boxes - Win32 apps | Microsoft Docs
- ^ Modal and Modeless Dialog Boxes | Microsoft Docs
- ^ Joel Spolsky, User Interface Design for Programmers: Designing for People Who Have Better Things To Do With Their Lives
- ^ Raymond Chen, The Old New Thing: The default answer to every dialog box is "Cancel"
- ^ Jeff Atwood, Coding Horror: Teaching Users to Read
- ^ Aza Raskin (2007年7月21日). “Never Use a Warning When you Mean Undo”. A List Apart. 2024年2月27日閲覧。
- ^ David A. Karp, HELP WITH WINDOWS 98
- ^ Cooper, Alan (2003年3月17日). About Face 2.0: The Essentials of Interaction Design. Wiley. ISBN 0764526413
- ^ 本物のウイルス警告だと判断できる？把握しておくべき正常な警告とは | サイバーセキュリティ情報局
- ^ Chromium policy on JavaScript dialogs | Blog | Chrome for Developers
- ^ What's New in Safari - Safari 9.1 | Apple Developer Documentation Archive
例
 | この節に雑多な内容が羅列されています。 |
 | ウィキペディアはオンライン百科事典であって、情報を無差別に収集する場ではありません。 |
- ThickBox - jQuery 上に構築された JavaScript のモーダルウィンドウ
- TinyBox - Prototype 上に構築された JavaScript のモーダルウィンドウ
- subModal - DHTMLのモーダルダイアログ
- Control.Modal by Live Pipe
- MOOdalBox - mootools 上のモーダルボックス
- Lightbox JS by Lokesh Dhakar
- GreyBox by Amir Salihefendic
関連項目
「Modal window」の例文・使い方・用例・文例
- Modal windowのページへのリンク
