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 でメッセージをスタイリッシュに表示させよう！

目次

はじめに