なにこれ？
みなさんはトーストって知っていますか？
初めは「何それ？おいしいの？」って思うほど何かわからなかったんですが、調べていくうちに、「ポップアップ」「ダイアログ」「モーダル」など、似たような意味を持つものがあることがわかりました。
この記事ではそれらを正確に区別し、トーストとは何なのかを紐解いていきます！
モーダル・ポップアップ・ダイアログの意味の違いを抑える
トーストとは何かを理解するために、まずはモーダル・ポップアップ・ダイアログの意味の違いを抑えましょう。
これら3種類は、こちらの記事がとてもわかりやすかったので参考に解説していきます。
モーダル・ポップアップ・ダイアログでは意味の焦点が変わる
「モーダル」「ポップアップ」「ダイアログ」の大きな違いは、意味の焦点が変わることです。
どれも結果的には同じ対象物を指して使うこともありますが、その場合も意味の焦点が変わってきます。
以下でそれぞれの違いを見ていきましょう。
モーダルとは
応答しない限り元の画面の操作に戻れないという「制御」にフォーカスした単語です。
「モーダル（modal）」は「モードレス（modeless）」と対になる言葉であり、それぞれ、「モードがある状態」と「モードが無い状態」を表します。
モードは、例えば「入力モード」「編集モード」などの例を思い浮かべていただければわかりやすいかと思いますが、何か特定のことをするための「形式・様式」のことです。
例として、下の画面を見てみましょう。
中央に表示されているウィンドウに対して、「投稿する」ボタンか「キャンセル」ボタンを押さない限り、元々見ていた画面をクリックしたりスクロールしたりできない状態です。
つまり、ユーザーの環境を「このウィンドウに応答するモード」に制御しています。このような仕様をモーダルと言います。
ポップアップとは
突然現れるという「表示の仕方」にフォーカスした単語です。
「ポップアップ（pop-up）」は、突然ポンッと現れるという表示の仕方に重点を置いた単語です。英単語のpop upに「突然起こる、突然現われる」という意味があります。
なので、ポップアップは言葉の意味通り、画面に突然現れるウィンドウを全てポップアップと呼ぶことができます。
ダイアログとは
ユーザーに情報を伝えて、それに対して応答を得るという「やりとり」にフォーカスした単語です。
「ダイアログ（dialog）」は「対話」という意味を持つ英単語のdialogから来ています。
つまり、「ユーザーに何かを伝えて、それに応答してもらう」という流れを「対話」になぞらえた、「やりとり」にフォーカスした言葉です。
典型的な利用シーンとしては、ユーザーに何かを案内・警告したり、了解を得たり、入力を求めたりすることが挙げられます。
モーダルの解説で例に出した画面も、ユーザーに何かを案内して応答を得るという側面に注目すれば、定義的にはダイアログと言うこともできます。
まとめ
| 単語 | 意味 |
|---|---|
| モーダル | 応答しない限り元の画面の操作に戻れないという「制御」にフォーカスした単語 |
| ポップアップ | 突然現れるという「表示の仕方」にフォーカスした単語 |
| ダイアログ | ユーザーに情報を伝えて、それに対して応答を得るという「やりとり」にフォーカスした単語 |
トーストとは
トーストとは、別名としてトーストポップアップとも呼ばれることからもわかるように、ポップアップの一種または同じものとみなされています。
「トースト(toast)」はパンの「トースト」が由来して名付けられました。ウィンドウの下から出てくるポップアップが、まるでトースターから飛び出るトーストのようだという理由からトーストと名付けられました。
デスクトップでは、トーストは画面の端に小さく現れ、一定時間が過ぎると自動的に引っ込むようになっています。
アプリでも同様で、画面の下方に現れ、一定時間が過ぎると自動的に引っ込むようになっています。
Android12からトーストの表示が変更される
Androidに限った話ですが、Android12からトーストの表示が変わります。
主な変更点は以下のとおりです。
- テキストが2行までしか表示できない
- テキストの横にアプリアイコンが表示される。
（参考：https://developer.android.google.cn/about/versions/12/behavior-changes-12?hl=ja#toast-redesign）
終わりに
この記事ではトーストについての内容でしたが、何となくでもわかったでしょうか？(トースト以外の内容が半分になってしまいましたがw)
トーストやモーダルなど、似たようなものを区別して呼び分けられるようにしていきましょう！