一定時間だけ表示されるフラッシュメッセージ(トースト)を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として指定する数値を変えることで、アラートの背景色を変更できる
1→緑(success)
2→黄(warning)
3→赤(error)
4→青(info)
5→灰(neutral)
notie.alert({ type: 1, text: '成功!'});
stay
クリックしない限り閉じないようにする。デフォルトはオフ(false)
notie.alert({text: '成功!',stay: true});
time
表示時間(単位は秒)。デフォルトは3、最小は1
notie.alert({ text: '成功!',time: 5});
position
トーストメッセージを表示する位置。上(top)か下(bottom)かの2択。デフォルトは上(top)
notie.alert({ text: '成功!', position: 'bottom'});
ディスカッション
コメント一覧
まだ、コメントがありません
よくLoadingされてるDocs
新たにPostされたDocs
: ウェブサービス
メルカリやラクマの商品がいつ出品されたのかを調べる裏技
メルカリやラクマなどで商品を探してると、ときどき、 「この商品はいつ出品されたも ...: 仕事環境
15年前のエアコンに洗浄スプレーしたら想像以上にキレイになった
うちのエアコンは新品で購入してからすでに15年が経過しています にもかかわらず、 ...: Laravel
一定時間で消えるフラッシュメッセージを簡単に実装[Laravel8]
以前、手軽にフラッシュメッセージが実装できるnotieを紹介しました 今回は、そ ...: Laravel
ランダムな文字列やユニークなIDをLaravelで生成
random use Illuminate\Support\Str; // 引数 ...: スマホ
4,837円あげるって言うからOCNモバイルOneにLinksmateから乗り換えたんですよ
これまでは僕はスマホの通信会社に、MVNOのLinksmateを使ってきました ...HashMap
created_by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
Utilities