たったの40行！ jQueryでニコ動の右上を表示するChrome拡張作成法（イマイチ）

jQueryはスクレイピングのしやすいライブラリです。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.6.1.js"></script>
  </head>
    <div id="bukkonuki">悲しいけれど、ぶっこぬかれる運命なのよね</div>
    <div id="result"></div>
    <script>
      $.get(location.href, function(html) {
        $('#result')
          .html(
            $('#bukkonuki', '<div>' + html + '</div>').html()
          );
      });
    </script>
  </body>
</html>

上のhtmlは適当なところに設置（ローカルじゃ駄目です）して見てみれば動きます。ざっと以下の動作。

自分自身をajaxで取得
取得したhtmlをjqueryのcontextにつっこみ、ID指定でスクレイピング
bukkonukiの中身をresultに表示

でも、jQueryのgetとかajaxとかってのは、XMLHttpRequestを利用しているので、クロスドメインが出来ません。
自分とこにあるコンテンツをスクレイピングする意味なんてほとんど無いので使えませんね。残念。

……となるのですが、こいつが活用できる場所があります。それが以下。

node.jsなどのサーバサイドjs
Chrome Extension

で、今回はChrome拡張で使ってみます。ということで……

たったの40行！ jQueryでニコ動の右上を表示するChrome拡張作成法

またかよｗと言われそうだけど、日曜大工で発表した関係で、簡単に作れるものを紹介してみようかなと。

以下の３ファイルを作成して、
jquery-1.6.1.min.jsを同じところにおいて、
適当なicon.pngを作成すればOK。

background.html

<script src="jquery-1.6.1.min.js"></script>
<script>
	var migiue = 'Now Loading ...';
	
	(function() {
		function getMigiue() {
			$.get('http://www.nicovideo.jp/migiue', function(html) {
				migiue = $('#migiueText', '<div>' + html + '</div>').text();
			});
		}
		
		getMigiue();
		
		setInterval(getMigiue, 24 * 60 * 60 * 1000);
	})();
</script>

popup.html

<!doctype html>
<html>
	<head>
		<style>
			#migiue {
				color: black;
				text-decoration: none;
				font-weight: bold;
				white-space: nowrap;
			}
		</style>
	</head>
	<body>
		<a href="http://www.nicovideo.jp/migiue" target="_blank" id="migiue"></a>
		<script>
			document.getElementById('migiue').innerText = chrome.extension.getBackgroundPage().migiue;
		</script>
	</body>
</html>

manifest.json

{
  "name": "niconico migiue",
  "description": "niconico migiue",
  "version": "0.0.1",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },
  "background_page": "background.html",
  "permissions": [ "http://www.nicovideo.jp/migiue" ]
}

実行結果

こんな感じです。

大事な話

外部公開するときは気をつけてください。
スクレイピングを使ってサイトを作る場合と違い、各自がアクセスに行くので、相手側に迷惑をかける場合があります。
上のスクリプトも、backgroundで取得したものを使い、かつ１日に１回のリロードとして、アクセスを極力減らしています。
なので、この技術が生きるのは、使うメンバーが限定している個人利用の場合が多いでしょう。私も活用してるのは社内向けのExtensionのみ。
とはいえ、サーバサイドjsで使うのも若干癖があって微妙なんだよな。
うーん、イマイチ。