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

（著者：株式会社ジョイゾー 山下 竜）

はじめに

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

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/34/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

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の組合せが必要です）の例でもありますので、他のユースケースにも転用できると思います。
是非お試し頂ければと思います！