めそらぼ - mesolabs.com

前回のエントリで公開したGreasemonkeyスクリプトには、ブログ主なりサイト管理者なりが自分のTwitterIDをページ内に埋め込んでくれていないと動かないという欠点がありました。

その辺なんとかならないかなーって思いながらも公開したんですが、そのエントリに付いたはてブにヒントが！

2008年06月25日 mattn サイト管理人のtwitter-idを調べるのにtako3を使う手もありかなー

おおお・・・！すばらしい！tako3っていうサービスがありましたね！
このサービスは、ある人が他にどんなサービス使ってるか情報を共有する他己紹介サービスです。昔見て「ほぉ～」って思ったのに忘れていた。

というわけで早速ググって見たところ、

tako3.comとFooo.nameのAPIを叩くユーザスクリプト - cameraLady:
http://june29.jp/2007/10/12/profile-urls-findr-powerd-by-tako3-and-fooo/

というものを発見！
tako3だけじゃなく同様のサービスであるFooo.nameにも対応しているようで、大いに参考にさせてもらいました。

というわけでtako3、Fooo.name対応版が完成しました！
これによって、ブログ主やサイト管理者がページに何かを埋め込んだりする必要なく、tako3やFooo.nameに登録さえされていれば、その人のサイト上でその人のTwitterアカウントに向けてコメントを記入することができます。
CodeReposに置いてあるので、ぜひ使ってみてください。
また、気に入らないところがあればぜひいじってください。

いや～、やっぱ何か作ったら恐れず公開すべきだねぇ。アイデアを下さったmattnさんありがとうございました。

なお、このエントリは、稚作サービスの「ぶっこめ！」を用いまして、上記ブックマークコメントを頂きましたmattnさんのブックマークへのトラックバックエントリとなっております。
はてなのIDコールを使ってmattnさんにこのエントリを知らせる仕組みになってるはずですが気づいてもらえましたか？

インスパイア元：

Going My Way: ブログのエントリーへのコメントを Twitter に投稿できるボタン
http://kengo.preston-net.com/archives/003745.shtml

上記エントリでしてることは、ただのLinkを用意するだけだったので、
もうちょっとなんとかしたいなーってことで、Greasemonkeyの勉強も兼ねて作ってみました。

インストールはこちらから。

<div id="_cvt_twitterId" style="visibility: hidden;">hoge</div>

という要素が表示しているページに存在していると、ウィンドウ下部にTwitterへの投稿Formが出現します。
投稿ボタンを押すと、@hogeさんへの返信という形で、表示してるページのURLとともにコメントがTwitterへ投稿されます。

なので、この要素をまず、ブログ主なりサイト管理者なりが埋め込んでおかないと意味がないです。
この辺なんとかしたいんだけど無理かなぁ。
ちなみに、当ブログでは上記要素を埋め込んでいるのでこのGreasemonkeyをインストールすれば、Twitterへの投稿Formが出現するはずです。

Twitterへの投稿時の認証はブラウザによるBASIC認証なので、初回はID/PASSを聞かれると思います。

念のため、ソースコードも貼っときます。初Greasemonkeyなので、突っ込み大歓迎です。
ライセンスはNYSLです。
(追記) CodeReposにコミットしました。
http://svn.coderepos.org/share/lang/javascript/CvT/comment_via_twitter.user.js

// ==UserScript==
// @name           Comment via Twitter
// @namespace      com.mesolabs
// @description    Comment via Twitter
// @include        *
// ==/UserScript==

(function () {

    var cvtElement = document.getElementById("_cvt_twitterId")
    if (cvtElement) {
        var form = //
        <form action="#" id="_cvt_form">
            Comment via Twitter: <input type="text" id="_cvt_text" />
            <input type="button" value="投稿" id="_cvt_submit" />
        </form>;

        var div = document.createElement("div");
        div.setAttribute("id", "_cvt_div");
        div.innerHTML = form.toSource();
        document.body.insertBefore(div, document.body.firstChild);
        setStyle();

        document.getElementById("_cvt_submit").addEventListener("click", submit, false);
    }

    function setStyle() {

        var style =
            <><![CDATA[
                #_cvt_div {
                    font-family: Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif;
                    font-size: 14px;
                    color: #000000;
                    bottom: 0pt;
                    left: 20%;
                    right: 20%;
                    z-index: 255;
                    background-color: #9ACCFF;
                    position: fixed;
                    padding: 10px;
                    margin: 0px;
                    display: block;
                    opacity: 0.75;
                }
                #_cvt_text {
                    width: 500px
                }
            ]]></>;

         GM_addStyle(style);
    }

    function submit() {

        var status = encodeURIComponent(
            "@" + cvtElement.textContent + " (" + document.location.href + ") " +
            document.getElementById("_cvt_text").value);
        var url = "http://twitter.com/statuses/update.json";

        document.getElementById("_cvt_text").value = "sending…";

        GM_xmlhttpRequest({
            method: "POST",
            url: url,
            data: "status=" + status,
            headers: {
                "Content-Type":"application/x-www-form-urlencoded",
                "X-Twitter-Client": "Comment via Twitter",
                "X-Twitter-Client-Version": "0.1"
            },
            onload: function(xhr) {
                document.getElementById("_cvt_text").value = "send";
            }
        });

    }

})();