humane.jsはフレームワークなどに依存しないシンプルでモダンな通知システムを実装できるJSライブラリです。できるだけ邪魔に感じさせないユーザーエクスペリエンスを提供しつつも、ユーザーの注意を引きつける情報をしっかり通知してくれます。
ユーザーに配慮しつつもしっかり情報を通知
以下、humane.jsの実際のデモページです。
デモページ内の「Select a theme」から、好きなテーマを選択できます。ページ読み込み時は「libnotify」に設定されています。
その下にあるコードが書かれた各項目をクリックすると、通知が表示される仕組みです。ちなみに、libnotifyでは右上に通知がさりげなく表示されます。
カンタンな文字をはじめ、複数行に対応したり通知したあとに背景カラーが切り替わったりと、いろんなパターンを確認できるはずです。
テーマを「bigbox」に変更してみると、今度は画面の中央にデカデカと通知が表示されます。先ほどのテーマよりも目立ちますが、いずれにしろ通知が表示されてから数秒で消えていくのでユーザーにとっては邪魔に感じにくいと思います。
この辺りのバランスはとても絶妙ですね。テーマは他にも、boldlight、jackedup、original、flattyが用意されているので、気になる人は好きなテーマをチェックしてみてください。
アニメーションもさりげなく、ユーザーに配慮しつつもしっかり情報を通知して目を引きつけてくれます。
また、オプションには、timeout、waitForMove、clickToClose、timeoutAfterMove、addnClsといったものが用意されています。オプションを活用して自分好みのカスタマイズを施したい人にもうれしいですね。
サポートされているブラウザは、Internet Explorer 7+、Firefox 3+、Chrome 9+、Safari 3+、Opera 10+、iOS 4+、Android 2+です。ライセンスはMITとのこと。
シンプルでモダンな依存性のない通知システムを実装したい人は、ぜひ「humane.js」をチェックしてみてください。ダウンロードや詳しい使い方は、以下のページからどうぞ。
