2012年02月12日


Google Chrome 拡張機能 『Awesome Screenshot』: (ページを画像化) の日本語化が中途半端なので修正しました

インストールページ

アイコンからポップアップで、メニューが三つ表示されて、いずれも英語なので
以下の手順で変更します。

1) 拡張機能ページを開く( chrome://settings/extensions )
2) デベロッパーモードをチェック
3) 詳細を表示
4) id をメモまたはコピーして保存しておく
5) Google Chrome の環境フォルダ をダウンロード
6) ダウンロードしたスクリプトを実行して、Extensions フォルダに移動
7) id と一致するフォルダに入り、最終的に『_locales\ja\messages.json』を開く
8) 61行目と250行目を日本語に変更してUTF8N で保存

メニューは3つ項目があるのですが、この messages.json にエントリが無い上に
この機能そのものが動いていないようなので、popup.html よりメニューを削除
します。( この機能は他の機能で代替えされています )





最後に画像を保存するページも日本語化されておらず、ここは直接 HTML
を変更する必要があるのですが、head 要素の中の先頭に以下の meta 要素
を挿入します( edit.html )
<meta charset="UTF-8">

あとは、267 行付近の記述を日本語に変更して、UTF8N で保存します



この拡張機能そのものはいろいろ便利なもので、キャプチャ直後に赤く四角で
強調したり、矢印を引いたり、テキストを書き込んだり、ぼかしを入れたり、
必要なものは一通りそろっています。





posted by at 2012-02-12 20:27 | Comment(0) | Google | このブログの読者になる | 更新情報をチェックする

2012年02月01日


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

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



IE と Firefox で作ったものとほぼ同等の機能を Chrome の 拡張で実装しました。
IE と Firefox はかなり作り込んだ経験を持ってますが、Chrome の拡張は手強か
ったです。特に、直接 WEB ページ上のオブシェクトを操作できないので、Flex の
ようなイベントの連鎖で作業を書いていかないといけないので大変でした。

でも、おかげでいろいろノウハウも手に入ったので解説するのが楽しみです。

ダウンロードして、拡張子を .zip に変更して解凍してサンプルとして見た
ほうが早いとは思いますが、さすがにソースコードだけでは理解不能な部分
が多いです。Google のドキュメントを見ながらですらやっとの思いで完成
させましたし( 実際バグっぽい部分の対症療法も残っていますし )

この処理に特に必要は無かったのですが、サンプルとして使いたかったので、
WEBページと拡張の対話のバリエーションも組み込んであります。マニフェス
トファイルの内容が重要になるので、ドキュメントの参照は必要です。

機能実装の必要から、別ドメイン間のデータ交換テクニックである、メッセ
ージのポストと、ローカルストレージの利用はおすすめです。

1) 右クリックのポップアップメニュー( リンクのみのメニュー )
2) メニューから一旦 WEB 上に組み込んだ関数を呼び出す(強制呼び出し)
3) WEB ページの情報を取得して、再び拡張を呼び返す(送信)
4) 受信してからモーダルダイアログ(実際はモーダルにはならない)を開く
5) XMLHttpRequest で Twitter API を呼び出してデータを取得
6) クリップボードにコピー
7) 別ドメインのページをデータ交換してから呼び出す




関連する記事

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



posted by at 2012-02-01 00:26 | Comment(0) | ツール | このブログの読者になる | 更新情報をチェックする

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