#10 jQueryでアラートをオシャレに！（Sweet Alert実装編）
jQuwryでアラートをオシャレに！
アラート実装したけど味気なし！
そんな時におすすめなのが
「Sweet Alert」
迷惑！うざい！はひとまず置いといて、、、
今回実装してみたのは「Sweet Alert」というjQueryのプラグイン。
それでは実装方法を見ていきましょう！
1.参考サイト
参考サイトは下記の通り。
１.
2.
2.注意！！！
※ここで罠が隠れていたので注意喚起を。
まず、１つ目の日本語サイトを参照にした場合、
必ずある場所で問題が発生します！
それは、typeです。
type : " ここに１〜４のどれかが入ります "
例：type : "success"
１：success
２：warning
３：error
４：info
私もだいぶ日本語サイトを探してみたんですけど
解決策が見つからず諦めつつ読めない英語サイトを見ていると・・・。
んん！？
type : "success" ではなく、
icon : "success" やん！！
いやあ、見るべきは英語サイトの最新版ですよね。切実に感じました。笑
英語勉強しましょう・・・。（´-`）
それはさておき、
typeではアラートの種類は変わりませんのでiconにしてくださいね！
3.記述コード
ちなみに、Sweet AlertをDLせずに
リンク先からインストールする方法は下記の通りです。
今回の実装コードと合わせてどうぞ！
<全てhead内に記述>
<リンク先からインストール>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<ページを開くと機能するアラート（キャンセルボタン・自動で消える機能なし）>
<script>
var href = "https://momotaroch.hatenablog.jp/" ;
if(href == location.href){
window.swal({
icon: "success",
title: "welcome!",
text: "読者登録してくれなきゃイタズラしちゃうぞ٩( 'ω' )و" ,
allowOutsideClick: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "OK",
closeOnConfirm: true
});
}
</script>
ー注意ー
if ( href == location.href ){ アラート実行文 }
上記では、トップページの時のみアラートを表示させるようにしてあります！
location.href → 現在のページのURL取得
href → 用意していた自分のトップページURL
（location.hrefについてはまた次回紹介しますー）
なので、URLの箇所は自分のページURLに変更してね！
例：
var href =
"ここを自分のトップページURLに変更！"
ー注意２ー
自分のトップページURLの最後には必ず「 /（シャープ） 」を追加してください！！
じゃないと機能しなくて、ネットサーフィンを２時間ほどしちゃいますよ！
私みたいに！！！(>_<)
4.まとめ
アラートって便利ですけど警告慣れしてるとビクッとしちゃいますよね？
そんな時にもってこいのプラグインだと思いました。
ただ、どっちにしろアラートはアラート。
やりすぎるとうざがられるかも・・・。
もしコメントに「うざい」コメントがあった場合機能停止します・・・。
あと、上記コードは貼り付けてそのまま使えますので
よければ勝手にどうぞー！
注※責任はとりません。
それではおやすみなさい！٩( 'ω' )و
