JetpackのslideBarとSimpleStorage

Jetpack Featureを作っていて、statusBarしかいじれないのかと思っていたら、slideBarという機能が追加されてました。
そして、simpleStorageというJetpackの自体で情報の保存が出来るようになりました。SQLiteを使用しているみたいです。

まず、slideBarですが、これはFxの左側に小さいアイコンが出現しクリックするとスライドして展開されるというものです。

タブエリアの左はじに矢印があるので上にマウスをのっけると、スライドして小さいアイコンが出現します。
登録してあるFeature分表示されます。
後は、実行したいFeatureのアイコンをクリックすると展開されます。
表示エリアが大きいので、メールのチェックや、TODOの書込みFeatureを作ると便利そうです。
マウスをFeatureの画面外に持っていくと閉じます。(Feature側で表示しっぱなしにも出来ます)

試しにニコニコ動画の毎時ランキングを表示するものを作ってみました。
突貫工事なので、見た目はおいおい直していきます。

コードは

jetpack.future.import("slideBar");

const SLIDE_BAR_ICON = "http://www.nicovideo.jp/img/favicon.ico";

function getRanking(doc){
	$.ajax({
		url: "http://www.nicovideo.jp/ranking/view/daily/all?rss=2.0",
		data: {},
		dataType: "xml",
		beforeSend: function(xhr) {
			xhr.setRequestHeader("X-Requested-With", "");
		},
		success: function(feed){
			$("#rank", doc).html("").css("text-align", "left");
			$(feed).find("item").each(function(i, item){
				if($(item).find("link").text().match(/(\D{0,2}\d+$)/)) {
					var id = RegExp.$1;
					var title = $(item).find("title").text();
					$("#rank", doc).append(title +" (" + id  + ")<br /><br />");
				}
			});
		},
		error: function(xhr, status, e){
			jetpack.notifications.show({
				title: "Error!",
				body: status,
				icon: SLIDE_BAR_ICON
			});
		}
	});
}

jetpack.slideBar.append({
	icon: SLIDE_BAR_ICON,
	html:<>
		<style><![CDATA[
			scrollbar * { display: none !important; }
			body { width: 300px; font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; }
			#title { font-size: 14px; text-align: center; font-weight: bold; color: #556666; }
			#ranking{ text-align: center; }
			#renew { background: #CCCCCC url(http://www.nicovideo.jp/img/btn/bg_submit_01.gif) repeat-x scroll 0 0;
					 border-color: #CCCCCC #999999 #666666;
					 border-style: solid;
					 border-width: 1px;
					 text-align: center;
					}
			#rank{ background: #fff; -moz-border-radius: 10px; width: 90%; }
		]]></style>
		<body>
			<div id="ranking">
				<span id="title">ニコニコ動画再生数ランキング(毎時)</span>
				<div id="rank">ボタンを押してください</div><br />
				<input id="renew" type="button" value="Renew" />
			</div>
		</body>
   </>,
	onSelect: function(slide){
		slide({size:300, persist:false});
	},
	onReady: function(slide){
		$("#renew", slide.doc).click(function(e){
			if(e.button == 2) return;
			getRanking(slide.doc);
		});
	}
});

ポイントは

jetpack.future.import("slideBar");

をimportする事です。
標準で組み込まれていないので、読み込みが必要です。

後はアイコンが選択された時の処理

onSelect: function(slide){
		slide({size:300, persist:false});
	}

この関数では展開するサイズをしていします。
「persist」はオプションなのでなくてもいいのですが、これをtrueにするとマウスをFeatureから外しても表示されたままになります。
デフォルトではfalseです。
また、slideBar内のDOMなどにアクセスする場合は、この例では「slide.doc」プロパティを使用します。
「slide.icon」でiconが取得できます。
jetpack.slideBar.appendには「url」プロパティもあり、ここにアドレスを指定することで表示するアドレスを指定出来ます。iframe書かなくてもよくなります。

simpleStorageは

//import
jetpack.future.import("storage.simple");

//取得
jetpack.storage.simple.get("KEY", function(KEY, VAL){});

//保存
jetpack.storage.simple.set("KEY", "VAL", callBack);

簡単ですね。
setは保存した後に呼び出す関数も指定出来ます。

どんどん機能が追加されてますね。

まめ畑

ゆるゆると書いていきます

JetpackのslideBarとSimpleStorage