はじめに
今回はCybozu CDNで配信されているSweetAlertを使ったメッセージ表示について、サンプルを通してその基本的な使い方をお届けしたいと思います。
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/34/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
SweetAlert
SweetAlertは、JavaScriptで標準サポートしている所謂alert()やconfirm()をスタイリッシュに表示してくれるライブラリです。
SweetAlertの勘所
公式ページにサンプルも沢山ありますので、基本的にはこちらを見ればOKです。
しかし、kintoneでの利用で「メッセージを出した後に画面更新」といった際にサンプルを見ながら書くと、恐らく同期処理をイメージした書き方をしてしまい、あれ?となってしまう方多いのではないでしょうか
(元々のalert関数も同期処理ということもあって)。
そして、サンプルを読み進めていくと、非同期(コールバック)を利用した書き方が必要ということに気づきます。
ですが、実はこの最もシンプルな書き方はサンプルにはありませんので、今回はレコード詳細画面の表示イベントにおけるREST APIによるレコード更新の例を通してご紹介いたします。
kintoneアプリの準備
今回は、レコード詳細画面を開いた際に、生年月日から年齢を計算し、必要ならフィールド値を更新するというシナリオを例にしたいと思います。次のフィールドを含むアプリをご準備ください(私はアプリストアの社員名簿アプリに修正を加えました)。
フィールド名(例) |
フィールドコード |
フィールドタイプ |
生年月日 |
birthday |
日付 |
年齢 |
age |
数値、文字列(1行)等 |
JavaScriptソースコード(calcAge.js)
JavaScript/CSSの設定
今回は、SweetAlert の JavaScript を Cybozu CDN からURL指定して、上のサンプル(calcAge.js)をファイルアップロードします。
次の順でリンクおよびファイルを追加してください。
- PC用のJavaScriptファイル
- https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js
- calcAge.js
動作確認
レコード詳細画面を開いて、その時点で年齢の更新が必要(計算値>既存値)なら更新します。暫く詳細画面を開いてない間に誕生日を迎えていると、以下のように更新されます。
サンプルを見ながら書くと、やってしまいがちなのは次のような書き方だと思います。
swal('年齢を更新します。', '画面をリロードします。', 'success');
location.reload(true);
これで、あれ?となるのは、OKも押していないのに画面がリロードされてしまうところです。理由は非同期処理だからです。
注意事項
今回のkintoneアプリ周辺の注意点は次の通りです。
- 筆者はMacintoshのGoogle Chromeでkintoneアプリの動作確認を行いました
最後に
今回は、SweetAlertの実は一番シンプルな使い方ながら、公式サンプルに載ってないサンプルをお届けしました。
また、しばしばご質問頂くレコード詳細画面でのレコード・フィールド更新(レコード詳細画面の表示イベントとREST APIの組合せが必要です)の例でもありますので、他のユースケースにも転用できると思います。
是非お試し頂ければと思います!
Submit前のConfirmがわりに使う場合は、Promiseでやらないとスルーされるので、こちらのページを参考にすると良いかと思います。
(alertやconfirmをかっこよくしたい人は多い気がするので。)
https://developer.cybozu.io/hc/ja/community/posts/115011834506-SweetAlert2%E5%87%A6%E7%90%86%E3%81%8C%E3%82%B9%E3%83%AB%E3%83%BC%E3%81%95%E3%82%8C%E3%82%8B