SweetAlertで無骨なアラートメッセージとおさらばしよう!
こんにちは、ヱビス(@evisu_phper)です。
システムの中で、ユーザーの行動に関して確認を行う「アラート」があります。
アラートは、役に立つのですが、デフォルトのアラートは無骨な上にユーザーに不安を与える姿をしています。
そんな、「アラート」を、分かりやすく、おしゃれにする方法をご紹介します。
「SweetAlert」でアラートをおしゃれに!
アラートは、JavaScriptで表示させることができます。
基本的な下記のコードを記述することで、ブラウザを開いた時に表示させることができます。
表示される内容はこちら。
Windows時代のトラウマなのか、こう言った無骨なアラートを目にすると、内容が特に悪いわけでもないのに、不安を掻き立てられてしまいます。
※街で、パトカーを見ると少しキョドってしまうのと同じでしょうかw
JavaScriptベースで作成された「SweetAlert」を実装すると下記のようになります。
同じアラートとは思えない安心感ですねw
「SweetAlert」の読み込み
「SweetAlert」の読み込みは、「npm」か「CDN」が選ぶことができます。
「npm」での読み込み
npm install sweetalert --save
「CDN」での読み込み
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
開発環境にもよりますが、個人的にはCDNでの読み込みが簡単に感じます。
また、「SweetAlert」はjQueryプラグインではないので、事前にjQueryを読み込む必要はありません。
また、「SweetAlert」のバージョン1の頃は、CSSの読み込みが必要でしたがバージョン2にアップデートされたことで、CSSの読み込みも不要になりました。
「SweetAlert」の基本的な構文
最も簡単な構文は下記のとおりです。
「SweetAlert」は、パラメータが充実しているので同じ記述でも、パラメータを指定して呼び出す記述の方が、汎用性は高いです。
先程のコードを、パラメータによる記述に書き換えてみます。
(1)titleパラメータ
アラートのタイトルとして、表示される内容です。
デフォルトでは、「font-weight:600」と「font-size:27px」が設定されている太文字になります。
(2)textパラメータ
アラートの説明文として、表示される内容です。
デフォルトでは、HTMLタグが利用できませんので、改行が必要な場合は「改行コード(\n)」を入れます。
(3)iconパラメータ
どういったアラートなのかを、アニメーションで表現してくれるアイコンを指定します。
種類は「success(成功)」「warning(注意)」「Error(警告)」「info(案内)」があります。
「SweetAlert」の優れた特徴
「SweetAlert」を利用することで、デフォルトの「alert関数」では表現できなかった操作を行うことができるようになります。
「Yes」or「No」による分岐
「SweetAlert」では、ユーザーが選択する内容によって、その後の実行内容を変化させることができます。
フォームを埋め込められる
アラート内に、HTMLを書かずに入力フォームを埋め込むことができます。
オリジナルのベーシック認証を作ることも可能かもしれませんね。
簡単なAjax処理を利用できる
「SweetAlert」には、自前のAjax処理を行う構造があります。
ただし、制約も多いため、自分自身で用意したAjax処理を入れるのが汎用性が高いと感じます。
まとめ
「SweetAlert」は、非常に高性能なアラートを作成することができます。
特に、ユーザーの行動に対して条件分岐を設けられることは、アラートを使った演出の可能性を大きく広げてくれます。
無骨なデフォルトのアラートに嫌気が差したら、「SweetAlert」の導入を検討してはどうでしょうか?