Aug 092012
 

Mountain Lionに搭載された通知機能をJavascript(JQuery)で活用する。Webサイト(HTML)からOSに通知する方法。トップシェアのChromeも対応。もちろんIEは対応していない。

Objective-Cでの話題は一旦置いておいて、JQueryでの対応方法。使いどころはアイデア次第だが、非同期で更新する仕組みやリロードする仕組みと連動すればデータ受信をもとに通知イベントを発生させる使い方もできる。大方、それなりに重いWEBアプリやクラウド経由の処理終了をお知らせするやタイムラグのあるネットワーク越しの相手から受信したデータを表示したタイミングでお知らせするのが自然な使い方ではないか。

JQueryの準備

JQueryファイルを入手しフォルダに格納。HTMLに記載。(全文は後半に掲載。)

<script src="js/libs/jquery-1.7.2.min.js"></script>
<script src="js/jquery.notify.js"></script>

イベントの準備

何はともあれボタンを押したら通知が起こるようにする。ここではaタグで用意。

<section>
<p><a href="#" class="button" id="call">Call</a></p>
</section>

クリック処理と通知発生

id=”call”のタグをクリックした時に通知が始まる。その処理は3段階。

  1. $.notifications.requestPermission ←通知許可を行う
  2. $.notifications.newNotification ← 通知を作成し通知オブジェクトを返す
  3. show() ← 通知オブジェクトを表示する(OSに通知)
<script type="text/javascript">

	$(document).ready(function() {

		$('#call').on('click', function() {

			$.notifications.requestPermission(function(){

				var title = $('#contents>h1').html();
				var content = $('#contents>p').html();
				var notify = $.notifications.newNotification('', title, content);

				if (notify!==false) {

					notify.show();

				};
			});
			return false;
		});
	});

	</script>



ソース全文

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>

</head>
<body>
	<section>
		<p><a href="#" class="button" id="call">Call</a></p>
	</section>
	<section id="contents">
		<h1>Blog Updated</h1>
		<p>This is new post.</p>
	</section>

	<script src="js/libs/jquery-1.7.2.min.js"></script>
	<script src="js/jquery.notify.js"></script>
	<script type="text/javascript">

	$(document).ready(function() {

		$('#call').on('click', function() {

			$.notifications.requestPermission(function(){

				var title = $('#contents>h1').html();
				var content = $('#contents>p').html();
				var notify = $.notifications.newNotification('', title, content);

				if (notify!==false) {

					notify.show();

				};
			});
			return false;
		});
	});

	</script>
</body>
</html>

コメント

個のコメント

Powered by Facebook Comments

 Posted by at 20:53

Sorry, the comment form is closed at this time.