Web scratch

Archive for 11月, 2009

Twitterのウェブサイトをクライアントとして使うのに役立つGreasemonkeyとCSS | Web scratch

http://efcl.info/2009/0317/res613/

以前書いたような記事と似たような記事を書きましたが、今回はシンプルにサイドバーでTwitterのWebページを表示する方法です。
Greasemonkeyがサイドバーでも動作するようになったので、かなり快適になり、またWebページを表示するだけなのでAPIを使わないのが特徴です。

最終的な似た目

まずはCSSでサイドバーに合わせた形にする必要があります。

nukumori wiki – Firefoxのサイドバーでtwitter.comするCSS

http://nukumori.org/hiki/?TwitterSidebarCSS

にあるCSSを使ってサイドバーに合わせたものにしていきます。
使い方は書いてあるのでそれをよく読んでCSSを反映させます。
(ブックマークするのはhttp://twitter.com/?sidebar という適当なクリエを付けたURLです。
http://twitter.com/だと通常見るときと混ざってしまうため。)

ブックマークではなくCustom Buttonsを使ってtwitterをサイドバーに表示するボタンを作成する方法もあります。
Twitterをサイドバーに表示するボタンを作成しておきました。

• Twitter sidebar

• userChrome.css
  少し自分向けに修正したCSS(通常のTwitterページ向けも混ざってる)

次により使い易くするためのGreasemonkeyを入れていく。

• Twitter Enhancements: Press Ctrl + Enter to Send Update.user.js

Ctrl+Enterでポストする。

• Twitter Change Style.user.js

自分の投稿や、特定のワードが入ってる投稿を色分けする
tyoro.exe: 投稿内容からマッチングしてスタイル変えるグリモン書いたよ！

• TwitterAutoReloader.user.js

自動更新の差分を自動で取得
Twitter webの自動差分更新Greasemonkeyスクリプトを書いてみた « H.LOG

自分は入れてませんが基本的にはTwitterのWebページと同じなので、

• PBTweet+
• troynt’s Twitter Script

など入れるのもありかもしれない。

サイトに新たに機能を付け加えるのではなくて、元々サイトに存在してる関数を少しだけいじってやった方が簡単な場合があります。
そういうときにGreasemonkeyからサイトに元々ある既存関数を上書きする方法です。

SmartLDR更新 – 素人がプログラミングを勉強するブログ

http://d.hatena.ne.jp/javascripter/20090324/1237903880

ここで紹介されているlocation.hrefとjavascript:プロトコルを使ったハックを使うと比較的簡単に関数の上書きができます。
例えばmyFuncという関数を上書きしたい場合は以下のようにjavascript:プロトコルからmyFuncを再定義すると上書きができます。

function evalInPage(fun) {
  location.href = "javascript:void (" + fun + ")()";
}

evalInPage(function () {
myFunc = function(){
	上書きする内容
}
});

location.hrefとjavascript:プロトコルを使って実行するとXPCNativeWrapperの外側でスクリプトを評価できる(Greasemonkey内の評価ではなくなる)ので、unsafeWindowを使わなくても既存の関数に触ることができます。
逆にGreasemonkey内の評価ではなくなるので、GM_関数は使えなくなります。(感覚的にはブックマークレットを実行するのと同じ)
これを同期的に扱いたいならJSDeferredを使って下のように組み込むといいらしい。

unsafeExec on JSDeferred – 枕を欹てて聴く

http://d.hatena.ne.jp/Constellation/20090326/1238073714

9washのRTフォーマットを一般的なものに変更するのにこの方法を使ってみた。
9washはブラウザから利用できるWeb twitterクライアントです。
軽くて使い易いので、いいクライアントだと思いますが、RTのフォーマットが[RT:数字id @ユーザー名]みたいになっていて、使いにくかったのでその部分の関数を上書きして、よく使われているようなRT @ユーザー名:の書式に変えるようにしてみました。

• 9wash RT format.user.js

9wash twitter clientについて

http://tw.9wash.com/about

ニコニコ動画の再生ページに埋め込まれている情報 | Web scratch のマイリストページ版みたいなものです。
マイリストにもAPIがありますが(ニコニコ動画のAPIまとめ | Web scratch )マイリストページにいるならば、わざわざAPI叩かなくてもいろんな情報が取得できます。
なんでわざわざDOMから情報を取ってるかというと、変更の影響を受けにくかったりするからです。
ここでのマイリストは人が公開してるマイリストのこと。

my
	Mylist.groupList
		id (number): マイリストID
		user_id (number): マイリストのユーザーID
		name (string): マイリストのタイトル
		description (string): マイリスト説明文
		public (boolean): true // 公開状況
		default_sort (number): 1 (1-17)
		create_time (number): UNIX時間(util.unix2で戻せる)
		update_time (number): UNIX時間
		icon_id (number): 0
		sort_order (number): 0
	my.currentItems
		[0]...配列
			item_type (number): 0
			item_id (string): 接頭辞がない動画番号(常時)
			description (string): マイリスト登録者による説明文
			item_data
				video_id (string): 接頭辞がある動画番号(sm数字)
				title (string):  動画タイトル
				thumbnail_url (string): サムネイルURL
				first_retrieve (number): 投稿日時(UNIX時間)
				update_time (number): 更新日時(UNIX時間)
				view_counter (string): 再生数
				mylist_counter (string): マイリスト数
				num_res (string): コメント数
				group_type (string): default
				length_seconds (string): 再生時間(秒)
				deleted (string): 0 (削除状態0-3?)
				last_res_body (string): 最近のコメント(文字列)
				watch_id (string): 接頭辞なしの動画番号(コミュ、マイメモリー以外だと接頭辞がある)
			watch (number): 0
			create_time (number): マイリスト登録日時(UNIX時間)
			update_time (number): マイリスト更新日時(UNIX時間)

Firebugなどから、console.dir(my)などして構造を確認しておくといいです。
DOMから動画情報を取得するのを少しだけ手助けする関数群を置いておきます。(思ったより役に立たない)

(function () {
	var w = unsafeWindow;
	Mylist = {
		// マイリストの属性
		/*
		Mylist.groupListのツリー
			id (number): マイリストID
			user_id (number): マイリストのユーザーID
			name (string): マイリストのタイトル
			description (string): マイリスト説明文
			public (boolean): true // 公開状況
			default_sort (number): 1 (1-17)
			create_time (number): UNIX時間(util.unix2で戻せる)
			update_time (number): UNIX時間
			icon_id (number): 0
			sort_order (number): 0
		*/
		// Mylist.groupList - my.CurrentGroupのコピー
		groupList: function () {
			return w.my.currentGroup;
		},
		/*
		my.currentItemsのツリー
			item_type (number): 0
			item_id (string): 接頭辞がない動画番号(常時)
			description (string): マイリスト登録者による説明文
			item_data
				video_id (string): 接頭辞がある動画番号(sm数字)
				title (string):  動画タイトル
				thumbnail_url (string): サムネイルURL
				first_retrieve (number): 投稿日時(UNIX時間)
				update_time (number): 更新日時(UNIX時間)
				view_counter (string): 再生数
				mylist_counter (string): マイリスト数
				num_res (string): コメント数
				group_type (string): default
				length_seconds (string): 再生時間(秒)
				deleted (string): 0 (削除状態0-3?)
				last_res_body (string): 最近のコメント(文字列)
				watch_id (string): 接頭辞なしの動画番号(コミュ、マイメモリー以外だと接頭辞がある)
			watch (number): 0
			create_time (number): マイリスト登録日時(UNIX時間)
			update_time (number): マイリスト更新日時(UNIX時間)
		*/
		// Mylist.itemList - my.currentItemsのコピー
		itemList : function(){
			return w.my.currentItems;
		},
	}

	// utility関数群
	utils = {
	  playlength : transPlaylength,
	  unix2 : unixTodate,
	  clone : clone,
	}

	// 再生時間を分秒に変換
	function transPlaylength(length){
		return (length / 60).toFixed(2).toString().split(".").join("分") + "秒";
	}
	// 10桁の数字(UNIXTIME)から2009/10/1 00:00形式で返す
	function unixTodate(x){
		var t=new Date(x*1000);
		return t.getFullYear() + "/" + fillZero(t.getMonth() + 1) + "/" + fillZero(t.getDate()) + " " + fillZero(t.getHours()) + ":" + fillZero(t.getMinutes()) + ":" + fillZero(t.getSeconds());
	}
	// http://d.hatena.ne.jp/javascripter/20080514/1210791575
	// 先頭を0で埋める デフォルト2桁
	function fillZero(num , digit){
		var n = (digit) ? digit : 2;// デフォルト値
		var zero=new Array(n).join('0');//0をn-1文字分つなげた文字列を作る。n==4だと'000'
		var str=zero+num;//zeroとthisをくっつけた文字列を作る。
		var result=str.substr(-n);//strの後ろから、n文字分の文字列を取ってくる。
		return result;
	}
	// オブジェクトのコピーのコピーを作成
	function clone(obj){
		return (typeof uneval == "function") ? eval(uneval(obj)) : false;
	}

})();

gist: 239541 – GitHub

どんな風に使うかというと、上の関数群を読み込んで使用します。
DOMへのアクセスをするものと少しのutility関数群から構成されています。
再生時間を分秒に直したり、UNIX時間で格納されている時間を2009/10/1 00:00形式に直したりするだけです。

// ==UserScript==
// @name           Nico mylist Test
// @namespace      http://efcl.info/
// @include        http://www.nicovideo.jp/mylist/*
// @require        http://gist.github.com/raw/239541/1dab27439133948bd6309f4ba959921a8ce938b9/NicoMylistDom.js
// ==/UserScript==
var t = Mylist.itemList();// DOM my.currentItemsにアクセス
var cpObj = utils.clone(t);// オブジェクトのコピー作成(元の値を残す)
console.log(cpObj.length)
for(var i =0,l =cpObj.length;i<l;i++){
  console.log(i + " : " + cpObj[i].item_data.title + "投稿日 : "+ utils.unix2(cpObj[i].item_data.first_retrieve))
}
cpObj[i-1].item_data.title = "buzz";//コピーしたものを書き換える
console.log(t[i-1].item_data.title)// 元のDOMには影響ない

• Nico mylist Test.user.js

上の関数群のテスト例です。インストールしてマイリストページに行くとコンソールに例が表示されるので参考にどうぞ

FirebugでDOMをtoSource()したときに生成されるJSON形式のようなものがかなり見えづらいので、それを読みやすくコンソールに表示するuserChrome.jsを作成した。
あくまで、見易く表示させることを目的としてたので、整形したものを使うという用途には向いてないかもしれません。

Read the rest of this entry »

FirebugのコンソールタブにあるコマンドラインはちょっとしたJavascriptの動作を確認する際に便利ですが、普段使ってるエディタのように補完やハイライトされないので、少し複雑になると分かりづらくなりますね。
そこで、内容の編集自体はエディタで行いその内容をコマンドラインに反映させるuserChome.jsを作成しました。

• Firebug_editor.uc.js

使い方

1. ダウンロードしたスクリプトに60行目くらいにエディタのパスを設定する場所があるのでパスを入れる
2. Firebugのコンソールタブで大きい方のコマンドラインを開く
3. 右下にEditorというボタンがあるので押す
4. エディタで内容を編集→保存
5. Firefoxにフォーカスを戻すと自動的に反映

下に動作の動画を置いておくので、下を見ればどのように動いてるか分かると思います。

alice0775のスクリプトが元になってるので、Windows以外でも動くとは思います。
ラップする必要があったらしい。

userChrome.jsの話題9 テキストエリアを外部エディタで編集する – alice0775のファイル置き場 – Yahoo!ジオシティーズ

http://space.geocities.yahoo.co.jp/gl/alice0775/view/20070223/1172156543

gist: 235044 – Firebugに外部エディタ起動ボタンを追加するuserChrome.js- GitHub

http://gist.github.com/235044

メモ

Firebug.chrome.$("fbLargeCommandLine").addEventListener('focus', function(){
	Application.console.log("tewt")
}, true);

とかChrome権限でやるとコマンドラインにフォーカスしたときに動作するaddevenetlinerができる。
今回使ってないけど。

Fastladder まわり ( はてなまわり機能追加 ) – KBDAHOLIC – やぬすさんとこ

http://d.hatena.ne.jp/janus_wel/20090111/1231678843

LDR all-in-one Hatena extension.user.jsが動かなくなっていたため、勝手に修正しました。

• LDR all-in-one Hatena extension.user.js

はてなスター周りはばっさりカットしてしまった。
なので、基本的な機能ははてなブックマーク数とコメント表示をするGreasemonkeyというもの。

修正点

Greasemonkeyではwindow.evalが使えない、eval.call(window, src) – はてなダイアリー – 無料で簡単。広告のないシンプルなブログをはじめよう！

http://d.hatena.ne.jp/brazil/20060821/1156164845

JSONをパースするために使われていた上のテクニック部分がエラーを吐いて動いてなかったので、ネイティブJSONを使ってみました。(Firefox3.5～だったかな。)
sabdbox周りの変更が原因らしいです。

gist: 233723 – GitHub

http://gist.github.com/233723

タイトルが変ですが、iPhoneで2chまとめサイトみる環境の作成方法をまとめたメモです。
既にニコ２ちゃんねるのようなそれ向けのアプリがあったりしますが、実際にサイトを表示する時はPCサイトをみるだけなのであんまりうれしくなかったりします。
そこで、RSSリーダーとまるごとRSSを使って、2chまとめサイト専用のGoogle Readerを作成してみた。

まるごとRSSを使うことでフィードが全文受信(Wedataが対応してないところは無理)できるので、わざわざサイトにアクセスする必要がなくなるのと、Bylineのようにキャッシュ機能を持っているiPhoneアプリだとオフラインでも暇つぶしになるのがいいところ。

手順としては

1. Google Reader用にGoogleアカウントを作成する(元々Google Readerを使ってなかったらそれでもいい)
2. 好きな2chまとめサイトをまるごとRSSを通してGoogle Readerに登録する
   下に登録用のブックマークレットを置いてある
3. 好きなRSSリーダアプリで上のアカウントを閲覧する
   BylineやMobileRSSなど(これ専用と考えるともっと最適なものがあるかもしれない。オススメがあったらお願いします)

はてブで調べた2chまとめサイトの一覧 – ナマアシタノム

http://d.hatena.ne.jp/ashitano244/20091004/1254643353

を参考にして適当に登録したものを置いておく。

• google-reader-subscriptions.xml

まるごとRSSを通す際にわざわざ入力するのは面倒なので、簡単に登録できるブックマークレットを作成した。

• まるごとRSS登録 (まるごとRSSのページへ)
• まるごとRSS登録 (Google Readerの登録ページへ直接飛ぶ)

まるごとRSSのページ掲載されてるブックマークレットは以前自分が書いたやつですが、RSSのページで実行しないといけなかったので、適当に書き加えてTOPページなどから実行しても登録画面にいけるようにしました。(複数のRSSフィードを持つページは苦手なので、そのときはRSSページから実行するといいです。)

javascript:
(function(){
  var%20el=document.getElementsByTagName("link");
  var%20flag=false;
  for(i=0;i<el.length;i++){
    if(!flag&&el[i].getAttribute("rel")=="alternate"&&/(xml|rss)/.test(el[i].getAttribute("type"))){
      window.open('http://www.google.com/reader/view/feed/http://mrss.dokoda.jp/analyze/?url='+encodeURIComponent(el[i].href),'_blank');
      flag=true;
    }
  }
  if(!flag){
    window.open('http://www.google.com/reader/view/feed/http://mrss.dokoda.jp/analyze/?url='+encodeURIComponent(location.href),'_blank');
  }
}
)()

中身は正直適当なので、ご自由にお使いください。

RSSフィードを全文配信で読むなら まるごとRSS

http://mrss.dokoda.jp/

Google リーダー

http://www.google.co.jp/reader/

Firefox Developers Conference 2009に参加して適当にメモを取っていたので一応公開。
とても読みづらく、まとまっていません。 またトークセッションなど力尽きているところもあるので真剣に読んではいけない。

Read the rest of this entry »

最近になってFirebugのDOMタブで要素をクリックしてもその下の要素が展開されなくなったので、何かのアドオンと競合してるのかを調べてみたら、FxIFというEXIFを見るためのアドオンが原因だと分かった。
FxIFを外すか、過去のバージョンにするかで回避できた。

もう一つ、こっちは競合というわけではないけど、ニコニコ動画がリニューアルしてからマイリストにアクセスするとFirefoxが固まってフリーズするようになってしまった。
こちらの原因はIt’s All Text!というテキストエリアをエディタで編集するアドオンを外す事で解消された。
多分Javascriptで動的に表示させるようになったのが要因になって、変な動作をするようになったのかな。

XML-RPCを使ってWordpressやMovable Typeなどのブログに投稿するGreasemonkeyの書き方みたいなものです。
XMLRPCに対応したブログにどういうものがあるかは下のサイトによくまとまってます。(ちょっと古いですが)

BlogWrite – Atom API, XML-RPC

http://www.witha.jp/BlogWrite/bloglist.html

WordpressでしかテストしてませんがXMLRPCに対応してるブログなら動作すると思います。
今回は投稿機構みたいなものを書いただけなので、このスクリプトだけではあんまり意味はないと思います。

// ==UserScript==
// @name           XMLRPC poster
// @namespace      http://efcl.info/
// @include        http://*
// ==/UserScript==

/* 投稿先のメタ情報 */
var metaBlog = {
	"endPoint" : "ブログのエンドポイントURL",
	"blogid"   : "ブログのログインID",
	"username" : "投稿者名", //空だとblogidを使用
	"password" : "パスワード"
}

var XMLRPC = (function() { this.initialize.apply(this, arguments); });
XMLRPC.prototype = {
	/*
	 * @arg
		{
				"endPoint": "endPoint",
				"blogid"   : "blogid",
				"username" : "username",//空だとblogidを使用
				"password" : "password"
		}
	*/
	initialize : function(arg) { //引数は{}オブジェクト
		this.endPoint = arg.endPoint;
		this.blogid   = arg.blogid;
		this.username = (arg.username) ? arg.username : arg.blogid;
		this.password = arg.password;
	},
	/* *
	 * @title 記事タイトル
	 * @desc 記事内容
	 * @tags タグ(カンマ区切り)
	 * @callback 更新成功時のコールバック関数
	 */
	post : function (title, desc, tags, callback){
		var postURI = this.endPoint;
		this.tags = (tags.length == 0) ? "" : tags.join(",");
		var XMLbody = '<?xml version="1.0"?>\n';
		XMLbody += this.template(title, desc , this.tags);
		console.info(XMLbody);
		GM_xmlhttpRequest({
			method : "POST",
			headers : {
				'Content-type' : 'text/xml'
			},
			url : postURI,
			data : this.template(title, desc , tags),
			onload : callback,
		})
	},
  template : function (title, desc , tags){
    var repuest =  <methodCall>
                      <methodName>metaWeblog.newPost</methodName>
                      <params>
                        <param>
                          <value>
                            <string>{this.blogid}</string>
                          </value>
                        </param>
                        <param>
                          <value>
                            <string>{this.username}</string>
                          </value>
                        </param>
                        <param>
                          <value>
                            <string>{this.password}</string>
                          </value>
                        </param>
                        <param>
                          <value>
                            <struct>
                              <member>
                                <name>title</name>
                                <value>
                                  <string>{title}</string>
                                </value>
                              </member>
                              <member>
                                <name>description</name>
                                <value>
                                  <string>{desc}</string>
                                </value>
                              </member>
                              <member>
                                <name>mt_keywords</name>
                                <value>
                                  <string>{tags}</string>
                                </value>
                              </member>
                              <member>
                                <name>mt_allow_comments</name>
                                <value>
                                  <boolean>1</boolean>
                                </value>
                              </member>
                            </struct>
                          </value>
                        </param>
                        <param>
                          <value>
                            <boolean>1</boolean>
                          </value>
                        </param>
                      </params>
                    </methodCall>;
		return repuest.toString();
	}
}
/* init メタ情報を使って投稿先決める*/
var t = new XMLRPC(metaBlog);
t.post(
	"title",
	"description",
	["tag1","tag2"],
	function(res){//callback
		console.log(res);
	}
);

ブログのエンドポイントURLは各ブログによってまちまちですが、Wordpressだとhttp://Wordpressトップ/xmlrpc.php
になります。

E4Xを使ってポストするXMLを作成していますが、先頭に<?xml version=”1.0″?>を入れるとなぜかエラーになったので、後で結合するようにしました。
後、XMLRPCを使ってWordpressにタグを指定できるのかを検索した時、下のようにできないというのが出てきましたが、mt_keywordsにタグを指定できます。
なので下の情報は古いか間違っています。

WordPressでXML-RPCを使った投稿で、記事にタグの指定はできるのでしょうか。できるようでしたらやり方を書いたページを教えてください。.. – 人力検索はてな

Wordpressでは,で区切る事でタグを複数指定できます。
カテゴリーは面倒だったので放置してます(誰か…)

記載したソースは自由に使用してください。
gist: 224968 – GitHub

参考

肉少なめ | Item – Greasemonkeyでブログを更新

http://niku.suku.name/item/591

MovableType で使える XML-RPC API

http://www.na.rim.or.jp/~tsupo/program/blogTool/mt_xmlRpc.html#w01

XML-RPC経由の投稿 でタグを登録したい « Selflow WordPress

http://www.selflow.com/?p=6