Firefox の Jetpack 拡張機能のケーススタディ: Gmail メール リマインダー
Gtalk ソフトウェアの下部には、Gmail メール リマインダー機能という非常に優れた実用的な機能があります。 Gmail 内の新しい未読メールの数は定期的に更新されます。
.png)
この機能を Firefox に移植したらどんなに面白いことになるか想像してみてください。
最初のステップは、ステータス バーにアイコンとデータを表示することです
「Firefox 用 Jetpack 拡張機能を作成する方法」の記事を通じて、以下を簡単に作成できます。
Jetpack.statusBar.append({
html: '
width: 55, //ステータスバーの幅は55です
onReady: 関数(ウィジェット) {
$("#count", widget).css({ //未読の新着メールの数にスタイルを追加します
カーソル: "ポインタ"、
パディング左:"4px",
fontFamily: "タホマ、Arial、サンセリフ",
垂直配置: "上",
フォントサイズ: "10px",
lineHeight:"18px",
});
}
});
2 番目のステップは、Gmail データを取得し、未読の新着メールの数を更新することです。
Gmail メール フィードを通じて取得できます (ログインが必要です): https://mail.google.com/mail/feed/atom
フィードのソース コード内の fullcount タグは、現在の未読の新着メールの数を記録するために使用されます。
OK、まずデータソースが利用可能になります。次に、おなじみの Ajax テクノロジを使用してデータを取得し、指定された要素に割り当てます。
関数更新(ウィジェット) {
var ウィジェット = $(ウィジェット);
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // 未読の新着メールの数を記録するノード
if(el){
var newcount = parseInt(el.get(0).textContent);
widget.find("#count").text(newcount); //指定された要素に代入
} else { //ログインしていない場合は「ログイン」を表示
widget.find("#count").text( "ログイン" );
}
});
}
また、いくつかの最適化を行うこともできます。たとえば、未読の新しい電子メールの数が元の電子メールの数よりも多い場合、プロンプト情報を追加するなどです。
Jetpack.notifications.show(options) メソッドは、プロンプト情報に使用されます。 options パラメータには、次の 3 つの属性があります。 title (文字列): 通知アイコンのタイトル (URL): 通知アイコンの URL (文字列)。 : 通知の件名内容。
最適化されたコードは次のとおりです。
関数更新(ウィジェット) {
var ウィジェット = $(ウィジェット)、
Notice = function(msg) { // 通知を定義するためのパブリック メソッド
ジェットパック.notifications.show({
タイトル: 「Gmail」、
本文: メッセージ、
アイコン: " http://mail.google.com/mail/images/favicon.ico "
});
};
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // 未読の新着メールの数を記録するノード
if(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // 未読の新しいメールの数が元のメールの数よりも多い場合、プロンプトはどこから来ますか?
var sender = $(xml).find("name").get(0).textContent;
Notice("+送信者からの新しいメッセージ);
}
カウント = 新しいカウント;
widget.find("#count").text(count); //指定された要素に代入
} else { //ログインしていない場合は、ログインを求めるプロンプトが表示されます
widget.find("#count").text( "ログイン" );
Notice("Gmail にログインしてください");
}
});
}
ステップ 3: スケジュールされた更新データを設定する
データが 1 分ごとに更新されるように設定します。
setInterval( function() { update(ウィジェット) }, 60*1000 );
ステップ 4: 拡張機能をクリックした後にリンク ウィンドウを設定する
$(widget).click(function() { //クリック展開後のリンクウィンドウを設定
Jetpack.tabs.open(" http://mail.google.com ");
ジェットパック.タブ[ ジェットパック.タブの長さ-1 ].focus();
});
Jetpack.tabs はブラウザ ウィンドウのタブ オブジェクト、.open(url) は新しいブラウザ ウィンドウのタブを開くメソッド、.focus() はこのタブを現在のタブとして選択するメソッドです。
OK、Firefox の Jetpack 拡張機能 - Gmail 電子メール リマインダーは、4 つの簡単な手順で簡単に完了できます。
コード全体は次のとおりです。
変数カウント = 0;
関数更新(ウィジェット) {
var ウィジェット = $(ウィジェット)、
Notice = function(msg) { // 通知を定義するためのパブリック メソッド
ジェットパック.notifications.show({
タイトル: 「Gmail」、
本文: メッセージ、
アイコン: " http://mail.google.com/mail/images/favicon.ico "
});
};
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // 未読の新着メールの数を記録するノード
if(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // 未読の新しいメールの数が元のメールの数よりも多い場合、プロンプトはどこから来ますか?
var sender = $(xml).find("name").get(0).textContent;
Notice("+送信者からの新しいメッセージ);
}
カウント = 新しいカウント;
widget.find("#count").text(count); //指定された要素に代入
} else { //ログインしていない場合は、ログインを求めるプロンプトが表示されます
widget.find("#count").text( "ログイン" );
Notice("Gmail にログインしてください");
}
});
}
Jetpack.statusBar.append({
html: 'http://mail.google.com/mail/images/favicon.ico"/>
width: 40, //ステータスバーの幅は40で、3桁の幅が予約されています。
onReady: 関数(ウィジェット) {
$("#count", widget).css({ //未読の新着メールの数にスタイルを追加します
カーソル: "ポインタ"、
パディング左:"4px",
fontFamily: "タホマ、Arial、サンセリフ",
垂直配置: "上",
フォントサイズ: "10px",
lineHeight:"18px",
}); $(widget).click(function() { //クリック展開後のリンクウィンドウを設定
Jetpack.tabs.open(" http://mail.google.com ");
ジェットパック.タブ[ ジェットパック.タブの長さ-1 ].focus();
});
更新(ウィジェット);
setInterval( function() {更新(ウィジェット) }, 60*1000 );
}
});
テストデモ: http://www.planabc.net/lab/jetpack/gmail/
Jetpack の API の詳細については、about:jetpack ページの API リファレンス タグのセクションを参照してください。
ケースのソース コードはhttps://jetpack.mozillalabs.com/demos/gmail-checker.jsから取得しています。