プログラマも簡単に実装「sweetalert.js」で作る簡単アラート

2017年7月28日

こんにちは、Webプログラマの篠田です。

Webシステムを作成していると、PHPとMySQLだけではどうにもならない場合があります。

その最たるものが「フロントエンド」です。

見た目やUIやUXといった、ユーザーの方に直接影響する部分ですので、サーバーサイド側バリバリの私にとっては、頭を悩まされる部分の１つです。

その中で、今回はプログラマでもおしゃれなアラートを作ることができるjQueryプラグインのご紹介をします。

アラートあるある

デザインに苦手意識のあるプログラマが、「アラート（警告）」を表示させるとなると、下記のようなJSを用意しがちです。

<script>
  alert("本当に削除してもいいですか？")
</script>

これが悪いとは思わないのですが、サービスやユーザーの方にとって良いかというと問題があります。

■従来からのアラートの問題点

（１）ダサい
見た目が良くないですね。

（２）ビビる。
Windowsをお使いの方であれば、何か不具合が起こると警告文が表示される画面を嫌というほど見てこられたと思います。

どこか、それを思い出させる「嫌悪感」をそこはかとなく漂わせています。

（３）メッセージに強弱がない。
アラートのメッセージ内でも、重要度があるはずです。

ですが、どうしても単調なメッセージであり、ユーザーの方に対するメッセージがうまく伝わりにくいように感じます。

（４）カスタマイズ性皆無。
これまでの問題点の総括になりますが、これ以上どうすることもできないという致命的な問題を抱えています

「sweetalert.js」で問題を解決しよう

「alertダサい問題」を解決するおすすめのjQueryプラグインが「sweetalert.js」です。

デザインはCSSで変更可能ですし、アラートの種類ごとに見せ方を変えたり、表示されるメッセージにHTMLタグを使えたりと、プログラマでも簡単にカスタマイズができる便利なjQueryプラグインです。

簡単なインストール方法

「sweetalert.js」をインストールする方法は３種類です。

（１）「Bower」によるインストール

$ bower install sweetalert

（２）「NPM」によるインストール

$ npm install sweetalert

（３）Zipファイルを直接ダウンロード

個人的におすすめは、難しい事を考えずZipファイルをダウンロードするのが良いかと思います。

サンプルコード

$('.js--alert').on('click', function(){
	swal({
		title: '本当に削除してもいいですか？',
		text: '<span style="color:red;">【注意】削除後の復元はできません。</span>',
		type: 'warning',
		showCancelButton: true,
		confirmButtonColor: "#DD6B55",
		confirmButtonText: "削除する",
		cancelButtonText: "キャンセル",
		closeOnConfirm: false,
		html: true
	}, function() {
		if (isConfirm) {
			$.ajax({
				/* Ajaxの具体的な処理 */
			}).done(function (data, status, xhr) {
				//Ajax成功時の処理
				swal("削除完了!", "", "success");
			}).fail(function (xhr, status, error) {
				// Ajax失敗時の処理
                console.log(error);
            });
            return false;
		}
	});
});

サンプルコードの解説

（１）「sweetalert.js」のオプション設定

title	アラートのタイトル部分
text	アラートの説明文。 HTMLやCSSも利用可能。
type	アラートのタイプを設定。「warning」は警告を示唆するアラートタイプ。
showCancelButton	キャンセルボタンの有無。 trueで「有り」
confirmButtonColor	OKボタンの色設定。初期は「#AEDEF4」
confirmButtonText	OKボタンのテキスト変更
cancelButtonText	キャンセルボタンのテキスト変更
closeOnConfirm	OKボタンをクリックしたらアラートが削除される。初期は「true」
html	textオプション内でHTMLタグを有効にする。