読者です 読者をやめる 読者になる 読者になる

Knowledge

オープンソースで情報共有のサービス「Knowledge」を作っています。ブログでは、サービスの説明や開発で得た情報などを書いていきます。https://information-knowledge.support-project.org

邪魔にならない程度で綺麗にユーザに通知を表示 - 「Notify.js」

ユーザへの通知

  • ユーザがサービスの中で行った操作に対し、何かメッセージを表示する事は多いと思います
    • 「登録しました」「XXXは必須です」といったメッセージです
  • twitter bootstrap を利用しているのであれば、「Alerts」のコンポーネントを使うことも多いと思いますが、凄く目立つので、もう少し控えめに通知できないかなと調べていて見つけたのが「Notify.js」です
  • 「Notify.js」を使うと、画面の右上に通知が表示され、時間が経過すると通知が消すということができます
  • Knowledgeでのユーザへの通知は、これを利用しているので、使い方を紹介します

スクリーンショット

f:id:koda3:20150123234655p:plain

https://support-project.org/knowledge/open.knowledge/view/66

ライブラリの取得

  • bowerで取得します
"notifyjs": "0.3.2"
bower install
  • ライブラリのウェブサイトは以下になります

Notify.js

ライブラリの利用の指定

  • bowerで取得したライブラリを読み込む
<script type="text/javascript" src="bower/notifyjs/dist/notify.js"></script>
<script type="text/javascript" src="bower/notifyjs/dist/notify-combined.js"></script>

ユーザへの通知

  • 通知したいタイミングで $.notify('メッセージ', 'メッセージレベル'); をコールします

    • メッセージレベルには、'success', 'info', 'warn', 'error' のどれかを指定します
  • サンプルソースJavascript

$.notify('メッセージが右上に表示されます', 'info');

以上です。