読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

@Anywhereでtwitterに投稿してみる

twitter javascript

@AnywhereはTwitterが作ってる、JavaScriptのライブラリです。結構簡単に認証とかTweetとか出来ますよ。
今回は、jQuery, jQuery Template, @anywhereを使ってみました。

事前準備

Twitterの開発者向けサイトに行って、アプリケーションを作って下さい。作ったら、Access LevelをRead&Writeにして、Consumer keyをメモっておきます。
ローカルで開発するときに、サイトとコールバックURLが必要になるのですが、自身のマシンにhostsを切っておくと良いです。

 127.0.0.1 dev.hogehoge.com

みたいな感じになります。このhostsを切ったものを利用して登録しておくと良いよ。

@anywhereの初期化

Consumer key を次のscriptタグに入れて、HTMLに追加します。そうすっと、twttrオブジェクトが利用出来ます。

<script src="http://platform.twitter.com/anywhere.js?id=[Consumer key]&v=1" type="text/javascript"></script>

初期化は、twttr.anywhere(function(t) {/* 初期化処理 */})を使うよ。初期化処理の中で、t.isConnected()を使って、認証中の処理と認証してない場合の処理を分けて記述します。

if (t.isConnected()) {
    $("#login-logout").empty();
    var currentUser = t.currentUser;
    $("#login-template").tmpl({
        screenName: currentUser.data("screen_name"),
        profileImage: currentUser.data("profile_image_url")
    }).appendTo("#login-logout");
} else {
    $("#login-logout").empty();
    $("#logout-template").tmpl({}).appendTo("#login-logout");
    t("#login").connectButton({size: "large", authComplete: doLogin});
}

今回は、認証してたらアイコンとスクリーンネーム、ログアウトボタンを表示してます。表示するテンプレートはコード全体の最下部にあるscriptの通りですね。
認証ボタンをつけたい場合は、初期化処理の中で、connectButtonを使います。jQueryのようにCSSセレクタで選択した要素に対して実行します。ボタンのサイズと、認証が成功した場合のコールバック、サインアウトした場合のコールバックを設定します。今回、認証の時はリロードするコールバック、サインアウトは別の方法をとるのでコールバックは設定していません。
jQueryと同じCSSセレクタが使えるのは、中でjQueryを使ってるからみたいです。Versionは今現在で1.4ですね。

TweetBoxを設置

呟きを投稿するエリアです。tweetBoxを使いましょう。引数にはオプションを設定します。

    t("#tweerArea").tweetBox({
        height: 100,
        width: 400,
        label: "なにか書いてね!",
        defaultContent: " @thorikiri",
        onTweet: function(tt, ht) {
            $($("iframe.twitter-anywhere-tweet-box").get(0).contentWindow.document).find("#tweet-box").val(" @thorikiri");
        }
    });

オプションについては、だいたい見て分かると思いますが、onTweetはツィートが成功した場合のコールバックです。
個人的には、preTweetオプションが欲しいと思ったのですが、現在は無いみたいですね。残念です。
あと、ツィートに成功してしまうと、せっかくのdefaultContentまでも消えてしまいます。なので、無理やり元に戻す処理を記述しています。もっと良い方法があれば教えて欲しいですね。

その他

フォローするボタンは、t("#followme").followButton("スクリーンネーム")で付けられます。
@hogehgoe部分をホバーするのは、t.hovercards()で付けられます。引数にはCSSセレクタが設定可能です。

今回のコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Twitter Sample</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
    <script src="http://platform.twitter.com/anywhere.js?id=xxxxxxxxxxxxxxxx&v=1" type="text/javascript"></script>
    <script type="text/javascript">
        (function() {
            var doLogin = function() {
                window.location.reload();
            };
            var doLogout = function() {
                twttr.anywhere.signOut();
                window.location.reload();
            };
            $(function() {
                twttr.anywhere(function (T) {
                    if (T.isConnected()) {
                        $("#login-logout").empty();
                        var currentUser = T.currentUser;
                        $("#login-template").tmpl({
                            screenName: currentUser.data("screen_name"),
                            profileImage: currentUser.data("profile_image_url")
                        }).appendTo("#login-logout");
                    } else {
                        $("#login-logout").empty();
                        $("#logout-template").tmpl({}).appendTo("#login-logout");
                        T("#login").connectButton({size: "large", authComplete: doLogin});
                    }
                    
                    T("#tweerArea").tweetBox({
                        height: 100,
                        width: 400,
                        label: "なにか書いてね!",
                        defaultContent: " @thorikiri",
                        onTweet: function(tt, ht) {
                            $($("iframe.twitter-anywhere-tweet-box").get(0).contentWindow.document).find("#tweet-box").val(" @thorikiri");
                        }
                    });
                    T("#followme").followButton("thorikiri");
                    T.hovercards();
                });
                $(document).on("click", "#logoutButton", function(event) {
                    doLogout();
                });
            });
        })();
    </script>
</head>
<body>
    <div id="header">
        <div id="login-logout">
        </div>
    </div>
    <div id="contents">
        <div id="tweerArea">
        </div>
    </div>
    <div id="footer">
        <span id="followme"></span>
    </div>
    <script id="login-template" type="text/x-jquery-tmpl">
        <div id="login">
            <span><img src="${profileImage}" /></span> <span>@${screenName}</span> <span><a href="#" id="logoutButton">logout</a></span>
        </div>
    </script>
    <script id="logout-template" type="text/x-jquery-tmpl">
        <div id="login">
        </div>
    </script>
</body>
</html>

細かいところに手はとどかないけど、簡単に出来るんじゃないかな。と思いますよ。