Posted on

jQueryプラグインSweetAlert2を使っていいカンジのconfirmをサクッと呼べるラッパー作りました

案件でよくユーザーに処理の実行を問いかけたい時にJavaScriptの標準機能のconfirmを使ったり、情報を表示する際にAlertを使いますが、どこか味気ないし、ブラウザによっても表示がまちまちなので、もうちょっとイイ感じにしたい…そんな時はSweetAlert2を使ってみましょう。

こんなconfirmがサクッと作れます!

SweetAlert2 – a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes

CSSとJSの読み込みです。sweetalert2はES6のPromiseを使って書かれているようなので、IE11以下や古いAndroidに対応するためにpolyfillを先に読んでおきましょう。

今回はCDNを使用しました。

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css">  
  2.   
  3. <!-- Optional: include a polyfill for ES6 Promises for IE11 and Android browser -->  
  4. <script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>  
  5.   
  6. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.js"></script>  

SweetAlert2は便利なのですが、呼び出す構文にオブジェクトを作ったりする必要がありますが、標準のconfirmのように引数で呼び出せたらラクなんだけどなぁと思ったので、ラッパーを作ってみました。

ボタン色はBootstrap4のクラスを指定しています。

以下コードをコピーしてページに貼るか、alertmessage.js等のファイルで保存してscriptタグで呼び出してください。

  1. (function (ns) {  
  2.   
  3. // Sweet Alert 2が読み込まれてなければ抜ける  
  4. if (typeof Swal === "undefined") {  
  5. console.error("プラグイン「SweetAlert2」が読み込まれていません。先にscriptタグで読み込んでください");  
  6. return false;  
  7. }  
  8.   
  9. var AlertMessage = function () {  
  10.   
  11. // インスタンスがあるかどうかチェック  
  12. if (typeof AlertMessage.instance === "object") {  
  13. return AlertMessage.instance;  
  14. }  
  15.   
  16. // 無ければキャッシュする  
  17. AlertMessage.instance = this;  
  18. return this;  
  19. };  
  20.   
  21. /** 
  22. * confirmラッパー 
  23. * @param _text String 表示したい内容テキスト 
  24. * @param _title String 表示したいタイトルテキスト 
  25. * @param _mode string アラートの種類 bootstrapと同じ or 'question' ( ?マーク ) 
  26. * @param _callback function アラートの結果を受けて関数を呼び出す。引数に成否を渡す 
  27. * @param _array [] コールバックに渡したいもの配列 
  28. * @constructor 
  29. */  
  30. AlertMessage.prototype.confirm = function (_text, _title, _mode, _callback,_array) {  
  31.   
  32. var dispTitle = _title;  
  33. if (typeof dispTitle === "undefined") {  
  34. dispTitle = "確認";  
  35. }  
  36.   
  37. var o = {  
  38. allowOutSideClick: false,  
  39. showCancelButton: true,  
  40. confirmButtonText: 'OK',  
  41. cancelButtonText: "キャンセル",  
  42. customClass: {  
  43. cancelButton: 'btn btn-gray'//bootstrap4のクラス  
  44. },  
  45. title: dispTitle,  
  46. html: _text  
  47. };  
  48.   
  49. if (_mode === "success" ||  
  50. _mode === "error" ||  
  51. _mode === "warning" ||  
  52. _mode === "info" ||  
  53. _mode === "question") {  
  54. o["type"] = _mode;  
  55. };  
  56.   
  57. Swal.fire(o).then(function (result) {  
  58. var retBool = false;  
  59. if (typeof result.value !== "undefined" && result.value === true) {  
  60. retBool = true;  
  61. }  
  62. if(typeof _callback === "function"){  
  63. _callback.call(this, retBool,_array);  
  64. }  
  65. });  
  66.   
  67. };  
  68.   
  69. /** 
  70. * Alertラッパー 
  71. * @param _text String 表示したい内容テキスト 
  72. * @param _title String 表示したいタイトルテキスト 
  73. * @param _mode string アラートの種類 bootstrapと同じ or 'question' ( ?マーク ) 
  74. * @constructor 
  75. */  
  76. AlertMessage.prototype.alert = function (_text, _title, _mode) {  
  77.   
  78. var o = {  
  79. allowOutSideClick: false,  
  80. type: _mode,  
  81. title: _title,  
  82. html: _text  
  83. }  
  84. Swal.fire(o);  
  85. };  
  86.   
  87. ns.AlertMessage = new AlertMessage();  
  88.   
  89. })(window);  

使い方

htmlでボタンを作成します。

  1. <a href="#" class="btn btn-success" id="deleteUserButton">削除ボタン   
  2. </a href="#">  

基本の呼び出し方は以下となります。文言が長いので引数1つずつに改行を入れていますが、横に並べて書いても大丈夫です。

  1. // ボタン押下のイベント  
  2. $(document).on("click""#deleteUserButton"function (e) {  
  3.       e.preventDefault(); // 本来のボタン押下の処理のキャンセル  
  4.         
  5.       AlertMessage.confirm(  
  6.           "ユーザーのデータを削除します。よろしいですか?"// confirm本文  
  7.           "ユーザーの削除の確認"// confirmタイトル  
  8.           "info"// アラートの種類  
  9.           function (_enter) { // コールバック  
  10.             if (_enter) {  
  11.               // OKが押された時の処理  
  12.             }  
  13.           });  
  14.     });  

ボタンを押下するとこんな感じで表示されます。

SweetAlert2のconfirmをいつでもどこでもAlertMessage.confirm()引数で呼べるようになりました。

アラートの種類というのは、表示するアイコンの種類になります。
bootstrapの”success”, “error”, “warning”, “info”で指定できるので慣れている人は直感的に書けます。それに加えて”question”も指定できるのでユーザーに問いかけたい時は非常に便利です。

さらにconfirmのコールバックにさらに配列を渡せるようにしました。使いたい値がある場合は、便利かもしれません。

  1. var infoArray = ["タンタン""パンダ""神戸"];  
  2.      
  3.      AlertMessage.confirm(  
  4.          "情報を追加してもよろしいですか?"// confirm本文  
  5.          "確認"// confirmタイトル  
  6.          "question"// アラートの種類  
  7.          function (_enter, _array) { // コールバック  
  8.            if (_enter) {  
  9.              // OKが押された時の処理  
  10.              var _text = "";  
  11.              $(_array).each(function(i){  
  12.                _text += this;  
  13.                if(i < _array.length -1){  
  14.                _text += ",";  
  15.                }  
  16.              });  
  17.              $("#output").html(_text); //タンタン,パンダ,神戸  
  18.            }  
  19.          },  
  20.          infoArray // コールバックに渡したい配列  
  21.          );  
  22.    });  

ついでにAlertMessage.alert()も作りました。シンプルにアラートが出せます。

  1. AlertMessage.alert(  
  2.           "処理を中断します。"// alert本文  
  3.           "エラー!"// alertタイトル  
  4.           "warning"// アラートの種類  
  5.          );  

jQueryのプラグインはとても便利ですので、そのプラグインをもっと簡潔に使えるような工夫をすればもっともっと手っ取り早くコーディングができるようになりますよ。