えびしブログ

〜サーバーは魔法で動いているわけではない〜

Twitterのwebでin reply toのテキストを表示させるGreasemonkey

jQuery Greasemonkey

jQueryが面白かったのでグリモンを書いてみました。

「★in reply toを見る」をクリックすると、
↑こんな感じでin reply toの中身を表示させます。
問題点はいくつかあるのですが…！！（最後に記述）
改善していきたいです。


以下より順を追って覚え書き。

Greasemonkeyを書く準備

ファイル名

hoge.user.js

hogeの部分はなんでもOKで、そのあとに「.user.js」をつけます。

文字コード

UTF-8に設定しました。

グリモン特有のメタデータ

ソースコードの冒頭に

// ==UserScript==
//メタデータ
// ==/UserScript==
//スクリプト

を記述します。
メタデータの内容は以下のとおりです。
※すべて省略可能。

@name           スクリプトの名前
@namespace      自分の名前など
@description    スクリプトの説明
@include        スクリプトの動作対象URL
@exclude        スクリプトの動作除外URL
@require        外部スクリプトのURLを指定（user.jsの先頭に展開される）

ソースコード

jQuery 日本語リファレンス
↑こちらを参考に手探りでガリガリ。
※9/10 17:20コメントをいただき、ソースコードを修正しました。
ありがとうございました！

  • twitterirt.user.js
// ==UserScript==
// @name          my twitter
// @namespace     eibiisii
// @include        http://twitter.com/*
// @include        https://twitter.com/*
// @exclude        http://twitter.com/invitations/*
// @exclude        http://twitter.com/settings/*
// @exclude        http://twitter.com/goodies/*
// @exclude        https://twitter.com/invitations/*
// @exclude        https://twitter.com/settings/*
// @exclude        https://twitter.com/goodies/*
// @require        http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
// ==/UserScript==
(function(){
$('.meta>span+a').each(function(){

		var hreftext = $(this).attr('href');		
		var replytext = 'hoge';
		
		$.get(hreftext,
		function(data){
//			console.log(data.match('<span class="entry-content">.+?</span>')[0]);
			replytext=data.match('<span class="entry-content">.+?</span>')[0];
			replytext = replytext.replace('span','div');
			replytext = replytext.replace('class="entry-content"','class="my_class"');
					console.log('replytext='+replytext);
		});
		
		$(this).after('<span class="my_point">★in reply toを見る</span>');
		$('.my_point').hover(
			function(){
				$(this).css('cursor','pointer');
				},
			function(){
			$(this).css('');
			}
		);
		$(this).next().toggle(
			function(){
				$(this).after(replytext);
				console.log(replytext);
		
				$('.my_class').css({backgroundColor:"#f7f7f7", fontWeight:"bolder", color:"#999999", fontSize:"12px"});
			},
			function(){
				$(this).next().slideUp();
			}
		);
	});
})();

致命的な問題点！

-日本語設定でなければ使えない…
--「hoge宛」からスクリーンネームをとってきているからなのですが、ほかに方法が思いつかず…げふん

    • ※コメントをいただき解決しました！ありがとうございました。
  • 最初に読み込んだ20件にしか反映されない
    • 「もっと読む」以降には反映されません…

改良

参考サイト様

Google Notebook

jQuery 日本語リファレンス