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

著者名: 山下 竜 (External link) 株式会社ジョイゾー (External link)

目次

はじめに

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

デモ環境

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

SweetAlert

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

SweetAlertの勘所

公式ページ (External link) にサンプルもたくさんありますので、基本的にはこちらを見れば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の組み合わせが必要です)の例でもありますので、他のユースケースにも転用できると思います。
ぜひお試しいただければと思います!

information

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