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 | Comment(0) | ツール | このブログの読者になる | 更新情報をチェックする

2012年01月26日


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

▼ 以下からダウンロードして、エクスプローラから実行するとインストールされます
http://winofsql.jp/wsf/ie_twittre_embed.wsf

▼ 古いデザイン


▼ 新しいデザイン



コードのテストボタンは、HTMLとJavaScriptを実際に表示テスト
する為のページを開きます

操作

Twitter のタイムラインで、日付部分で右クリックして、『Twitter
用埋め込みコード取得』で実行します。詳細ページでは、どこのリンク
でもいいので右クリックして下さい。

自分はまだ古いデザインのままなので、新しいデザインは検証
できていません。古いデザインでは貼り付けコードを取得でき
無いので作成しました。

以下は取得した結果を貼り付けています
ブログに貼り付けて解りましたが、この内容は float しているようで、
DIV で囲って、使っている高さを確保しないと、他のコンテンツと重な
ってしまったりするので注意して下さい。


API

GET statuses/oembed | Twitter Developers



posted by at 2012-01-26 01:12 | Comment(0) | IE拡張 | このブログの読者になる | 更新情報をチェックする

2012年01月13日


bit.ly のブックマーレットを開けて見てみると、『tumblr』のを転用してました

解りやすく整形しましたが、元々"tumblrzzz" は、"tumblr" なので、そこは絶対一致
しないように変更されています。というか、そこは必要無いのですが、オリジナルを
崩さずに使えるようにしたみたいです。

結局、w.open で url と 選択した部分をパラメータで渡すという良くできた処理にな
っています。( 失敗すると、l.href=u で表示ページの変更 )

これは、ブックマークレットの雛型として優秀なもので、ページ上で選択した部分を
encodeURIComponent でエンコードして他のページに渡す為の処理です。結局 bit.ly
では、表示しているページの URL を渡していますが、必要に応じてどんな情報でも
GET コマンドで渡す事ができます。

覚えておくとどこかで必ず使えていいと思います。
var d=document;
var w=window;
var enc=encodeURIComponent;
var e=w.getSelection;
var k=d.getSelection;
var x=d.selection;
var s=(e?e():(k)?k():(x?x.createRange().text:0));
var s2=((s.toString()=='')?s:('%22'+enc(s)+'%22'));
var f='http://bit.ly/';
var l=d.location;
var p='?v=3&u='+enc(l.href) +'&s='+enc(d.title)+'%20'+s2;
var u=f+p;
try{
	if(!/^(.*\.)?tumblrzzz[^.]*$/.test(l.host))
		throw(0);
		tstbklt();
}
catch(z){
	a =function(){
		if(!w.open(u))
			l.href=u;
	};
	if(/Firefox/.test(navigator.userAgent))
		setTimeout(a,0);
	else
		a();
}


単純に選択部分を転送するブックマークレット

javascript:var%20d=document,w=window,enc=encodeURIComponent,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),s2=((s.toString()=='')?s:(enc(s))),f='http://winofsql.jp/sel.php',l=d.location,p='?s='+s2,u=f+p;try{if(!/^(.*\.)?tumblrzzz[^.]*$/.test(l.host))throw(0);tstbklt();}catch(z){a%20=function(){if(!w.open(u))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();}void(0)


posted by at 2012-01-13 23:19 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

bitly の URL 短縮結果のカスタマイズ

bitly では、アカウントを持っていると、以下のような 1xfQZVR 部分を簡単にカスタマイズして他の人がまだ使って無い文字列に変更する事ができますが、自分でドメインを所有していて、その管理ができる場合は、短縮 URL のドメイン部分もカスタマイズする事ができます

q.winofsql.jp/1xfQZVR



Settings ページには以下のようなセクションがあり、最初は『追加』ができるようになっていて、一つ追加すると、編集のみが可能になっています。追加直後、デフォルトの短縮 URL のドメインとなりますが、bit.ly に戻してもいいし、他の bitly.comj.mp を使っても同じ結果となります。



本来は、もっと短いドメインを取得して使うのだと思いますが、とりあえず自分のドメインを使っておくと、あらゆる URL は自分のサブドメインとして表現できる事になるので、いろいろな宣伝にも使えると言ったところだと思います。

ちなみに、アマゾンのページを短縮すると、amzn.to/MOVIEsuper8 のようになります


ランダム部分もカスタマイズする

このアマゾンの URL のように、1xfQZVR 部分も変更できるので実行してみましょう。



q.winofsql.jp/CustomMyShortDomain


カスタマイズ文字列は早いもの勝ち

大文字小文字が区別されるので、同じ意味でいくつもトライできます。さすがに例えば Heart なんてのは取れませんが、q.winofsql.jp/HEARt なら取れたりしますし、長い文字列だと結構取れたりもします。

また、案外こういうのも取れたりします => q.winofsql.jp//MOVIE1


削除はできないけれど

同じ URL に違う文字列を設定できます。つまり、最初のランダム文字列も生きています。そうなると、解らなくなるので少なくとも最初は アーカイブに移動して管理するといいと思います。
(できればどこかに登録しておくといいとは思います。)
パーソナルリンク : PC に保存されるリンクリストです



bit.ly/winofsql
bitly.com/winofsql
j.mp/winofsql
q.winofsql.jp/winofsql



posted by at 2012-01-13 21:42 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します