AdmonitionBlock

枠に囲まれた本文は電算化よりずっと早く、本や其の他の印刷物に使われていた。 殆ど常に此の様に重要な本文が強調されるが、備考や其の他の従的情報にもよく使われる。

ウェブサイト・アプリケーションの開発に於いては、本文が枠に囲まれる場合の種類も増え、頻度も高く成った。

• 印刷物の場合と同じ様に、枠はウェブサイトに於いては長文の中に需要な部分を強調される為に使われる。 訪問者に強調された本文の需要度を一瞬間に判断させるには、色使いの既読が活用。 例えば、需要な部分には暖色（赤、橙、黄色）が使われ、二次的な部分には寒色（青、緑）が、無彩色（黒・灰色の枠に囲まれ、背景は白か薄い灰色）が利用される。 色に加えて、アイコンが使われる事が多い。
• グラフィック・ユーザー・インターフェースに於いて、枠に囲まれた本文の役割が広がり、利用者達を通知する為の手段の中一つに成った。 常に数秒しか表示されていないポップアップメッセージと違って、枠に囲まれた本文がずっと表示される、但し利用者が意識的にメッセージを 非表示に出来る様にボタンが付いている事がある。 尚、通知自体と他に、利用者に反応する事を促している文と、反応行動為のボタンも追加する推薦。

枠に囲まれた本文を下記の場合に活用する推薦。

サーバーからデータ取得中エラーが発生した時

此の場合、データをもう一度取得する為のボタンを追加すると良い。

表示するデータが無い時

データが全く無い場合と、データは有るが検索結果は無い場合毎本文を用意した方が良い。 其れに依って、反応の提案も異なり、データが全く無い場合データを追加する事を提案し（其の為の権限が有ったら）、検索結果場合、絞り込み条件をリセットする ボタンを追加すると良い。

ウェブサイト・アプリケーションの利用に就いて短文の案内

新しいユーザー向けだけではなく、未だ多数であるコンピューターのリテラシーが低い利用者にとってとても重要なもの。

ユーザーに具体的な行動を促す時

例えば、貴方のウェブサイト又がアプリケーションに認証が任意な場合、アカウント登録する事を提案し、其れの利点を説明すると良い。 勿論、アカウント作成ページへのリンク用意し、登録済みの利用者達向けにログインページへのリンクを用意するべき。

逆に、下記の場合には枠に囲まれた本文は最良の選択肢ではない。

• データ送信中発生したエラーの通知
• データ送信成功に就いてエラーの通知
• サインイン・サインアウト通知

上記の場合だと、浮かぶメッセージ（YDFだと、Snackbarコンポーネント）の方が専用のものだ。

• 要約
• 利用
  • マークアップ
    • プロジェクトへの取り組み
    • Pug混入のAdmonitionBlock--YDF
      • 最低限の例（必須プロパティのみ）
      • 見出し (titleプロパティ)
      • SVGアイコン (SVG_Iconプロパティ)
        • カスタムなアイコン
      • ボタン
      • 無くし
  • ロジック

要約

Pugミクスイン

AdmonitionBlock--YDF

PugミクスインのLive template　(IntelliJ IDEAファミリー結合開発環境専用正式的プラグイン)

ab-ydf

スタイル生成専用Stylusミクスイン

provideAdmonitionBlockYDF_Component

用意済みのテーマ

AdmonitionBlock__YDF.Themes.regular

標準（規定）

用意済みの幾何学的変形

AdmonitionBlock__YDF.GeometricVariations.regular

標準（規定）

AdmonitionBlock__YDF.GeometricVariations.stickyNoteLike

付箋らしい

用意済みの修飾的変形

AdmonitionBlock__YDF.DecorativeVariations.notice

備考

AdmonitionBlock__YDF.DecorativeVariations.error

エラー・重要通知

AdmonitionBlock__YDF.DecorativeVariations.warning

警告

AdmonitionBlock__YDF.DecorativeVariations.success

成功した行動

AdmonitionBlock__YDF.DecorativeVariations.guidance

案内

AdmonitionBlock__YDF.DecorativeVariations.question

質問

ローディングプレースホルダ

無し

利用

マークアップ

プロジェクトへの取り組み

当GUIコンポーネントのマークアップは Pugミクスインの AdmonitionBlock--YDFに依り確保される。 取り組み方法は 通常 即ちComponents.pugと言うPugファイルの 含め 。 但し其の前Functionality.pugファイルも含めなければいけないが、ページのテンプレート の場合、Functionality.pugは含め済みで、 重複し含めてるとエラーが発生するのだ。

include ../../node_modules/@yamato-daiwa/frontend/Functionality.pug
include ../../node_modules/@yamato-daiwa/frontend/Components.pug