【Unity】エンジニアも知っておくべき「ダイアログ」と「モーダル」の違い

エンジニアも知っておくべき「ダイアログ」と「モーダル」の違いについてまとめます。
(特にUnityに限った話でもないですが、Unityのライブラリの話もするのでタイトルにはUnityとつけておきます)

はじめに

先日社内のエンジニアと、「ダイアログ」と「モーダル」の違いについて話をしました。

ダイアログとモーダルはそれぞれ別の概念なので、混同して使うべきではありません。
しかしながら、意外と曖昧なまま使っている人もいるかもしれないので、簡単に記事に残しておきます。

ダイアログとは

まずダイアログとは、ユーザに何かしらの入力をしてもらうためのGUIのことを指します。
より正確には「ダイアログボックス」という名称が正しそうです。
「ダイアログ」は「対話」という意味なので、ユーザと対話するためのGUI=ダイアログボックスとなります。

UnityエディタではEditorUtility.DisplayDialogにより汎用ダイアログを開くことができますが、こういうのがダイアログです。

ダイアログ
https://docs.unity3d.com/ScriptReference/EditorUtility.DisplayDialog.html から引用

ユーザに質問をし、Do Not PlaceかPlaceを選ばせることで対話を実現していることがわかります。

モーダルとは

これに対してモーダルは「今の画面のインタラクションをブロックしつつ、覆い被さるように出てくるGUI(あるいはそうなっている状態)」のことを指します。

モーダルとはそもそも「モードを持つ」という意味です(本来は形容詞)。
これを踏まえると、モーダルは「ユーザが応答をしないと元の画面に戻れないモード」に遷移するためのGUIであるといえます。

上記の定義から、ダイアログとの関係としては、インタラクションをブロックするようなダイアログはモーダルダイアログであるという整理になります。
逆にインタラクションをブロックしないダイアログはモーダルではありません(モードレスダイアログ)。

僕がOSSとリリースしているUnity Screen Navigatorでは、ある画面に覆い被さるような遷移をする画面をModalと命名しています。
これは上記の定義に基づく命名です(実際にはオプションで非モーダルも作れるようにしてますが)。

モーダル

github.com

ModalなGUIを実装するための機能なので、ダイアログボックスも作れるし、次節のSheetsような他のモーダルなGUIについても作れるように設計しています。
逆にいうとUnity Screen Navigatorはあくまで画面遷移を責務としたライブラリなので、これ以上踏み込んでダイアログなどを実装するべきではないのです。
もし踏み込むとなんでもかんでもやるライブラリになってしまいます。

Appleの開発者ドキュメントに学ぶ

さてこのようなUIに関する概念を学ぶ上で、Appleの開発者ドキュメントはとても勉強になります。

例えば以下のページには、Modality、つまりモーダルなGUIの設計手法に関する概念の説明とモーダルにするべき箇所、ベストプラクティスなどが書かれています。

developer.apple.com

また下部の関連ページにはModalityに関連する具体的なGUIに関するページがリンクされています。
例えば、SNSに何かをシェアする時などによく出てくるSheetsというGUIのページにリンクされています。
これもインタラクションをブロックしつつ覆うように出てくるのでモーダルなGUIです。

Sheets
https://developer.apple.com/design/human-interface-guidelines/sheets から引用

このページを見ると実際に、冒頭からa sheet is modalと明確に書かれています。

By default, a sheet is modal, presenting a focused experience that prevents people from interacting with the parent view until they dismiss the sheet (for more on modal presentation, see Modality).

ちなみに僕がOSSとしてリリースしているUnity Debug SheetのSheetはこのSheetsのことを指しています。

github.com

以下はUnity Debug Sheetの画面です。
「モバイルアプリ開発において使いやすいデバッグメニュー」というコンセプトを実現するために、モバイルのUI設計の文脈に沿わせてSheetという概念を採用しています。

Unity Debug Sheet

モバイルのUI設計を洗練させてきた先人たちは本当に偉大です。
僕は自身でUIを考える前にまず彼らに学ぶように心がけています。

ダイアログをModalと命名するのは間違いか?

さて実際には、ダイアログボックスを制御するためのクラスにXxxModalという命名がされている事例をみかけます。

上述の通り、ダイアログもモーダルではあるので、これに関しては一概に間違っているとは言えません。
ダイアログボックスのことをモーダルウィンドウと呼ぶ環境では、その略語としてModalという用語が使われていることも考えられます。

命名はできる限り標準的な概念に従うべきですが、プロジェクトが(将来増えるであろう未だ見ぬ人員も含めて)混乱しない状態が作れるのであれば、究極OKだと思います。
たとえば、モーダル表示される箇所がダイアログボックスしかないようなシンプルなアプリであれば混乱はしないと思います。

ちなみにこんなことを言いながらUnity Screen NavigatorのデモシーンでもModalという命名をしていたりします。
これはUnity Screen NavigatorのModal機能のデモだとわかりやすくするための命名ではありますが、実際のアプリに取り入れるときにはちゃんと命名を考えた方がいいです。

参考

kotobank.jp

ja.wikipedia.org

github.com

github.com