# toastrを使っておしゃれにメッセージ表示しよう！

**URL:** <https://community.cybozu.dev/t/topic/3168>\
**Category:** kintone 開発相談\
**Created:** [2018 年 4 月 26 日午後 3:00 UTC](https://community.cybozu.dev/t/topic/3168 "2018-04-26T15:00:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2018 年 4 月 26 日午後 3:00 UTC](https://community.cybozu.dev/t/topic/3168/1 "2018-04-26T15:00:00Z")

</div>

[toastr](https://github.com/CodeSeven/toastr)は、手軽にメッセージのトースト表示ができる[jQuery](http://jquery.com/)プラグインです。 CSSの知識がなくても、簡単におしゃれなメッセージを作成できて便利です。 toastr及びjQueryは[Cybozu CDN](https://community.cybozu.dev/hc/ja/articles/202960194)にてサポートされているので、ご利用ください。

## サンプル

計算フィールドをホバーした際に計算式を表示します。

コード

#### JavaScript

```javascript
(function () {
  "use strict";
  kintone.events.on(["app.record.detail.show"], function (event) {
    toastr.options = { positionClass: "toast-bottom-right" };
    kintone.api("/k/v1/app/form/fields", "GET", { app: kintone.app.getId() }).then(function (response) {
        $.each(response.properties, function (fieldCode, property) {
          if (property.type !== "CALC") return;
          $(kintone.app.record.getFieldElement(fieldCode)).mouseenter(
            function () {
              toastr.info(property.expression, fieldCode);
            }
          );
        });
      });
      return event;
  });
})();

```