Ajax Archive

これは何？

Twitter で、指定したユーザに Follow されてるかどうかを表示する Greasemonkey スクリプトです。

以前作ったこれを Greasemonkey にしました。

使い方

下記リンクからインストールしてください。要 Greasemonkey。

インストール後、Twitter のユーザページにアクセスすると、「Does follow do you?」というボタンが追加されます。そのボタンをクリックすると、あなたがそのユーザから follow されてるかどうかを表示します。

twitterfollowercheck.user.js (version 1.0)

その他

グリモンは初めて作りました。
Firefox, Safari(GreaseKit) で動くと思います。
コードも晒しておきます。つっこみ大歓迎。

// ==UserScript==
// @name           Twitter Follower Check
// @namespace      http://www.sukechan.net/
// @include        http://twitter.com/*
// @version        1.0
// ==/UserScript==

(function(){
  var num = 1;
  var screenName = location.href.substr(19);

  // Followers Request
  function getFollowers() {
    addElm.disabled = true;
    addElm.value = "Loading...";
    var httpObj = createRequest();
    if (httpObj) {
      httpObj.open("GET", "http://twitter.com/statuses/followers.json?page=" + num, true);
      httpObj.send(null);
      httpObj.onreadystatechange = function() {
        if (httpObj.readyState == 4) {
          if (httpObj.status == 200) {
            var jsonData = eval(httpObj.responseText);
            if (jsonData.length > 0) {
              for (var i = 0; i < jsonData.length; i++) {
                if (screenName == jsonData[i].screen_name) {
                  addElm.value = "You are followed.";
                  return;
                }
              }
              getFollowers(num++);
            } else {
              addElm.value = "You are not followed.";
            }
          } else {
            addElm.value = "error. status: " + httpObj.status;
          }
        }
      }
    }
  }

  // XMLHttpRequest
  function createRequest() {
    var xmlHttp = null;
    if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      try {
        xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
      } catch (e) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
    return xmlHttp;
  }

  // add element
  var elm = document.getElementById("follow-control");
  if (elm) {
    var addElm = document.createElement("input");
    addElm.setAttribute("class", "follow-button");
    addElm.setAttribute("type", "button");
    addElm.setAttribute("value", "Does follow do you?");
    addElm.addEventListener("click", function() {getFollowers()}, false);
    addElm.style.width = "150px";
    addElm.style.marginTop = "3px";
    elm.appendChild(addElm);
   }
})();

これは何？

Twitter Follower Checker

Twitter で、指定したユーザに Follow されてるかを確認する、ただそれだけです。

作ろうと思ったきっかけは、誰かの発言に Reply する時に「あれ？この人自分を Follow してくれてたかな？」と思う時があって、Follow されてるかをチェックしてたんですが、Twitter 本家の Follower ページだと探すのに一苦労だったためです。

使い方

Twitter Follower Checker のページで、調べたいユーザ名を入力して「follow?」ボタンをクリックします。
Twitter にログインしていない場合は認証画面が表示されます。
しばらくすると、Follow されているかいないかが表示されます。

ブックマークレットも作りました。以下のリンクをブックマークに追加してください。

follow?

その他

Twitter API を使って、Followers から該当するユーザを探します。
Follower の数が多い方だと、Twitter API 制限に引っかかってしまうことがあるかもしれませんので、ご利用は計画的に。

IE 6, Firefox 2.x, Safari 3.0.4 で動作確認しました。
不具合やご意見ありましたら、Twitter または当ブログのコメントでいただけると嬉しいです。

更新履歴

Ver 1.0.1 (2008/02/24)

• ユーザー名の大文字/小文字を区別しないようにしました
• ロゴをつけてみました

Ver 1.0.0 (2008/02/17)

• 公開

参考

・[観] Twitter API 仕様書 (勝手に日本語訳シリーズ)
・ひらめいったー - たくさん following がいる人が自分を follow してくれてるか調べる何か。…

ありがとう！

Twitter Follower Checker

テーブルの背景色を 1 行置きに変更して、より見やすくする表示方法をみかけます。
HTML タグ内の tr タグに class 属性をつけていく方法でも良いのですが、行数が多くなるととても面倒ですので、最近では JavaScript で実装するケースが多いと思います。

今回はそれを jQuery を使って実現してみます。

まず、テーブルに class 属性を付けておきます。今回のクラス名は “stripe” としました。

jQuery を使わずにやってみる

jQuery を使う前に、まず jQuery を使わない場合を見てみましょう。
おそらく、下記のようなスクリプトになると思います。

window.onload = function() {
  var tbl = document.getElementsByTagName("table");
  for (var i = 0; i < tbl.length; i++) {
    if (tbl[i].className == "stripe") {
      stripeTable(tbl[i]);
    }
  }
}

function stripeTable(t) {
  for (var i = 0; i < t.rows.length; i++) {
    if ( i % 2 == 0) { t.rows[i].className = "even" }
  }
}

jQuery を使うとどうなるか？

まず、jQuery では window.onload の代わりに $() を使います。
window.onload ではページ内のすべてのファイルの読み込みが完了してから実行されますが、 $() では DOM 解析が完了した時点で実行できるのが特徴です。

では、先ほどのスクリプトを jQuery を使って書いてみます。

$(function() {
	$(".stripe tr:even").addClass("even");
});

たったこれだけです！
$ 関数の中では、stripe クラスを持つ要素内の tr 要素のうち、偶数番目の要素に even クラスを追加するということをしています。

jQuery を使い始めてまだ日が浅いですが、jQuery はすごく便利だなぁと実感しています。

>>作成したサンプルはこちら

（参考サイト）
・jQuery リファレンス
・jQuery 開発者向けメモ
・jQuery を使って Ajax 開発を単純化する