カテゴリー内の他の記事

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

フォローする

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

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

SweetAlert

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

SweetAlertの勘所

公式ページにサンプルも沢山ありますので、基本的にはこちらを見ればOKです。しかし、kintoneでの利用で「メッセージを出した後に画面更新」といった際にサンプルを見ながら書くと、恐らく同期処理をイメージした書き方をしてしまい、あれ?となってしまう方多いのではないでしょうか(元々のalert関数も同期処理ということもあって)。そして、サンプルを読み進めていくと、非同期(コールバック)を利用した書き方が必要ということに気づきます。ですが、実はこの最もシンプルな書き方はサンプルにはありませんので、今回はレコード詳細画面の表示イベントにおけるREST APIによるレコード更新の例を通してご紹介いたします。

kintoneアプリの準備

今回は、レコード詳細画面を開いた際に、生年月日から年齢を計算し、必要ならフィールド値を更新するというシナリオを例にしたいと思います。次のフィールドを含むアプリをご準備ください(私はアプリストアの社員名簿アプリに修正を加えました)。

フィールド名(例)

フィールドコード

フィールドタイプ

生年月日

birthday

日付

年齢

age

数値、文字列(1行)等

JavaScriptソースコード(calcAge.js)

JavaScript/CSSの設定

今回は、SweetAlertのJavaScript/CSSをCybozu CDNからURL指定して、上のサンプル(calcAge.js)をファイルアップロードします。

動作確認

レコード詳細画面を開いて、その時点で年齢の更新が必要(計算値>既存値)なら更新します。暫く詳細画面を開いてない間に誕生日を迎えていると、以下のように更新されます。

サンプルを見ながら書くと、やってしまいがちなのは次のような書き方だと思います。

swal('年齢を更新します。', '画面をリロードします。', 'success');

location.reload(true);

これで、あれ?となるのは、OKも押していないのに画面がリロードされてしまうところです。理由は非同期処理だからです。

注意事項

今回のkintoneアプリ周辺の注意点は次の通りです。

  • 筆者はMacintoshのGoogle Chromeでkintoneアプリの動作確認を行いました

最後に

今回は、SweetAlertの実は一番シンプルな使い方ながら、公式サンプルに載ってないサンプルをお届けしました。また、しばしばご質問頂くレコード詳細画面でのレコード・フィールド更新(レコード詳細画面の表示イベントとREST APIの組合せが必要です)の例でもありますので、他のユースケースにも転用できると思います。是非お試し頂ければと思います!

デモ環境

https://dev-demo.cybozu.com/k/34/

※デモ環境についての説明はこちら

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk