@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>
細かいところに手はとどかないけど、簡単に出来るんじゃないかな。と思いますよ。
