SweetAlert を使って、kintone でメッセージをスタイリッシュに表示させよう！

固定リンクがコピーされました

著者名：山下竜

（[株式会社ジョイゾー(https://www.joyzo.co.jp/blog/)）

はじめに

固定リンクがコピーされました

今回は Cybozu CDN で配信されている SweetAlert を使ったメッセージ表示について、サンプルを通してその基本的な使い方をお届けしたいと思います。

デモ環境

固定リンクがコピーされました

デモ環境で実際に動作を確認できます。
ログイン情報は cybozu developer network デモ環境で確認してください。

SweetAlert

固定リンクがコピーされました

SweetAlert は、JavaScript で標準サポートしているいわゆる alert 関数や confirm 関数をスタイリッシュに表示してくれるライブラリです。

SweetAlertの勘所

固定リンクがコピーされました

公式ページにサンプルもたくさんありますので、基本的にはこちらを見れば OK です。
しかし、kintone での利用で「メッセージを出した後に画面更新」といった際にサンプルを見ながら書くと、おそらく同期処理をイメージした書き方をしてしまい、あれ？となってしまう方多いのではないでしょうか（もともとの alert 関数も同期処理ですので）。
そして、サンプルを読み進めていくと、非同期（コールバック）を利用した書き方が必要ということに気付きます。
ですが、実はこの最もシンプルな書き方はサンプルにはありませんので、今回はレコード詳細画面の表示イベントにおける REST API によるレコード更新の例を通して紹介します。

kintoneアプリの準備

固定リンクがコピーされました

今回は、レコード詳細画面を開いた際に、生年月日から年齢を計算し、必要ならフィールド値を更新するというシナリオを例にしたいと思います。
次のフィールドを含むアプリをご準備ください（私はアプリストアの社員名簿アプリに修正を加えました）。

フィールド名（例）	フィールドコード	フィールドタイプ
生年月日	birthday	日付
年齢	age	数値、文字列（1行）等

JavaScriptソースコード（calcAge.js）

固定リンクがコピーされました

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71


/*
 * Change message looks by sweetalert sample program
 * Copyright (c) 2015 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';

  kintone.events.on(['app.record.detail.show'], (event) => {

    const record = event.record;

    // レコード登録中の年齢をセット
    const existing_age = parseInt(record.age.value, 10);

    if (record.birthday.value != null) {
      // 生年月日から年齢の計算
      const birthday = new Date(record.birthday.value);
      const today = new Date();
      let years = today.getFullYear() - birthday.getFullYear();
      birthday.setFullYear(today.getFullYear());
      if (today < birthday) {
        years--;
      }
      const real_age = years;

      // レコード登録中の年齢と計算した年齢が異なればレコードを更新
      if (existing_age !== real_age) {
        const params = {
          app: kintone.app.getId(),
          id: kintone.app.record.getId(),
          record: {
            age: {
              value: real_age
            }
          }
        };
        kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', params, (resp) => {
          /* alert()を使った書き方
           *
           * alert('年齢を更新します。');
           * location.reload(true);
           *
           */

          // SweetAlertを使った書き方
          swal({
            title: '年齢を更新しました。',
            text: '画面をリロードします。',
            icon: 'success',
            button: 'OK'
          }).then(() => {
            // ダイアログクローズ後の処理
            location.reload(true);
          });
        }, (resp) => {
          // エラーの場合はメッセージを表示する
          let errmsg = 'レコード更新時にエラーが発生しました。';
          // レスポンスにエラーメッセージが含まれる場合はメッセージを表示する
          if (resp.message !== undefined) {
            errmsg += resp.message;
          }
          alert(errmsg);
        });
      }
    }
    return event;
  });
})();

JavaScript/CSSの設定

固定リンクがコピーされました

今回は、SweetAlert の JavaScript を Cybozu CDN から URL 指定して、上のサンプル（calcAge.js）をファイルアップロードします。
次の順でリンクおよびファイルを追加してください。

PC 用の JavaScript ファイル
- https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js
- calcAge.js

動作確認

固定リンクがコピーされました

レコード詳細画面を開いて、その時点で年齢の更新が必要（計算値 > 既存値）なら更新します。
しばらく詳細画面を開いてない間に誕生日を迎えていると、以下のように更新されます。

サンプルを見ながら書くと、やってしまいがちなのは次のような書き方だと思います。

1
2


swal('年齢を更新します。', '画面をリロードします。', 'success');
location.reload(true);

これで、あれ？となるのは、OK も押していないのに画面がリロードされてしまうところです。
理由は非同期処理だからです。

最後に

固定リンクがコピーされました

今回は、SweetAlert の実は一番シンプルな使い方ながら、公式サンプルに載っていないサンプルをお届けしました。
また、しばしばご質問いただくレコード詳細画面でのレコード・フィールド更新（レコード詳細画面の表示イベントと REST API の組み合わせが必要です）の例でもありますので、他のユースケースにも転用できると思います。
ぜひお試しいただければと思います！

この Tips は、2022 年 10 月版 kintone で動作を確認しています。

cybozu.com 共通管理開発 Tips

SweetAlert を使って、kintone でメッセージをスタイリッシュに表示させよう！

目次

はじめに