一定時間だけ表示されるフラッシュメッセージ（トースト）をnotieでお手軽実装
Webサービスでは処理が成功したタイミング、失敗したタイミングでユーザにメッセージを表示したいことは結構あります
javascriptにも標準でalert()と言うメソッドがあるんですが、あまりにダサい
そしてそっけないのです
さらにokボタンを押さないと消えません
そんな時に一瞬だけ表示されて、自動的に消えるメッセージがあれば便利です
Androidアプリ開発者にはおなじみのトーストって言うやつです
デモ
百聞は一見に如かず
どんな見た目、動作なのかはこちらのデモで確認してください
notie
そんな時に簡単に実装できるJavascriptライブラリがあります。notieです
数あるアラートサービスの中からnotieを選んだ理由は以下の通りです
- カラフルな表示で見た目が良い
- レスポンシブ対応済み
- 実装が簡単
実装の仕方
1.ファイルのアップロード
githubページからZipファイルをダウンロード
緑のボタン「Clone or download」をクリックしてダウンロードを選択
解凍してdistフォルダ内にある「notie.min.css」と「notie.min.js」を自分のウェブサイトにアップロード
2.アップロードしたファイルを読みこむ
CSSファイルの読み込み
<head>
<link rel="stylesheet" type="text/css" href="<ファイルをアップロードしたディレクトリ>/notie.min.css">
</head>JSファイルの読み込み
<body>
<script src="<ファイルをアップロードしたディレクトリ>/notie.min.js"></script>
</body>3.呼び出し
notie.alert({ type: 1, text: '成功！'});オプション
type
typeとして指定する数値を変えることで、アラートの背景色を変更できる
１→緑(success)
２→黄(warning)
３→赤(error)
４→青(info)
５→灰(neutral)
notie.alert({ type: 1, text: '成功！'});stay
クリックしない限り閉じないようにする。デフォルトはオフ(false)
notie.alert({text: '成功！',stay: true});time
表示時間（単位は秒）。デフォルトは３、最小は１
notie.alert({ text: '成功！',time: 5});position
トーストメッセージを表示する位置。上(top)か下(bottom)かの２択。デフォルトは上（top）
notie.alert({ text: '成功！', position: 'bottom'});