メッセージ通知用のJavaScriptライブラリ「Notimoo」を試してみた。

phpspot開発日誌さんのエントリで、NotimooというJavaScriptライブラリを知った。会社で運用しているホームページに使えないかなと思い、ちょっと試してみた。
利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌

Notimooについて

Notimooは、画面上にメッセージをポップアップというかフェードインさせて、何らかの情報をユーザに通知するためのライブラリだ。以下のサイトで、「Run this code」というリンクをクリックすることで、実際に動かしてみることができる。

デモサイト

Notimo Demos site

インストールと導入

インストールは以下の手順で行う。

notimoo - Project Hosting on Google Code へアクセスし、画面右のFeatured downloads:からモジュールをダウンロードする。（2009年5月1日現在の最新版は、1.0.1）
ダウンロードしたファイルを解凍すると、以下のファイルが含まれている。これらのファイルを適用させたいページでインクルードしてやれば、すぐに使用できる。*1
- mootools-1.2-core.js
- notimoo-documented-1.1.css
- notimoo-documented-1.1.js
- notimoo-v1.1.css
- notimoo-v1.1.js

動かしてみる

テスト用のHTMLファイルを用意して、動かしてみる。ライブラリのインクルードは、mootools-1.2-core.jsを先にインクルードする必要があるので、注意すること。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" href="Notimoo-v1.0.1/notimoo-v1.1.css" type="text/css">
<script language="javascript" type="text/javascript" src="Notimoo-v1.0.1/mootools-1.2-core.js"></script>
<script language="javascript" type="text/javascript" src="Notimoo-v1.0.1/notimoo-v1.1.js"></script>
<script language="javascript" type="text/javascript">
<!--

function show(){
  var notimooManager = new Notimoo();

  // Showing a simple notification
  notimooManager.show({
    title: 'メッセージ１',
    message: 'This is a sample notitication showing how easy is to use Notimoo.'
  });

  notimooManager.show({
    title: 'メッセージ２',
    message: 'This is a sample notitication showing how easy is to use Notimoo.',
    sticky: true
  });
}

//-->
</script>
</head>
<body>
<h1>Notimooテストページ</h1>
<input type="button" value="通知する" onclick="show();">
</body>
</html>

スクリーンショット

通常のメッセージは、一定時間すると自動的に消えるが、sticky: trueとすると、クリックされるまで消えないようにすることができる。

*1:notimoo-documented-1.1.cssとnotimoo-documented-1.1.jsに関しては、インクルードしなくても動作するようだ。デモのサイトで確認しても、インクルードしていない模様。

小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。