intra-mart Accel Platform UIデザインガイドライン(PC版) 第6版 2022-12-01

6.3.4.7. アラートとコンファーム

本章は、アラートとコンファームについて説明します。

  • コンファームの画面例
imuiConfirm

注意

intra-mart Accel Platform ではデザイン統一のために基本的に window.alert と window.confirm を利用しません。

6.3.4.7.1. 実装方法

6.3.4.7.2. imuiAlert 、 imuiConfirm と messageDialog の違い

imuiAlert 、 imuiConfirm と messageDialog の違いは、以下の通りです。

UIコンポーネント名 imuiAlert imuiConfirm messageDialog
アイコンの変更 不可 不可 可能
ボタンのラベル変更 不可 不可 可能
ボタンの数変更 不可 不可 可能
ボタンの数 一つ 二つ 任意
  • imuiAlert は、警告メッセージを表示したい時に使用します。
    「決定」ボタンを表示します。
  • imuiConfirm は、 確認メッセージを行いたい時に使用します。
    「決定」ボタンと「取り消し」ボタンを表示します。
  • messageDialog は、上記の UI コンポーネントで表現できないメッセージを表示する時に使用します。

6.3.4.7.3. ボタン配置

  • imuiAlert、imuiConfirm の場合
    ボタンの配置は変更できません。
  • messageDialog の場合
    決定」「取り消し」のボタンを配置します。
    ただし、画面の内容に対し、ボタン名が合わない場合は、「入力」「確定」「登録」など変更します。
    ボタン名は、機能内で統一します。

6.3.4.7.4. ダイアログのタイトル

「入力エラー」「登録確認」のように 体言止め で設定します。

6.3.4.7.5. 表示アイコン

  • imuiAlert、imuiConfirm の場合
    以下のアイコンが表示されます。変更はできません。
表示アイコン UIコンポーネント名 メッセージ例
warning imuiAlert 「削除対象のXXXを選択してください。」
question imuiConfirm 「登録します。よろしいですか。」

コラム

詳細は、 クライアントサイド JavaScript の以下を参照してください。


  • messageDialog の場合
アイコンは、CSS Sprite の class を指定します。
アイコンとメッセージの関連付けは、以下で統一します。
表示アイコン 意味 メッセージ例
error 処理を続行できない失敗、エラーなど 「処理に失敗しました。」「登録できませんでした。」
warning ユーザ操作により処理を続行できる警告など 「削除対象のXXXを選択してください。」
confirmation 正常、成功など、処理が正常に終了 「処理に成功しました。」「登録しました。」
question 確認など、ユーザ操作の続行を確認 「登録します。よろしいですか。」
  • CSS Sprite の 指定方法

span タグの class 属性に CSS Sprite の class 名を指定します。

<span class="CSS Spriteのclass名"></span>
intra-mart Accel Platform が提供するアイコンリストは、 CSS Sprite Image List の PC 向け を参照してください。
アイコンサイズは、16 、 24 、 32pxを用意しています。
画面によりサイズを選んでください。
メッセージ性を伝えるために、 32px 、または、 24px をおすすめします。
以下に 表示アイコンに対して、 該当の CSS Sprite の class 名( 24px )をまとめました。

表示アイコン CSS Sprite の class名
error im-ui-icon-common-24-error
warning im-ui-icon-common-24-warning
confirmation im-ui-icon-common-24-confirmation
question im-ui-icon-common-24-question

コラム

imuiMessageDialog の詳細は、 クライアントサイド JavaScriptimuiMessageDialog を参照してください。

6.3.4.7.6. メッセージルール

メッセージの文章は、敬体「です。」「ます。」で文章を記載します。