2012年01月28日


Twitter用埋め込みコードを取得する Firefox アドオン

▼ Firefox で以下をクリックして下さい(ダウンロードして、Firefox にドラッグ&ドロップでも OK )
http://winofsql.jp/download/twitter_embed.xpi





IE で作ったものとほぼ同等の機能を Firefox の アドオンで実装しました。
Firefox の拡張は今回久しぶりに作ってみて、昔とかなり開発環境に変化が
ありました。いい事も悪い事もあったのですが、悪い事の代替えの為に、雛型
として使えるように考慮して作成しました。

ダウンロードして、拡張子を .zip に変更して解凍すると MKEditor のプロ
ジェクトが同梱されています。機能としては、以下のようなものが主になりま
す。

1) 右クリックのポップアップメニュー
2) そのページが特定のページ以外では表示しない
3) 右クリックした場所のオブジェクトの処理
4) ダイアログを表示する
5) クリップボード
6) タブを開く処理
7) xmlhttprequest による Twitter API 呼び出し

画面イメージはインストール後にアドレスバーに
chrome://sk1/content/sk1_app.xul と入力すると確認できます。
さらに、Firebug で中を見ると実行時の表記が解りやすいと思います。
var targetWindow;
// *********************************************************
// ウインドウの初期処理
// *********************************************************
function onLoad() {
	targetWindow = window.arguments[0];

	// *************************************************
	// 右クリックした場所のデータ
	// *************************************************
	var str = "";
	var tag = targetWindow.document.activeElement.tagName;

	switch( tag ) {
		case "A" :
			str = targetWindow.document.activeElement.href;
			break;
		default:
			str = targetWindow.document.activeElement.innerHTML;
			break;
	}

	// *************************************************
	// ID を含むリンクである事をチェック
	// *************************************************
	if ( str.search("\/status\/") < 0 ) {
		document.getElementById("text").value = "対象リンクがありません";
		return;
	}

	// *************************************************
	// ID を取得
	// *************************************************
	var arr = str.split("/");

	str = arr[arr.length-1];

	// *************************************************
	// API で埋め込みコードを取得
	// *************************************************
	var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance();
	req.open('GET', "https://api.twitter.com/1/statuses/oembed.xml?maxwidth=550&align=left&id=" + str, false);
	req.send();

	var resultXML = req.responseXML;
	str = resultXML.getElementsByTagName("html")[0].firstChild.nodeValue;
	document.getElementById("text").value = str;

	if ( document.getElementById("text").value == '' ) {
		document.getElementById("text").value = "★ データの取得に失敗しました。再試行して下さい"
	}

}

// *********************************************************
// ユーザが OK をクリックした時だけに一度実行される
// *********************************************************
function onOK() {
	close();
}

// *********************************************************
// クリップボードへのコピー
// *********************************************************
function setData() {

	const gClipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].
		getService(Components.interfaces.nsIClipboardHelper);
	var text_data = document.getElementById("text").value;
	gClipboardHelper.copyString(text_data);

}

// *********************************************************
// タブを開いて、そこを選択する
// *********************************************************
function openTab() {

	var text_data = document.getElementById("text").value;
	document.getElementById("codeTestIframe").contentWindow.postMessage(text_data,"*");
	window.opener.gBrowser.selectedTab = 
		window.opener.gBrowser.addTab("http://toolbox.winofsql.jp/tool_html_links.php?p=0&ns=1&ht=300#code_test");
	close();

}


関連する記事

Twitter用埋め込みコードを取得する IE拡張





posted by at 2012-01-28 22:56 | ツール | このブログの読者になる | 更新情報をチェックする