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

6.3.4.7.1. 実装方法¶

• window.alert() にあたる警告ダイアログは、 クライアントサイド JavaScript の imuiAlert を使用します。
• window.confirm() にあたる確認ダイアログは、 クライアントサイド JavaScript の imuiConfirm を使用します。
• その他は、 クライアントサイド JavaScript の imuiMessageDialog を使用します。

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コンポーネント名	メッセージ例
	imuiAlert	「削除対象のＸＸＸを選択してください。」
	imuiConfirm	「登録します。よろしいですか。」

コラム

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

• imuiAlert
• imuiConfirm

• messageDialog の場合

アイコンは、CSS Sprite の class を指定します。

アイコンとメッセージの関連付けは、以下で統一します。

表示アイコン	意味	メッセージ例
	処理を続行できない失敗、エラーなど	「処理に失敗しました。」「登録できませんでした。」
	ユーザ操作により処理を続行できる警告など	「削除対象のＸＸＸを選択してください。」
	正常、成功など、処理が正常に終了	「処理に成功しました。」「登録しました。」
	確認など、ユーザ操作の続行を確認	「登録します。よろしいですか。」

• 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名
	im-ui-icon-common-24-error
	im-ui-icon-common-24-warning
	im-ui-icon-common-24-confirmation
	im-ui-icon-common-24-question

コラム

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

6.3.4.7.6. メッセージルール¶

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