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

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

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

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

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

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

アラートあるある

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

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

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

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

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

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

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

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

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

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

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

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

簡単なインストール方法

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

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

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

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

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

おすすめの使い方

「sweetalert.js」の良さは、公式サイトのデモを触ってみてください。

ここでご紹介するのは、実際に使うにあたっての具体的かつ実践的なサンプルをご紹介します。

アラートを利用する場面として、下記のようなパターンが多いのではと思います。

■想定する利用シーン
（１）警告を出して「OK（承認）」されたときに具体的な処理をする

（２）具体的な処理としてAjaxを想定する

（３）「NO（キャンセル）」されたら何もせずそっと閉じる

（４）Ajax処理が終わったら完了用のアラートを出す。

よくあるあるな、シーンだと思います。

具体的なコードをみながら、作っていきます。

サンプルコード

サンプルコードの解説

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

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

（２）「if (isConfirm)」で条件分岐
「if (isConfirm)」で、「OKボタンがクリックされたとき」という条件を拾うことができます。

今回は「削除する」ボタンがクリックされた時に、実行される処理を書いています。

ここで、Ajax処理を行えば、いろいろな処理をアラート後に実行することができます。

まとめ

Webシステムを作成する上で、頻繁に必要となるアラートを簡単に作れるのはありがたいですね。

こういった細かい部分の実装で、クオリティを上げることができます。

プログラマの方も、ぜひ「sweetalert.js」を使ってよりよいシステムを作ってみてください。