Web scratch

Archive for the ‘Greasemonkey’ Category

Post Now browsing to TwitterをOAuth認証に対応しました | Web scratchでGreasemonkeyスクリプトの「Post Now browsing to Twitter」をOAuth認証に対応したものを作りました。
OAuthのJavaScript実装はいくつかあるみたいですがGreasemonkeyで使う感じになってるものは無かったみたいなので、OAuth.jsを使ったtwitterでのOAuth認証を手助けするラッパーみたいなものを書きました。

xAuthを使えば楽な気もしますがブラウザベースのものはxAuthを使わずにOAuthを使ってねとの事です

大部分は

• TwitterクライアントのOAuth対応(Javascript編) | tomatomax.net
• Twitter API を OAuth で認証するスクリプトを 0 から書いてみた – trial and error
• H.Basic認証/OAuth認証 (陽昇れども地の底に光届かず)

を参考に書きました。
何となく分かるかも知れませんが、今回扱うアプリはApplication Typeがclientタイプのものです。

Read the rest of this entry »

Twitterへ今見ているサイトをコメントと共に投稿する「Post Now browsing to Twitter」がOAuth認証に対応しました。
このGreasemonkeyをインストールする前に、以前のバージョン(2010年6月より前)のものを入れている場合はそれをアンインストールしてから、改めて「Post Now browsing to Twitter」をインストールして下さい。(以前と設定の互換が無くなったため設定ごと破棄をお勧めします)
ツール→Greasemonkey(もしくはステータスバーの猿アイコン)→ユーザースクリプトの管理→Post Now browsing to Twitterを選択→✓関連付けられた設定も削除にチェック→アンインストール

Read the rest of this entry »

紹介するDbus Notify for GreaseMonkeyはGreasemonkeyスクリプトにGrowlのような通知を行うAPIを加えるアドオンです。
Greasemonkeyにcallout.notifyというAPIを追加するだけのシンプルなアドオンです。
使い方は単純でDbus Notify for GreaseMonkeyをインストールして、Greasemonkeyスクリプト内にcallout.notifyのAPIを使った記述を加えるだけで動きます。(当たり前だが、インストールしてない環境だと動かない)

APIは凄くシンプルで、callout.notify(title, message, [options])となっていて、タイトルはそのまま、メッセージはタイトルの下に表示されていて、optionのhrefが設定されている場合はリンクになる。

optionで設定できるのもhrefとiconぐらいで、Greasemonkeyからページの外側に通知を出したいなーって思う人はそれだけを求めるならアドオンなどにしないでこれを使うのもいいかも。

簡単なサンプル

gist: 426775 – Dbus Notify for GreaseMonkeyのテスト- GitHub

http://gist.github.com/426775

APIの解説

lackac’s callout at master – GitHub

http://github.com/lackac/callout

Greasemonkeyに何か機能を加えるアドオンって意外と見かけない感じがする。
Greasemonkey でクリップボードを扱う…悪い方法（？） – Griever でも言っているように受け口を持つと悪用の可能性も出てくるが、セキュリティ的な影響がでないように狭い範囲で機能追加できれば楽しそうだなーと思った。

メディアマーカーは読書管理を行えるWebサービスで、基本的な読書管理のシステムも優れていながら、Twitterへの連携やiPhone アプリもあるので、とても使い勝手がよいサービスです。
今回は自分がどのようにメディアマーカーを使っているか、自分流の読書管理方法について書いてみる。

まず、読書管理について自分で心がけているのは

1. どんな本だったかが直ぐ分かること
2. 読書した本の登録が面倒くさくならないこと
3. 読書管理を楽しめること

これを目標にしていろいろな読書管理方法を試してきました。
1のように後から見返したときにどんな本だったかを知るために読書した本を管理しているところが大きいので、以前はどんな内容だったかをレビュー形式で書いたりしていました。
しかし、本のレビューみたいに詳しく 書いていくと面倒臭さが増し2や3を破ってしまう事になり、あまり長くは続きませんでした。
(レビュー書く事が全く苦ではない人はブログや私本管理Plusを使って書きためるのもいいかもしれません)

後から見たときに本の内容を簡単に思い出す方法を考えていて思いついたのが、本の内容を貼り付けてしまえばいいと考えました。
つまり、本を読んでいるときに小説なら気になったフレーズ、漫画なら気になったコマをそのまま貼り付けてしまえばいい！
それを実現するためにとった方法は、本をカメラで撮影して画像にしてしまうという方法。
漫画などはこの方法で気になった部分を画像にできるし、小説はちょっとカメラに精度が必要となってしまうので、できなかった場合はiPhoneで気になったフレーズを書き写して、メディアマーカーiPhoneアプリで先に登録しておくといい。
最近流行ってる書籍の電子化で、既に電子化したものをビューアーで読んでいる場合はスクリーンショット機能を使って気になった部分を画像として保存しておく。
そうしてできた画像をDropboxのPublicフォルダに入れておいて外部からも参照できるようにしておく。
後は、メディアマーカーに数行のレビュー(レビューとはいえないレベル)とDropboxにある画像を貼り付けて画像を表示すれば、後から見たときに直ぐ内容が分かって便利になる。

この気になった部分を画像にして貼り付けるのは意外と楽しくて、かつ撮影してそこで直ぐ完結するので手間があまりかからない。特に電子化している場合はスクリーンショットを取るだけなので一瞬で終わる。
また画像を貼り付けるときに、Dropboxに一つの書籍について複数の画像がある場合、エクスプローラの”Copy Public Link”だと一個づつしかURLをコピーできないし、Imgタグで囲うのが面倒なのでコマンドラインで動くバッチのようなものを作る。

• Program.cs

このProgram.csのdropboxPath部分を自分のDropbox環境に合わせてからコンパイルする。
csc.exeで以下のよう に指定するとコンパイルできる。(csc.exeの場所は.NETのどっかにあるかと、もしくはVisual Studio使うとか)

>C:\Windows\Microsoft.NET\Framework\v3.5\csc.exe Program.cs

コ ンパイルしてできたexeファイルにD&Dや送るからファイルを渡すと渡したファイルのURLをimgタグにしたものがクリップボードにコピーさ れるので、それをメディアマーカーに貼り付けるだけでよくなる。

さらにメディアマーカーは書籍登録時にタグをつけることができ、後から見返すときにそれらの情報をつけておくと分かりやすくなるため、タグ付けを補助するGreasemonkeyを導入する。

• MediaMaker with Amazon tags
• MediaMaker with booklog tags

それぞれ、登録時にAmazonとbooklogにつけられている書籍のタグを表示してくれるので、クリックするだけで書籍に関係あるタグを追加できる。

補助ツールを使うことで書籍の登録の面倒臭さも低減されるし、何よりも書籍の内容を画像で表示するのは思っている以上に楽しい事だと思う。
読書メモに写真を使う！

evernote+iPhoneで似ている事をやっている人もいます。
やっぱりカメラで写真を撮るのと書き出すのは圧倒的に手間が違うし、いつも持ち歩いてるiPhoneでもカメラは何とかなることが多いので面倒な手間が結構減ります。

Blog Forest: 読書メモの作成にevernoteを使う

http://morimorishop.com/2009/03/evernote_2.html

evernoteなら画像のOCR機能があるので検索できるという淡い期待もありますが、 Amazonから情報を引っ張れたり他とは関係の情報を切り離して見られるメディアマーカーのようなサービスで書籍を管理した方が自分にとっては便利かなーと思う。
後から見返したときに楽しいというのも大きな点。
あくまでevernte+写真はメモにして、そこから文字を書き出すというのも一つの手であると思います。

以上。

おまけ、Dropboxの画像をPublic経由で表示してるので少し重たくなってしまう。
表示する画像をローカルのものと差し替えるGreasemonkey

@include
originSrc
newSrc
の三カ所を書き換える必要がある。

• Mediamaker img local replace.user.js

セキュリティの理由からpref.jsに以下を追加してメディアマーカーからローカルの画像を表示できるようにしておかないと機能しない。

user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");
user_pref("capability.policy.localfilelinks.sites", "http://mediamarker.net");
user_pref("capability.policy.policynames", "localfilelinks");

Muses Factory » Firefoxでcheckloaduri.enabledの設定が反映されない

http://reva.s28.xrea.com/archives/38.html

Greasemonkeyは各サイトでユーザースクリプトを実行できて便利ですが、ある要素を挿入したときにそれがサイトに元々書いてあるCSSの影響を受けてしまうことがあります。
一つのサイトならまだしもhttp*で動くようなものだと対応仕切れないのでiframeを使いサイトに書いてあるCSSの影響を受けないパネルを作る。
iframeの中はそのサイトにあるCSSの影響を受けないので、iframe内にGreasemonkeyで表示したいものを置けば影響を受けないものが作成できる。
makeFrameというのが今回の主題。

makeFrame(gotFrame1);
makeFrame(gotFrame2);

function gotFrame1(iframe, win, doc) {
  iframe.height = "350";
  iframe.width = "500";
  iframe.style.position = "fixed";
  iframe.style.bottom = iframe.style.left = "0";
  doc.body.innerHTML += "Frame1ですね。"
}
function gotFrame2(iframe, win, doc) {
  iframe.height = "350";
  iframe.width = "500";
  iframe.style.position = "fixed";
  iframe.style.bottom = iframe.style.right = "0";
  iframe.style.backgroundColor = "#ddd";
  doc.body.innerHTML += "Frame2ですよ。"
}
// Creates a new iframe and attaches it to the DOM, waits for it to load, tests
// that we did not hit https://bugzilla.mozilla.org/show_bug.cgi?id=295813 nor
// https://bugzilla.mozilla.org/show_bug.cgi?id=388714 (and retries otherwise),
// to finally call the provided done callback, passing the iframe, its window
// and document. (The optional name parameter, if provided, will be used to name
// the iframe in window.frames, or be created as "pane-1" onwards, otherwise.)
/*
    var cacllback = function(iframe, win, doc){

    }
    makeFrame(cacllback);
    makeFrame(cacllback , "frameName");
    makeFrame(cacllback , "frameName" , true);// debug mode
*/
function makeFrame(callback/*(iframeTag, window, document)*/, name, debug) {
    function testInvasion() {
        iframe.removeEventListener("load", done, true);
        var message = ((new Date) - load.start) + "ms passed, ";
        try { // probe for security violation error, in case mozilla struck a bug
            var url = unsafeWindow.frames[framename].location.href;
            message += url == "about:blank" ? "but we got the right document." : "and we incorrectly loaded " + url;
            if (debug) console.log(message);
            done();
        }
        catch(e) {
            if (console && console.error && console.trace) {
                console.error(e);
                console.trace();
            }
            if (debug) console.log(message + "and our iframe was invaded. Trying again!");
            document.body.removeChild(iframe);
            makeFrame(callback, name);
        }
    }
    function done() {
        clearTimeout(load.timeout);
        if (debug) console.log("IFrame %x load event after %d ms", framename, (new Date) - load.start);
        var win = unsafeWindow.frames[framename];
        var doc = iframe.contentWindow.document;
        // 苦し紛れのエスケープ
        var esframeName = "'"+framename+"'";
        // 自分自身のiframeを閉じるボタン
        var xImg = doc.createElement("img");
        xImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAATElEQVQoka2RSQ4AIAgD+f+jp96M0aq49AgdUiB0qZCkONQ/EBAwDOrrU7A1uZqN2hodtNwRqNdz0VOg62+jzuDUcVzkf+/I6h28UQHjW25Gob5AIAAAAABJRU5ErkJggg=="
        xImg.setAttribute("onclick", "parent.document.getElementsByName("+esframeName+")[0].style.display='none';");
        xImg.setAttribute("style","background-color:red;border:3px;position:fixed;top:0px;right:0px");
        doc.body.appendChild(xImg);
        callback(iframe, win, doc);
    }
    var iframe = document.createElement("iframe");
    var framename = iframe.name = typeof name != "undefined" ? name : ("pane" + (makeFrame.id = (makeFrame.id || 0) - 1));
    iframe.setAttribute("style", "overflow:auto;z-index:18999; border:0; margin:0; padding:0;top:auto; right:auto; bottom:auto; left:auto;background-color:#fff");
    iframe.src = "about:blank";
    iframe.addEventListener("load", done, true);
    var frames = makeFrame.data || {};
    var load = frames[framename] || {
        start: new Date,
        sleepFor: 400
    };
    load.timeout = setTimeout(testInvasion, load.sleepFor);
    load.sleepFor *= 1.5;
    frames[framename] = load;
    makeFrame.data = frames;
    document.body.appendChild(iframe);
}

• panel.user.js

makeFrame関数は(callback ,[フレームのname , debugモード])という引数なので、gotFrame1という関数(callback)を引数にしてmakeFrameを読んでいる。 callbackには(iframe, iframeのwindow, iframeのdocument)が入ってるいるので、iframeのstyleをいじればパネルの色やサイズ、表示する場所などを指定できる。 上記のソースだと左下にframe1、右下にframe2が表示できる。

元ネタからの改良点

• パネルを閉じるボタンの追加

それぞれのパネル右上に表示されているxボタンは、パネルを閉じるボタンとして機能している。 innerHTMLが+になってるのはiframe内にxボタンを追加しているため。

• Flashより上部に表示

パネルなのでFlashがあってもその上に表示できるようにした方が動作的にはいいと思うのでCSSを少し修正した。
要素をFlashより上部する方法は以前書いたFlashよりも前面にポップアップを表示するかFirefox 3.6でFlashの上に position: fixed; な要素を表示できなくなった件 – なんとなく目記を見るといい。
Firefox3.6では挙動が変わったので注意。
Flashより上に表示するには”position: fixed; overflow: auto;”とした要素であり、以下の条件を満たす必要がある。

1. 透過でない(Opacityを使わない or 背景色を無指定にしない)
2. CSS3?(-moz-)系のstyleを使わない。(-moz-box-shadowなどは陰の部分だけFlashより後ろに表示されてしまう
   角丸border-radiusなどは要素に適応されるので要素全体がFlashより後ろに表示される。)

このmakeFrameを使ったサンプルGreasemonkeyとして
ニコニコ動画再生ページからその動画のマイリストコメントをパネル上で参照できる

Nico MylistComments for Greasemonkey

http://userscripts.org/scripts/show/72319

を作ってみた。

元ネタ(元ネタのサンプルはtypoがあるので、そのままだと動かない)

HTML Injection Tips – greasemonkey – GitHub

http://wiki.github.com/Martii/greasemonkey/html-injection-tips

GistにGreasemonkeyスクリプトをペーストする時に、自動でファイル名を入力してくれるGreasemonkeyを書きました。
入力されるファイル名は@nameの要素+.user.jsとなるので、コードをペーストするだけでRawからインストールできるようになります。

// @name           gist fill in fileName automatically

という感じで書いてあったなら、gist fill in fileName automatically.user.jsというファイル名が勝手に入力されます。

Add another file…で追加したテキストエリアにも対応させてあります。

• gist fill in fileName automatically

gistのトップページ( http://gist.github.com/ ) と編集ページで動作します。

gist fill in fileName automatically for Greasemonkey

http://userscripts.org/scripts/show/71914

Read the rest of this entry »

twilogの日付の隣あたりに日付毎のページへ飛ぶリンクをつけるGreasemonkeyです。
要は下のスクリーンショットみたいに日付ページへ飛ぶリンクをつけるだけです。

• twilog date linker

カッとなってつけたけどデフォルトでないのが意外。

twilog date linker for Greasemonkey

http://userscripts.org/scripts/show/70683

今見ているサイトのURLをコメントとともにTwitterに投稿するGreasemonkeyであるPost Now browsing to Twitterを更新したので更新内容について。
どんな感じのものかは以前の記事を見てください。

今見ているサイトをTwitterに投稿する「Post Now browsing to Twitter」 | Web scratch

http://efcl.info/2009/0929/res1369/

更新点

• 入力UIの変更

今まではコメントの入力を通常のプロンプトで行っていましたが、入力用のテキストエリアをショートカットを押した際に表示する用にしました。
コメントするUIとポストした際の並びに統一感がでたのと、コメントの入力に対してリアルタイムで合計の文字数をカウントアップします。(140文字をオーバーしても自動でタイトルを切って140文字に納めるのでカウントアップにしてます。)
コメント入力後(未記入でもOK)Ctrl+Enterを押すとTwitterにポストします。
コメント入力をキャンセルしたい場合はESCキーを押すことでキャンセルできます。

また、promptの時とは違いテキストエリアで入力するので、モーダルダイアログのように入力欄が表示されているとき、ページ上のテキストを選択できないということがなくなります。

後は細かい修正。
インストールはこちらから

Post Now browsing to Twitter

http://userscripts.org/scripts/show/46441

ニコニコ動画の検索ページに共起タグクラウドを表示するChrome用ユーザスクリプト作ってみた – あたご型護衛艦日記

http://d.hatena.ne.jp/aTaGo/20100112/1263285275

という便利なものがあったので公開マイリストページにもタグクラウドを表示するGreasemonkeyを書いてみた。

• Mylist TagCloud

// ==UserScript==
// @name           Mylist TagCloud
// @namespace      http://efcl.info/
// @include        http://www.nicovideo.jp/mylist/*
// ==/UserScript==
evalInPage(function(){

	var as = my.currentItems
	var ids = "";
	if(as.length > 1){
		insertcallback();
		for(var i = 0; i < as.length; i++){
			var smid = as[i].item_data.video_id;
			ids += smid + "+";
		}
		//console.log(ids);
		var uri = "http://nicotag.sakura.ne.jp/getcollocationtag.php?smid=" + ids + "&rand=" + Math.floor(Math.random()*1000);;
		calljsonp(uri);
	}

function calljsonp(uri){
	var scr = document.createElement('script');
	scr.type = "text/javascript";
	scr.src = uri;
	document.body.appendChild(scr);
}

function insertcallback(){
	var callscr = document.createElement('script');
	callscr.type = "text/javascript";
	callscr.text = ''
			+ 'function callback(val){'
			+ 'var footer = document.querySelectorAll("div#SYS_box_mylist_body");'
			+ 'var foot = footer[0];'
			+ 'var div = document.createElement("div");'
			+ 'div.innerHTML = val;'
			+ 'foot.parentNode.insertBefore(div, foot);'
			+ '}';
	document.body.appendChild(callscr);
}
})
function evalInPage(fun) {
  location.href = "javascript:void (" + fun + ")()";
}

JSONPでしか取得できないような気がしたので、ほぼそのままな感じ。
確かめてないけどChromeでも動くかも。

Googleの検索結果画面にTwitter検索の結果も表示するGreasemonkeyスクリプトです。

以前、Twitter Search Results on Google for Greasemonkey [ http://userscripts.org/scripts/show/43451 ]を元に書いたものの焼き直しです。

Googleの検索結果にtwitter検索の結果を同時に表示するGreasemonkey | Web scratch

http://efcl.info/2009/0826/res1266/

また一から書き直してみた。
機能はほとんど変わってません。

少し似た目が変わったのと、その場でTwitter検索の結果を継ぎ足せるようにしたぐらいです。
インストールはこちらから

Twitter search(ja) result on Google for Greasemonkey

http://userscripts.org/scripts/show/65540