Skip to content
Tags

Web上で使える通知ライブラリ

by : 2017/03/01

Webアプリケーションなどでフォーム入力を行ったり、Ajaxを使った処理の結果を表示することは多々あるでしょう。しかし、ページをスクロールしていたりすることがあるため、適切な場所がどこか分からないことがあります。

そんな時にはフローティングで使える通知ライブラリが便利です。エラーやウォーニング、サクセスなど多数のパターンに対応したライブラリを紹介します。

Notify.js

jQueryプラグインとして使える通知ライブラリです。メッセージの種類によって背景色が変化します。基本は右上ですが、ページの上下左右を指定したり、特定のDOMの横に表示することもできます。

Notie – A Javascript Notification Plugin

画面上部に幅100%で表示されますのでインパクトが強いです。さらに確認のボタンを出したり、インプットフィールドを追加することもできます。デザインはフラットです。

‎naoxink.hol.es/notifIt/

横や上からスライドしながら表示されます。表示する大きさは自由に設定ができます。アニメーションすることで、より注意を引きつけられるでしょう。

messenger

基本は右下に出るタイプとなっています。小さなアイコンとメッセージという組み合わせで、シンプルな表示となっています。

humane.js

基本は右下にさりげないアニメーションとともに表示されます。その他画面中央や上に出すと言った指定もできます。

HTML iOS Notifications

iOS風の通知表示が特徴です。プッシュ通知風にメッセージが出ます。

alertify.js – browser dialogs never looked so good

上からスライドしながら表示されたり、右下にバナーを出したりできます。アラートやプロンプトの代わりに使うこともできるでしょう。

noty – a jQuery Notification Plugin

jQueryプラグインの通知ライブラリです。アニメーションしながら表示されます。デザインはテキストとアイコン表示となっています。アニメーションがこっています。

Notifier.js Examples

アイコン+メッセージという形の通知が表示できます。表示場所は上下左右に細かく指定できます。


通知を上手に使うと、JavaScriptの特性である非同期処理と絡めてメッセージングができるようになります。ユーザがすでに別な場所まで移動してしまっていたとしても、常時画面上部などに表示できるのでユーザビリティが高くなるでしょう。

banner_02

From → まとめ

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。