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

大部分は

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

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

今回書いたラッパーは以下のOAuthライブラリを簡単に扱うためのものになってます。
OAuth.js
SHA-1.js
http://code.google.com/p/oauth/source/browse/code/javascript/ あたりにある。
ラッパーと併せて3つのjsからなりますが、3回も@requireするのは面倒だったので一つのファイルにまとめたソースコードをOAuth for Greasemonkey for Greasemonkeyに置いてあります。
OAuth.jsはApache license ver2、SHA-1.jsはBSDライセンスになっています。
自分が書いたラッパー部分はMITライセンスとしておきます(基本的に自由に使える)
しかし、いつ変更するか分からないので自分で別途保存して@requireする方が良いでしょう。
追記: githubに置いたのでこちらを利用した方がいいと思います

• azu’s OAuth-for-Greasemonkey at master – GitHub

以下はラッパー部分だけを抜き出したものです。(2010/08/07現在のソースから)
ここに書いてあるのは古いと思うので上のリンクから適当に見て下さい。

// TwitterOauth for Greasemonkey
function TwitterOauth(){
    this.initialize.apply(this, arguments);
}
TwitterOauth.prototype = {
    initialize: function(con) {
        var accessor = this.getAccessor();
        if(accessor){
            this.accessor = accessor;
        }else{
            this.accessor.consumerKey = con.consumerKey;
            this.accessor.consumerSecret = con.consumerSecret;
            this.accessor.token = "";
            this.accessor.tokenSecret = "";
        }
    },
    accessor : {
        consumerKey : "",
        consumerSecret: "",
        token: "",// response access_token
        tokenSecret: "", // response access_token_secret
    },
    // temp for request
    request : {
        token :"",// response oauth_token
        tokenSecret: ""// response oauth_token_secret
    },
    // トークンが取得済みかの真偽値を返す
    isAuthorize : function(){
        var accessor = this.accessor;
        if(accessor.consumerKey && accessor.consumerSecret && accessor.token && accessor.tokenSecret){
            return true;
        }else{
            return false;
        }
    },
    getAccessor : function(){
        var accessor = GM_getValue("OAuthAccessor", null);
        if(accessor){
            return JSON.parse(accessor);
        }else{
            return false;
        }
    },
    // 取得したトークンを保存
    saveAccessor : function(){
        GM_setValue("OAuthAccessor",JSON.stringify(this.accessor));
    },
    deleteAccessor : function(){
        var clientInfo = {
            consumerKey: this.accessor.consumerKey,
            consumerSecret: this.accessor.consumerSecret,
        }
        GM_deleteValue("OAuthAccessor");
        this.initialize(clientInfo);
    },
    // 認証ページのURLを取得
    getRequestToken : function(callback){
        var message = {
          method: "GET",
          action: "https://twitter.com/oauth/request_token",
          parameters: {
            oauth_signature_method: "HMAC-SHA1",
            oauth_consumer_key: this.accessor.consumerKey
          }
        };
        OAuth.setTimestampAndNonce(message);
        OAuth.SignatureMethod.sign(message, this.accessor);
        var target = OAuth.addToURL(message.action, message.parameters);
        var self = this;
        var options = {
          method: message.method,
          url: target,
          onload: function(d) {
            if(d.status == 200){
                var res = d.responseText;
                var parameter = self.getParameter(res);
                self.request.token = parameter["oauth_token"];
                self.request.tokenSecret = parameter["oauth_token_secret"];
                // requestURLを引数にcallback
                if(callback){
                    callback("https://twitter.com/oauth/authorize?oauth_token="+self.request.token);
                }
            }else{
                alert(d.statusText);
            }
          },
        };
        GM_xmlhttpRequest(options);

    },
    // pinを元にAccess Tokenを取得して保存、callbackにはaccessorオブジェクトを渡す
    getAccessToken : function(pin ,callback) {
        var message = {
          method: "GET",
          action: "https://twitter.com/oauth/access_token",
          parameters: {
            oauth_signature_method: "HMAC-SHA1",
            oauth_consumer_key: this.accessor.consumerKey,
            oauth_token: this.request.token, // Request Token
            oauth_verifier: pin
          }
        };
        OAuth.setTimestampAndNonce(message);
        OAuth.SignatureMethod.sign(message, this.request);
        var target = OAuth.addToURL(message.action, message.parameters);
        var self = this;
        var options = {
          method: message.method,
          url: target,
          onload: function(d) {
            if(d.status == 200){
                /* 返り値からAccess Token/Access Token Secretを取り出す */
                var res = d.responseText;
                var parameter = self.getParameter(res);
                self.accessor.token = parameter["oauth_token"];
                self.accessor.tokenSecret = parameter["oauth_token_secret"];
                // Accessorの保存
                self.saveAccessor();
                if(callback){
                    callback(self.accessor);
                }
            }else{
                alert(d.statusText);
            }
          },
        };

        GM_xmlhttpRequest(options); // 送信
    },
    // api+?+query にアクセスした結果をcallbackに渡す
    get : function(api, query, callback) {
        var btquery = (query)? "?"+this.buildQuery(query) : "";
        var message = {
          method: "GET",
          action: api + btquery,
          parameters: {
            oauth_signature_method: "HMAC-SHA1",
            oauth_consumer_key: this.accessor.consumerKey,// queryの構築
            oauth_token: this.accessor.token // Access Token
          }
        };
        OAuth.setTimestampAndNonce(message);
        OAuth.SignatureMethod.sign(message, this.accessor);
        var target = OAuth.addToURL(message.action, message.parameters);
        var options = {
          method: message.method,
          url: target,
          onload: function(d) {
            if(d.status == 200){
                if(callback){
                    callback(d.responseText);
                }
            }else{
                callback(d.statusText);
            }
          },
        };
        GM_xmlhttpRequest(options); // 送信
    },
    post : function(api, content, callback) {
        var message = {
          method: "POST",
          action: api,
          parameters: {
            oauth_signature_method: "HMAC-SHA1",
            oauth_consumer_key: this.accessor.consumerKey,
            oauth_token: this.accessor.token // Access Token
          }
        };
        // 送信するデータをパラメータに追加する
        for ( var key in content ) {
          message.parameters[key] = content[key];
        }
        OAuth.setTimestampAndNonce(message);
        OAuth.SignatureMethod.sign(message, this.accessor);
        var target = OAuth.addToURL(message.action, message.parameters);
        var options = {
            method: message.method,
            url: target,
            onload: function(d) {
                if (d.status == 200) {
                    if (callback) {
                        callback(d.responseText);
                    }
                } else {
                    // typeof d == object
                    callback(d);
                }
            }
        };
        GM_xmlhttpRequest(options); // 送信
    },
    // GM_xmlhttpRequest風に使う
    xhr : function(opts){
        if(!(opts && opts.url && opts.method)){
            GM_log("URLまたはメソッドが指定されていません");
            return;
        }
        var message = {
          method: opts.method,
          action: opts.url,
          parameters: {
            oauth_signature_method: "HMAC-SHA1",
            oauth_consumer_key: this.accessor.consumerKey,
            oauth_token: this.accessor.token // Access Token
          }
        };
        // POST - opts.dataは文字列でもオブジェクトでも可能にする
        if(opts && opts.method.toLowerCase() == "post" && opts.data){
            if(typeof(opts.data) === "string"){// 文字列からパラメータオブジェクトを作る
                opts.data = this.getParameter(opts.data);
            }
            var content = opts.data;
            if(typeof(content) === "object"){
                for(var key in content) {
                    message.parameters[key] = content[key];
                }
            }
        }
        OAuth.setTimestampAndNonce(message);
        OAuth.SignatureMethod.sign(message, this.accessor);
        opts.url = OAuth.addToURL(message.action, message.parameters);// URLを書き換え
        GM_xmlhttpRequest(opts);// 送信
    },
    // utility関数
    // http://kevin.vanzonneveld.net
    urlencode : function (str) {
        str = (str+'').toString();
        return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
                                                                        replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
    },
    // オブジェクトからクエリを生成
    buildQuery : function(formdata, numeric_prefix, arg_separator) {
        // *     example 1: http_build_query({foo: 'bar', php: 'hypertext processor', baz: 'boom', cow: 'milk'}, '', '&');
        // *     returns 1: 'foo=bar&php=hypertext+processor&baz=boom&cow=milk'
        // *     example 2: http_build_query({'php': 'hypertext processor', 0: 'foo', 1: 'bar', 2: 'baz', 3: 'boom', 'cow': 'milk'}, 'myvar_');
        // *     returns 2: 'php=hypertext+processor&myvar_0=foo&myvar_1=bar&myvar_2=baz&myvar_3=boom&cow=milk'
        var value, key, tmp = [];
        var self = this;
        var _http_build_query_helper = function (key, val, arg_separator) {
            var k, tmp = [];
            if (val === true) {
                val = "1";
            } else if (val === false) {
                val = "0";
            }
            if (val !== null && typeof(val) === "object") {
                for (k in val) {
                    if (val[k] !== null) {
                        tmp.push(_http_build_query_helper(key + "[" + k + "]", val[k], arg_separator));
                    }
                }
                return tmp.join(arg_separator);
            } else if (typeof(val) !== "function") {
                return self.urlencode(key) + "=" + self.urlencode(val);
            } else {
                throw new Error('There was an error processing for http_build_query().');
            }
        };

        if (!arg_separator) {
            arg_separator = "&";
        }
        for (key in formdata) {
            value = formdata[key];
            if (numeric_prefix && !isNaN(key)) {
                key = String(numeric_prefix) + key;
            }
            tmp.push(_http_build_query_helper(key, value, arg_separator));
        }

        return tmp.join(arg_separator);
    },
    // Query String から 連想配列を返す
    getParameter: function(str){
      var dec = decodeURIComponent;
      var par = {}, itm;
      if(typeof(str) == 'undefined') return par;
      if(str.indexOf('?', 0) > -1) str = str.split('?')[1];
      str = str.split('&');
      for(var i = 0; str.length > i; i++){
        itm = str[i].split("=");
        if(itm[0] != ''){
          par[itm[0]] = typeof(itm[1]) == 'undefined' ? true : dec(itm[1]);
        }
      }
      return par;
   }
};

OAuth認証を手助けすることを目的に書いたので、アクセストークンを使って実際にAPIをたたく部分のTwitterOauth.getやTwitterOauth.postは適当です。
ラッパーの動作自体はそこまで難しい事はやってないので、OAuth認証の手順を理解する方が大切です。
Twitter Applications | dev.twitter.com から自分の作成するGreasemonkeyをnew appから登録しておきます。
Application TypeはClientならPINコードを使うタイプ、Browserなら認証したときにリダイレクトするURLを決めてそのURLでアクセストークンを受け取れます。今回はClientタイプつまりPINコードを使う方法です。

登録でClientを選ぶ

ユーザーにPINコードをコピーさせてそれを入力させるという動作が、普通のWebサービスではあまり見ない流れだと思います。このラッパーでやっているOAuth認証の流れを簡単に図にするとこんな流れです。(Browserタイプよりユーザーの負担が大きい)

もっとコアの流れをみるならOAuthのやり取りを読み取ってみる – 風柳メモ とか

実際にGreasemonkeyでやってる動画 YouTube – Post Now browsing to Twitter for Greasemonkey
かなり大雑把な流れなので詳しくは他のサイトを参照して下さい。
基本的にはトークンなどを元にしてOAuth.jsのOAuth.SignatureMethod.signでシグネチャを作成して、それを元に新たなトークンを受け取ってまたOAuth.SignatureMethod.signでシグネチャを作るみたいな繰り返しです。
最終的にAPIを叩く際に必要なものがアクセストークンとなります。

1. リクエストトークンとリクエストトークンシークレットをもらいに行く。(タイムスタンプとconsumerKeyで一意な情報を元にする)
2. もらってきたリクエストトークンを使って認証ページのURLを作る。
   (https://twitter.com/oauth/authorize?oauth_token= + リクエストトークンが認証ページのURL)
3. ユーザーに認証の動作を行ってもらう。
4. 認証するとPINコードが表示されるので、ユーザーにPINコードをコピーしてアプリに入力してもらう。
5. 入力してもらったPINコードを元にアクセストークンとアクセストークンシークレットをもらいに行く。(アクセストークンがAPIにたたくときに必要となるものです。リクエストトークンは認証時に必要となるだけなので使い捨てです。)
6. アクセストークンをもらったら保存して完了。

実際にラッパーを使った大筋の流れとして、まずラッパーを呼び出して各自のアプリ情報を渡して初期化します。

// http://dev.twitter.com/apps に書いてある。
var clientInfo = {
    name: 'アプリ名',
    consumerKey: '各自アプリ',
    consumerSecret: '各自アプリ',
}
// TwitterOauthにクライアント情報を渡してnewする(必須)
var tw = new TwitterOauth(clientInfo);

そして、tw.isAuthorize() で既にアクセストークンを持っているかを調べられる(持ってたら直ぐにAPIをたたける)ので、持っていなかったらリクエストトークンをもらいに行きます。

if(tw.isAuthorize()){// まだ認証していない
    tw.getRequestToken(callback);
    // callbackに渡る引数は認証ページのURL
}

getRequestTokenのcallback関数には認証ページのURLが渡るので、それを元にユーザーにそのページに行ってもらいアプリのOAuth認証してPINコードをコピーしてきてもらいます。
PINコードを入力してもらう必要があるので、適当な入力エリアを作っておく必要もあります。

// アクセストークンをもらいに行く。
// アクセストークンを取得できたら自動で保存処理を行っています。
// callbackにはaccessor(アクセストークンなどが入ったオブジェクト)を渡しますが、使い道は…
tw.getAccessToken(callback);
// 取得したアクセストークンを捨てたいときは
// tw.deleteAccessor() で破棄できます。

アクセストークンを取得して保存できたらOAuth認証は完了です。
アクセストークンを持っていればAPIをたたけるので、tw.get、tw.postを使ってAPIを叩きます。

   // get第二引数はクエリになるオブジェクトを渡す
   // 以下はapi?q=oauth&per_page=5 となる。
    var query = {
        q : "oauth",
        per_page : 5
    }
    // get : function(api, query, callback)
    tw.get("http://api.twitter.com/1/users/search.json" , query ,function(res){
        if(typeof res != "object"){// Twitterのエラー時はリスポンスのオブジェクトをそのまま返すため
            console.log(res); // firebug
        }
    })

    // postはそのまま何も工夫がない。
    var content = {status: "update test", source: clientInfo.name};
    tw.post('http://twitter.com/statuses/update.json', content ,function(){
        console.log(res); // firebug
    });

Twitter API Wiki / Twitter API Documentation を参考に使う。
HTTP MethodがGETならそのクエリになるようにAPIのURLとクエリオブジェクトをtw.getに渡す。
HTTP MethodがPOSTなら、APIのURLにcontentとなるオブジェクトを渡す。という感じでかなり適当な作りをしています。
twigadge のようにもう少し機能別に作った方が使いやすくなると思います。

以上で説明のようなそうでないものは終わりですが、以下に簡単なサンプルGreasemonkeyを置いてあります。

• GreasemonkeyでOAuth認証を手助けするライブラリとそのサンプル
  (猿アイコンのユーザースクリプトから認証とget、postのテストができます。できれば自分のconsumerKeyとか使ってね。)

追記

新たにxhrというメソッドを追加しました。(上記ならtw.xhr({})みたいな使い方)
xhrメソッドはGM_xmlhttpRequestと同じようにオプションのオブジェクトを引数にとって、APIと通信します。
GM_xmlhttpRequestをラップしているので、感覚的にはGM_xmlhttpRequestと同じ感じで使えると思います。
一つサンプル

// ↓↓↓↓Your Script↓↓↓↓ の所までがOAuth認証のパネルを作ったりするテンプレート的なものです。
OAuth認証が済んでない（tw.isAuthorize()==false)なら途中でreturnされるので、既存コードの上部に// ClientInfomation から // ↓↓↓↓Your Script↓↓↓↓までをコピペして、API周りを修正すれば簡単にOAuth認証に対応できます。(できる限り自分の登録したアプリのclientInfoを使って下さい)
当たり前ですが、その時@requireでOAuth.jsの3点セットを読み込んでおいて、インストールし直す必要があります(@requireが動作するのはインストール時のみ)
APIを叩くときにOAuth認証で得たアクセストークンからシグネチャを作る必要があるので、GM_xmlhttpRequestでそのままAPIを叩いたままでは通りません。そこで今回追加したxhrメソッドの出番です。
Getメソッドの場合だとGM_xmlhttpRequestをtw.xhrに変更するだけで既存のコードは通ると思います。
POSTメソッドもGM_xmlhttpRequestをxhrメソッドに変えるだけで大体通ると思います。
GM_xmlhttpRequestだとdata部分は文字列で書くので、そのまま”foo=fizz&bar=bazz”と書く方法と下のようにオブジェクト書く方法が使えます。(オブジェクトの方が効率がいい)

data : {
    foo:fizz,
    bar:bazz,
}

サンプルは猿アイコンを右クリックからでるユーザーコマンドで、xhrのそれぞれgetとpostをテストする関数が動作するだけです。

以下リンクまとめ

ライブラリの置き場所。こっちが多分一番新しい。

azu’s OAuth-for-Greasemonkey at master – GitHub

http://github.com/azu/OAuth-for-Greasemonkey

実際にラッパーを使ったGreasemonkey

Post Now browsing to Twitter for Greasemonkey

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

上のGreasemonkeyで使ってるラッパーライブラリとかをまとめたもの

OAuth for Greasemonkey for Greasemonkey

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

主な変更点を箇条書きすると以下のような感じです。

変更内容
1. OAuth対応
BASIC認証が2010年6月末に廃止されるためOAuth認証に対応しました。
設定画面から認証できます。
BlowsingNow!などの外部サーバを経由するものとは違い、PINコードを使ってGreasemonkeyスクリプト単体でOAuth認証を行います。
2. 入力UIがサイトの影響を受けなくなった
入力UI自体は以前と同じですが、サイト側CSSの影響を受けることがあったのを改善し、影響を受けないようにしました。
3. 設定項目の変更
以前と設定項目が変わったため設定の互換性がありません。
そのため、以前のものはアンインストールからインストールして下さい。

1. 短縮URLの選択肢が増えた
   新たにbit.ly(j.mp)、goo.glを追加しました。
   bit.ly(j.mp)はAPIの設定も行えます。
2. Ctrl+Enterでのポスト
   デフォルトはEnterで送信ですが、設定のチェックの意味が逆になったという変更。(正直気にすることはない)
   設定でCtrl+Enterでポストするように変更できます。
3. Twitterアカウントの入力項目廃止
   以前はベーシック認証を使っていたので、Twitterアカウントの入力項目がありましたが、OAuth認証に対応したため廃止しました。

OAuth認証は設定の一番下に表示されます。(いつでも認証を解除する事ができます。)
4. 短縮URLのリトライ機能
短縮URLサービスのサーバにアクセスできないときに(5秒でタイムアウト)、別の短縮URLサービスに切り替えて短縮します。

ぱっとした変化を見ると、OAuthに対応したのと、bit.ly、goo.glなどの短縮URLが使えるようになったぐらいかな。

OAuth認証の手順

Greasemonkey 単体でOAuth認証を行うようにしたので手順が少し複雑です。
以下の動画を参考にして下さい。

文字で書くと、

1. ステータスバーのGreasemonkeyアイコンを右クリック
   ユーザースクリプトコマンド→Post Now browsing to Twitter Settingから設定画面へ
2. OAuth認証をまだしてないなら、”Sign in with Twitter”ボタンが表示されるのでクリック
3. OAuth認証ページが開くので、そこへ行き許可(Allow)する。
4. PINコードが表示されるのでCtrl+Cなどでコピーする。
5. 再び設定画面に戻り、インプットボックスへPINコードをCtrl+V(ペースト)して、Comfirmボタンを押す。
6. Success!出たら、ページでショートカットキー(デフォルトはCtrl+Shift+Enter)を押し、入力UIを出す。
7. 適当にコメントとかを書いたらEnter(設定でCtrl+Enterに変えられます)でTwitterへポストする
8. 投稿できたらOK

5ぐらいまでがOAuth認証の手順で、6以降は投稿する手順。

以下感想
OAuthに対応してるGreasemonkeyが皆無で結局自分で色々書かないといけなかった。
OAuth.jsとかライブラリを使ってるので結構サイズが大きくなった。
OAuthページとかのアイコンがやっつけ感酷いのでアイコン募集中。

機能説明ページ

Post Now browsing to Twitter | Web scratch

http://efcl.info/post-now-browsing-to-twitter/

スクリプト配布ページ

Post Now browsing to Twitter for Greasemonkey

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

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 でも言っているように受け口を持つと悪用の可能性も出てくるが、セキュリティ的な影響がでないように狭い範囲で機能追加できれば楽しそうだなーと思った。

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

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

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

// @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

技術的な動作

var fileExtension = ".user.js";
var addAutoEvent = function(fileID){
    var editArea = document.getElementsByName("file_contents[gistfile"+fileID+"]")[0];
    var editFileName = document.getElementsByName("file_name[gistfile"+fileID+"]")[0];
    editArea.addEventListener("paste", function(e){
        // この瞬間はまだtargetのvalueが空である。
        var obj = e.target;
        obj.addEventListener('input', function(evt){
            // クリップボードの内容がinputされた
            evt.currentTarget.removeEventListener(evt.type, arguments.callee, false);
            var pasteValue = obj.value;
            var m = pasteValue.match(/@name\s+([\w\s]+)\n/i);
                m = m && m[1];
            if(m && !editFileName.value){
               m = m.replace(/\s+$/ , "");
               // m = m.replace(" " , "_" , "g");// 第３引数 繰り返し
               editFileName.value = m + fileExtension;
               // console.log(m + fileExtension);
               editFileName.focus();
            }
        }, false);
    }, false);
};
// 追加されたテキストエリアにもイベントをつける
var addButton = document.getElementById("add-gist");
addButton.addEventListener("click",function(){
    document.getElementById("files").addEventListener("DOMNodeInserted",function(e) {
        // テキストエリアが追加された
        e.currentTarget.removeEventListener(e.type, arguments.callee, false);
        var editAreaLength = document.getElementsByClassName("file").length;
        addAutoEvent(editAreaLength);
    } ,false);
}  ,false);
// 最初から表示されているテキストエリアにイベントをつける
addAutoEvent(1);

Grieverさんが書いてくれたヒントを元にしてます。

addEventListener("paste" , ...);

でペーストに対してイベントリスナーを付け加えることができるのですが、この瞬間に

e.target.value

としても内容は空(もしくは元からそこに書いてあったもの)となり、期待するテキストエリアの文字列は取得できません。
なので、pasteのイベントリスナー内で

    editArea.addEventListener("paste", function(e){
        // この瞬間はまだtargetのvalueが空である。
        var obj = e.target;
        obj.addEventListener('input', function(evt){...

のように、inputイベントをつけると、実際に文字列がテキストエリアに入った瞬間にinputイベントが動くので、
inputイベント内で

obj.value

を見るととテキストエリア内の文字列が取得できます。
(ペーストされた部分のみを扱いたい場合はgist: 338606 – GitHubを参考に)
後は、inputのイベントはそのまま残っているとジャマなので自身を参照してremoveEventListenerしておいて、やりたかったことをやる。

追加されたテキストエリアにもイベントを加えるのもほとんど同じ形をしています。
まず、addボタンに対してclickイベント付け加えます。
gistでは元々addボタンに対してclickイベントがつけられていて、複数のclickイベントがあったときはつけられた順に実行されるので、元々あったclickイベント→Greasemonkeyでつけたclickイベントの順に実行される。
しかし、元々あったclickイベントではxmlhttprequestを使って非同期にテキストエリアを追加しているので、
テキストエリアを追加(gist側)→テキストエリアにイベントをつける(Greasemonkey) ということをやりたい場合にテキストエリアが追加されるまで待たないといけません。
JavascriptではそういうときにsetIntervalで回したり、watch(IEでは動かない)でプロパティを監視したりできると思いますが、
今回はDOMNodeInsertedを使ってDOMに要素が追加されたら発火するイベントをつけることにした。

var addButton = document.getElementById("add-gist");
addButton.addEventListener("click",function(){
    document.getElementById("files").addEventListener("DOMNodeInserted",function(e) { ...

#files 要素内に新しいテキストエリアが追加されると、DOMNodeInsertedイベントが発火するので、非同期で追加されたテキストエリアに関しても、最初に作成したpasteイベントをつけることができる。
この時に前と同様にDOMNodeInserted内で自分自身をremoveEventListenerしておく。
DOMNodeInsertedとかドキュメントがあんまり見当たらない。

DOMNodeInserted event JavaScript

http://help.dottoro.com/ljmcxjla.php

DOM Mutation Events は非同期にして使おう – JavaScriptで遊ぶよ – g:javascript

http://javascript.g.hatena.ne.jp/edvakf/20100204/1265312155

偶然にもpaste→input、click→DOMNodeInsertedという感じで両方とも、イベントリスナー内でaddEventListenerという形になった。
以上

• twilog date linker

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

twilog date linker for Greasemonkey

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

今見ているサイトを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

という便利なものがあったので公開マイリストページにもタグクラウドを表示する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でも動くかも。

以前、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