yowl - Google Codeyowlとは、Mac OS X上で実装されている通知システムのアプリケーション実装「Growl」をYahooライブラリYUIを使ってWeb実装した物です。
さっそくダウンロードして使ってみましたが、やっぱりYUIは良く出来てますね。
Windows用にシステムトレイ常駐の通知アプリケーションと連携すれば、Webからデスクトップアプリケーションとして何かしらを通知出来るという事になります。
通知時のアクションが決められれば、夢の広がるアプリケーションになるでしょうね。
今日はサンプルとして、以前つくった「はてブでアーーーーッ!!!」をYOWLでやってみたいと思います。
少し色を付けて、JSDeferredとjQueryを使い、del.icio.usとパラレルで動かそうかと思いましたが、あまり面白くないのでやめて、結局JSDeferredのcall/waitのみ使わせて頂いています。
実行結果、ソースは以下から...
まず実行結果。
ブックマークを通知表示はてなブックマークの際に付けたコメントが通知表示されます。
画面右上に出ます。
本当は、タイマー等でJSONやRSSを監視するのが本当の使い方なんでしょうけどね。
そしてソース。
結構いっぱいロードしてます。
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://svn.coderepos.org/share/lang/javascript/jsdeferred/trunk/jsdeferred.js"></script>
<script type="text/javascript" src="http://mattn.kaoriya.net/js/jquery-latest.js"></script>
<script type="text/javascript" src="http://mattn.kaoriya.net/yowl/yowl.js"></script>
<script type="text/javascript" src="http://mattn.kaoriya.net/yowl/display-yui.js"></script>
<style type="text/css">
@import url(http://mattn.kaoriya.net/yowl/yowl.css);
</style>
<script type="text/javascript"><!--
function yowlHatenaBookmark() {
document.Yowl.register(
"hatebu",
["HatenaBookmark"],
[0],
"http://mattn.kaoriya.net/images/hatena.gif"
);
var url = location.href;
var n = url.indexOf('?');
if (n > 0) url = url.substring(0, n);
var hatebu_url = 'http://b.hatena.ne.jp/entry/json/'
+ '?url=' + encodeURIComponent(url)
+ '&callback=?';
$.getJSON(hatebu_url, function(data) {
var list = data['bookmarks'];
Deferred.loop({end: list.length}, function(n, o) {
var f = {};
f.user = list[n]['user'];
f.message = list[n]['comment'];
f.image = 'http://www.hatena.ne.jp/users/' + f.user.substring(0,2) + '/' + f.user + '/profile_s.gif';
return Deferred.call(document.Yowl.notify,
"HatenaBookmark",
"はてなブックマーク by " + f.user,
f.message,
"hatebu",
f.image,
false,
0).wait(1);
});
});
}
--></script>
この「display-yui.js」の代わりに「display-systray.js」を使うと、システムトレイに通知される様になっています。
試したい方は上のURLから常駐アプリケーションをダウンロード/インストールして試してみて下さい。