まめ畑

■[javascript][Jetpack][ニコニコ動画]Jetpackでニコ動再生数表示Jetpack Featureを作ってみた 21:48

Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記の記事を見て「Jetpack」なる物がリリースされた事を知ったので、早速使ってみた。

JetpackはJavascriptでFireFoxの拡張が作れるという物。しかもjQuery付き。

公式サイトはDeveloper Hub :: Add-ons for Firefox

作ったものはこちらからインストール出来ますhttp://mame-lab.com/jet/

簡単な説明

先ずは上記公式サイトから拡張をインストール。

(Jetpackの設定ページを開くと、Fx3.5とFirebug1.4preを推薦というメッセージが出ますが動きます)

デバッグなどはFirebugを使うと便利です。

Jetpack FeatureをインストールするにはグリモンみたいにFx上にドロップするのではダメで、インストール用のページが必要です。

しかし、JetpackのページのDevelopタブでフォームにコードを入力する事でデバッグできます。

設定ページは「about:jetpack」で開きます。

こんな感じ。

Developタブを開くと

赤丸で囲んでいるところをクリックすると実行できます。

about:jetpackを開くと自動的にFirebugが開くと思いますが、このフォームで実行して出たエラーや警告などはFirebug上に出力されます。

Jetpack Featureの管理もこのページで行います。

Installed Featureタブ内で、uninstall出来ます。

また、インストール元サイトへも行けます。

しかし、uninstallしただけでは、完全には消えておらず無効になっているだけなので、完全に削除するにはPurgeします。

早速作ってみた

早速作ってみました。

こんな感じで、ステータスバーに再生数が表示されます。

10分おきに更新されます。

クリックするとニコニコ動画TOPページが新しいタブで開きます。

インストールボタンを押すと、赤い警告ページが開きますが、コードを確認して、ページ下のインストール続行のボタンを押せばインストール完了です。

コードはこんな感じです。

(function(){
	function updatePlayCounter(doc){
		$.get("http://mame-lab.com/ncount/nico_count.txt",function(count){
			if(count){
				var play_count = count.split("=");
				$("#play_count", doc).text(play_count[1]);
			}
		});
	}

	Jetpack.statusBar.append({
		html: <>
			<img src="http://www.nicovideo.jp/img/favicon.ico"/>
			<span id="play_count"></span>
		</>,
		onReady: function(doc){
			$(doc).click(function(){
				Jetpack.tabs.open("http://www.nicovideo.jp/");
				Jetpack.tabs[Jetpack.tabs.length-1].focus();
			});
			$("#play_count", doc).css({
				position: "absolute",
				top: "1px",
				left: "20px",
				fontSize: "10pt",
				cursor: "pointer"
			});
			updatePlayCounter(doc);
			setInterval(function(){updatePlayCounter(doc);}, 10*60*1000);
		},
		width: 120
	});
})();

簡単に作る事が出来ます。

インストールページには

<link rel="jetpack" href="jsファイル">

を書くだけです。

困った時に

実は、何回かJetpackが壊れてしまい、設定ページが上手く動作しなくなってしまいました。

アドオンの管理から削除して、再インストールしても直らなかったのですが、「C:\Documents and Settings\ユーザ名\Application Data\Mozilla\Firefox\Profiles\*****.default」中の

1. jetpack_ann.sqlite
2. jetpack-editor-code.txt
3. jetpack-tutorial-code.txt

の3つのファイルが残っていたので、これらを削除して再インストールを行うと元に戻りました。

ツイートする