アナウンス機能の改善
アナウンス機能は、標準ではスタイルが何も当たらず、表示場所も細かく選べません。このページでは、分類とサーバスクリプトで「通常・情報・成功・注意・警告」の見た目を自動で付ける方法と、マニュアルに記載のない表示制御を紹介します。
種類別のスタイルを付ける
アナウンスとして表示されるのはレコードの「内容（Body）」です。スタイルを当てるには Body の中身をクラス付きの div などで囲む必要がありますが、毎回 HTML を書くのは不便です。そこで、分類 A で種類を選び、説明 A に本文を書くと、サーバスクリプトが Body を自動で組み立てるようにします。
図を読み込み中…
1. 項目を追加する
マニュアルに従ってアナウンス用の期限付きテーブルを作り、分類 A と説明 A を追加します。分類 A には次の選択肢を設定し、announce-default を既定値にして必須項目にします。
announce-default,通常
announce-info,情報
announce-success,成功
announce-warning,注意
announce-error,警告2. サーバスクリプトを登録する
条件「作成前」「更新前」で登録します。
model.Body = '<div class="' + model.ClassA + '">' + model.DescriptionA + '</div>';3. 拡張スタイルを置く
拡張スタイルとして登録します。Ver. 1.4.16.0 で内部の CSS が整理され配色が変わったため、それに合わせた版を載せます（本体の site.css の該当箇所を基にしています）。
[class^="announce-"] {
display: block;
padding: 5px;
min-height: 32px;
border-bottom: 1px solid var(--base-border);
}
.announce-default {
color: black;
background-color: white;
}
.announce-info {
color: white;
background-color: blue;
}
.announce-success {
color: white;
background-color: rgba(0, 128, 0, 0.9);
}
.announce-warning {
color: black;
background-color: yellow;
}
.announce-error {
color: white;
background-color: rgba(255, 0, 0, 0.9);
}1.4.16.0 より前の版からの主な変更点は次のとおりです。
- 色指定を HEX コードから色名に変更し、
successとerrorには透過率を設定 - 角丸（
border-radius: 20px）と上マージン、各種類の枠線をやめ、下線（border-bottom: 1px solid var(--base-border)）に変更 display: blockとmin-height: 32pxを追加
1.4.16.0 より前のスタイル
メッセージ表示の CSS を基にした初版です。1.4.16.0 以降ではデザインが浮いてしまうため、上の版を使ってください。
[class^="announce-"] {
margin-top: 4px;
padding: 5px;
border-radius: 20px;
}
.announce-default {
color: #000;
background-color: #fff;
border: solid 1px #000;
}
.announce-info {
color: #fff;
background-color: #00f;
border: solid 1px #00f;
}
.announce-success {
color: #fff;
background-color: #008000;
border: solid 1px #008000;
}
.announce-warning {
color: #000;
background-color: #ff0;
border: solid 1px #ff0;
}
.announce-error {
color: #000;
background-color: #f00;
border: solid 1px #f00;
}
表示場所を制御する（チェック項目）
マニュアルに記載されている表示制御は次の 2 つです。
| 項目 | 挙動 |
|---|---|
状況（Status） | 完了（General.json の CompletionCode、既定 900）以上なら非表示 |
開始〜完了（StartTime - CompletionTime） | 期間中のみ表示 |
取得条件は Status < CompletionCode・StartTime <= 現在日時・CompletionTime >= 現在日時 です（HtmlHeaders.cs#L73-L80）。
これに加えて、チェック項目でも表示場所を制御できます。いずれもチェックが ON のときの挙動です。
| 項目 | チェック ON のときの挙動 |
|---|---|
チェック A（CheckA） | ログイン画面とトップ画面以外では表示しない |
チェック B（CheckB） | ログイン画面に表示しない |
チェック C（CheckC） | トップ画面に表示しない |
判定は IsHiddenAnnouncement で行われ、「ログイン画面」は users/login、「トップ画面」は items コントローラで ID が 0 の画面です（HtmlHeaders.cs#L103-L122）。フォーム画面ではアナウンス自体が表示されません。
確認したソースでは、さらにチェック D（CheckD）が ON のアナウンスを利用者が閉じられるようになっています。閉じるとセッションに記録され、そのセッションの間は表示されません（UserUtilities.cs#L5323-L5360）。ただし本体は閉じるボタンを出力しないため、Body に data-id 属性（レコード ID）を持つ要素を置き、クリック時に $p.closeAnnouncement($(this)) を呼ぶ必要があります（announcement.js）。