この記事は賞味期限切れです。（更新から1年が経過しています）

Twitterの@anywhereは既に提供を終了していますので、本記事の内容も利用出来ません。
Sunsetting @Anywhere | Twitter Developers

@anywhereはTwitter公式から提供されている、
どのサイトでもTwitterの機能が使えるようになる便利なライブラリです。
cf) ブログで@anywhereを試してみた！ ～ どこでもTwitter

今回はこの@anywhereでユーザー認証をしてみましょう。
※アプリケーションの登録等は割愛致します。
※jQueryを使用しています。

• @anywhereの基本
• 認証に必要な機能
• デモ
• コード抜粋
• めんどくせーな、と思ったら
• まとめ

@anywhereの基本

ライブラリのロード

公式で登録したアプリケーションのAPIkeyを付加したURLで、ライブラリをロードします。

<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=<ここにAPIkeyを記述>&v=1"></script>

twttr.anywhere

@anywhereはtwttr.anywhereというメソッドが全ての基本です。

twttr.anywhere(function(tw){
    // ここでtwを使ってなんやかんやする
});

twttr.anywhereに渡したfunctionは、
anywhereを使用する準備が整った時にコールされます。
ここでfunctionに渡されているtwに様々な便利な機能が備えられているので、
それらを使ってなんやかんやするわけですね。

認証に必要な機能

cf) @anywhere公式ドキュメント（英語）

tw.isConnected()

ユーザー認証が済んでいるかどうかをbool値で返すメソッド。
認証済みかそうでないかで処理を切り分けたい時に使います。

if( tw.isConnected() ){
    // 認証済みの場合の処理
} else {
    // 未認証の場合の処理
}

tw.signIn()

Twitterにサインインする為のメソッドです。
これをコールすると、別ウィンドウでTwitterに接続するページが開き、
そのページでログインして戻ってくると認証が完了する仕組みです。

$("#Signin").live("click", function(e){
    tw.signin();
});

twttr.anywhere.signOut()

Twitterからサインアウトする為のメソッドです。
※signIn()とは親が異なる点に注意。

$("#Signout").live("click", function(e){
    twttr.anywhere.signOut();
});

authCompleteイベント

認証が完了すると、twの”authComplete”イベントがトリガーされます。
認証完了時に処理を行いたい時にbindして使います。
「おや？bindってjQueryじゃねーの？」とか思われるかもしれませんが、
実際anywhere自体がjQueryを使用して書かれているみたいです。

tw.bind("authComplete", function(e){
    alert("認証完了！");
});

tw.currentUser.data()

tw.currentUserには現在接続中のユーザーの情報が格納されています。
ユーザーの情報を引き出すには、data()メソッドを用います。
console.log()してみると分かりますが、プロパティアクセスでも取得出来ます。
※公式ドキュメントでは言及されていないので、念のためdata()を経由した方がよいかもしれません

// data()で取得
alert( tw.currentUser.data("screen_name") + "でログイン中です" );
// プロパティアクセスで取得
alert( tw.currentUser.screenName + "でログイン中です" );

取得できるユーザー情報のリストは、APIドキュメントを参照
…するよりもconsole.log()してプロパティ見たほうが多分はやい。

デモ

デモページは閉鎖致しました。

• 「Signin」ボタンをクリックすると認証用のページが開きます
• 認証が完了すると表示が切り替わってユーザー情報が表示されます
• テンプレートにjquery.render.jsを使ってみました
  cf) シンプルなjQueryテンプレートプラグインを書いてみる

コード抜粋

twttr.anywhere( function(tw){
    var refresh = function(){
        $("#LoginStatus").html("");
        if( !tw.isConnected() ){
            $("#template-loginstatus-normal")
            .render()
            .appendTo("#LoginStatus");
        }else{
            var cu = tw.currentUser;
            $("#template-loginstatus-connected")
            .render({
                "screen_name": cu.data("screen_name"),
                "profile_image_url": cu.data("profile_image_url"),
                "name": cu.data("name"),
                "description" : cu.data("description"),
                "location": cu.data("location"),
                "followers_count" : cu.data("followers_count"),
                "friends_count" : cu.data("friends_count"),
                "listed_count" : cu.data("listed_count")
            })
            .appendTo("#LoginStatus");
        }
    };
    $("#LoginStatus .signin").live( "click", function(e){
        tw.signIn();
        return false;
    });
    $("#LoginStatus .signout").live( "click", function(e){
        twttr.anywhere.signOut();
        refresh();
        return false;
    });
    tw.bind("authComplete", refresh);
    refresh();
});

めんどくせーな、と思ったら

簡単に認証ボタンが実装できる、connectButton()というメソッドが提供されています。
特にカスタマイズする必要がなかったり、面倒な時はこれを使っちゃえばいいですね。

twttr.anywhere( function(tw){
    tw("#MyConnectButton").connectButton();
});

サインアウトボタンにトグルしてくれたりはしないので、
欲しい場合は自分で実装する必要があります。

まとめ

フロントエンドだけで済んでしまうようなWebアプリケーションならば、
お手軽に使えて良いですね。
Webベースのクライアントなんかを作りたい時にも良いかもしれません。
さ、次はPHPのOAuthだ。