SweetAlert2を使って、kintoneでメッセージをスタイリッシュに表示させよう!
はじめに
今回は Cybozu CDN で配信されているSweetAlert2を使ったメッセージ表示について、サンプルコードを通してその基本的な使い方をお届けしたいと思います。
デモ環境
デモ環境
で実際に動作を確認できます。
ログイン情報は
cybozu developer networkデモ環境
で確認してください。
SweetAlert2
SweetAlert2
は、JavaScriptで標準サポートしている、いわゆるalert関数やconfirm関数をスタイリッシュに表示してくれるライブラリです。
SweetAlert2の勘所
公式サイト
にサンプルコードもたくさんありますので、基本的にはこちらを見ればOKです。
しかし、kintoneでの利用で「メッセージを出した後に画面更新」といった際にサンプルコードを見ながら書くと、おそらく同期処理をイメージした書き方をしてしまい、あれ?となってしまう方多いのではないでしょうか(もともとのalert関数も同期処理ですので)。
そして、公式サイトを読み進めていくと、非同期(コールバック)を利用した書き方が必要ということに気付きます。
ですが、実はこの最もシンプルな書き方は公式サイトにはありませんので、今回は
レコード詳細画面を表示した後のイベント
におけるREST APIによるレコード更新の例を通して紹介します。
kintoneアプリの準備
今回は、レコード詳細画面を開いた際に、生年月日から年齢を計算し、必要ならフィールド値を更新するというシナリオを例にしたいと思います。
次のフィールドを含むアプリをご準備ください。
| フィールド名(例) |
フィールドコード |
フィールドタイプ |
|---|---|---|
| 生年月日 |
birthday |
日付 |
| 年齢 |
age |
数値、文字列(1行)等 |
サンプルコード(calcAge.js)
|
|
JavaScript/CSSの設定
今回は、SweetAlert2のJavaScriptをCybozu CDNからURL指定して、上記のサンプルコード(calcAge.js)をファイルアップロードします。
次の順でリンクおよびファイルを追加してください。
-
PC用のJavaScriptファイル
https://js.cybozu.com/sweetalert2/v11.23.0/sweetalert2.min.jscalcAge.js
-
PC用のCSSファイル
https://js.cybozu.com/sweetalert2/v11.23.0/sweetalert2.min.css
上記URLは、2025年10月15日時点でのCybozu CDNで配信されている最新バージョンのURLです。
SweetAlert2を導入する際は、
Cybozu CDN
を確認し、必要に応じて配信されているバージョンを変更してください。
動作確認
レコード詳細画面を開いて、その時点で年齢の更新が必要(計算値 > 既存値)なら更新します。
しばらく詳細画面を開いてない間に誕生日を迎えていると、以下のように更新されます。
サンプルコードを見ながら書くと、やってしまいがちなのは次のような書き方だと思います。
|
|
これで、あれ?となるのは、OKも押していないのに画面がリロードされてしまうところです。
理由は非同期処理だからです。
最後に
今回は、SweetAlert2の実は一番シンプルな使い方ながら、公式サイトに載っていないサンプルコードをお届けしました。
また、しばしばご質問いただくレコード詳細画面でのレコード/フィールド更新(
レコード詳細画面を表示した後のイベント
とREST APIの組み合わせが必要です)の例でもありますので、他のユースケースにも転用できると思います。
ぜひお試しいただければと思います!
このTipsは、2025年10月版kintoneで動作を確認しています。