# 画面上部に緑のアラート（ノーティス）を表示するには

**URL:** <https://community.cybozu.dev/t/topic/2557>\
**Category:** kintone 開発相談\
**Created:** [2016 年 6 月 30 日午前 1:25 UTC](https://community.cybozu.dev/t/topic/2557 "2016-06-30T01:25:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2090](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@Legacy\_Account2090](https://community.cybozu.dev/u/Legacy_Account2090)\
**Post date:** [2016 年 6 月 30 日午前 1:25 UTC](https://community.cybozu.dev/t/topic/2557/1 "2016-06-30T01:25:30Z")

</div>

こんにちは。初質問の Toshi と申します。

kintoneを使っていると、下のスクリーンショットのように「緑のアラート（ノーティス : notice）」が表示されることがあります。

kintone APIを使った処理後に、「○○を実行しました」のような文面を、緑のアラートで表示させることはできないでしょうか。

もし表示させられるようなら、その表示時間を指定することはできますでしょうか。（標準では一瞬で消えるため、多くの場合何が書いてあるか理解できる前に消えています。3秒くらいは表示させられるといいのですが。）

[「レコードにエラーを表示する」](https://community.cybozu.dev/hc/ja/articles/201941964-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88#step9)にありますように、eventオブジェクトのerrorプロパティに「○○を実行しました」を値としてセットすれば、「赤いアラート」として表示させることはできます。しかし、これではエラーが発生したかのような印象となってしまいます。「正常動作した」ということを伝えたいので、「緑のアラート」で表示したいのです。

あるいは、「赤いアラート」の色を変更する方法があれば、それでもかまいません。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1574](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account1574](https://community.cybozu.dev/u/Legacy_Account1574)\
**Post date:** [2016 年 6 月 30 日午前 4:54 UTC](https://community.cybozu.dev/t/topic/2557/2 "2016-06-30T04:54:28Z")

</div>

Toshi Akazawa さん

&nbsp;

submitイベント等におけるevent.errorへの仕込みからのnotifierに対してDOM操作で対応しようとすると、

&nbsp;

```
.notifier-error-cybozu, .notifier-timeout-cybozu { background-color: #e74c3c; }

```

&nbsp;

という指定がなされているので、これをいじることになりそうです。ただ、closeボタンが画像で入っていたので、そこが赤のまま残りそうでした。

&nbsp;

代案としては、kintoneのトーンに合わせたいということであれば、[プラグイン作成用に公開されているスタイル](https://community.cybozu.dev/hc/ja/articles/203302214)で、51-us-default.cssというファイルにメッセージの（赤イメージの）スタイルが

&nbsp;

```
.kintoneplugin-alert {
position: relative;
display: block;
margin: 8px 0;
padding: 4px 18px;
background: #e74c3c;
color: #f6f6f6;
}

```

&nbsp;

このように記載があるので、これを参考に緑イメージのメッセージのスタイルないしイベントを作るか、SweetAlertのようなライブラリを利用するかが考えられそうです。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2090](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@Legacy\_Account2090](https://community.cybozu.dev/u/Legacy_Account2090)\
**Post date:** [2016 年 7 月 1 日午前 2:27 UTC](https://community.cybozu.dev/t/topic/2557/3 "2016-07-01T02:27:41Z")

</div>

Ryu Yamashita さん

コメントいただきありがとうございます。

DOM操作で対応しようかと考え、テストアプリ（文字列1行のフィールど１個のみ配置）を作製して、まずは通常の赤いアラートを出すようにしてみました。

— 先ほどの投稿は勘違いがありましたので、改めて検証の上、再投稿させていただきます。すみません m(…)m

— 以下、再投稿です。

例えば、[レコード編集イベント](https://community.cybozu.dev/hc/ja/articles/202166270)の「イベント発生時に実行できる操作」一覧から「レコードにエラーを表示する」を読んでみますと、次のように書いてあります。

```
ハンドラーが event オブジェクトの error にエラーメッセージを代入して
event オブジェクトを return した場合、フィールドの値の書き換えと
編集可／不可の設定はキャンセルされ、画面の上部にエラーメッセージが
表示されます。

```

今回「フィールド値の変更」が実行された上で「緑のアラート」を出せたらよいなと考えておりました。しかし、「フィールド値の書き換え」がキャンセルさせる仕様ということなので、断念することにします。

お騒がせしてすみませんでした。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2090](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@Legacy\_Account2090](https://community.cybozu.dev/u/Legacy_Account2090)\
**Post date:** [2016 年 7 月 1 日午前 3:05 UTC](https://community.cybozu.dev/t/topic/2557/4 "2016-07-01T03:05:16Z")

</div>

Sweet Alertも試してみました。

しかし、Not valid! と怒られてしまいました(^^;

もうちょっと修行して出直しますw

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1574](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account1574](https://community.cybozu.dev/u/Legacy_Account1574)\
**Post date:** [2016 年 7 月 1 日午前 4:20 UTC](https://community.cybozu.dev/t/topic/2557/5 "2016-07-01T04:20:45Z")

</div>

見た感じ、SweetAlertのスタイルシートが設定されてないように思えます。JavaScript/CSSカスタマイズの設定画面を確認されると良いかもしれません。