ITエンジニア/デザイナ向けにオープンソースを毎日紹介

ユーザに何が起こったのか知らせるための通知機能をどう作るかは悩みどころです。見やすい、しかし消したいと思った時にすぐに消せるようになっていなければいけません。デザイン的にもバランスを崩したりする要因になります。

そこでフローティングで通知を表示するというのは一つの方法としてありではないでしょうか。目の前に表示されれば目立ちますし、アニメーションしながら表示すればさらに目を引きます。

今回はそんな機能を手軽に実装できるhumane.jsを紹介します。

まずは右上に表示するパターン。エラー、警告でないレベルの通知に良さそうです。
まずは右上に表示するパターン。エラー、警告でないレベルの通知に良さそうです。

複数行の表示にも対応しています。
複数行の表示にも対応しています。

こちらは巨大な通知。エラーや新機能の紹介に使えそうです。
こちらは巨大な通知。エラーや新機能の紹介に使えそうです。

色や表示場所はカスタマイズできます。
色や表示場所はカスタマイズできます。

背景が透けるようにもできます。
背景が透けるようにもできます。

humane.jsはテーマが用意されており、それによって表示場所や色を制御できるようになっています。ニーズに合わせて表示方法をカスタマイズしたり、色やサイズを自由に変更できるので使い勝手が良さそうです。

Ajaxを使った処理の通知などに使っても良いのではないでしょうか。

humane.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

humane.js

wavded/humane-js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2