Welcome to @Anywhere | dev.twitter.com
もはや、WEB界隈ではコミュニケーションプラットフォームとして定着しつつあるTwitterですが、先週、自分のサイトにJavaScriptを使って簡単にTwitter機能を導入できる@Anywhereというサービスが発表されました。こちらにドキュメントが公開されているのですが、サンプルコードがまともに動かなかったり、APIの説明が不十分だったり、今すぐに導入するのはかなりハードルが高いです。
というわけで実際にサンプルを紹介する前に、日本人に非常に分かりやすいエントリーを２つほど紹介しますので、そちらで基本的な使い方を覚えていただければと思います。
・Twitter 新 API のドキュメント「Getting Started with @Anywhere」日本語訳 – WebOS Goodies
ドキュメントを日本語訳してくださっています。恐らく元ページの方はこれから加筆・修正されていくと思うので、差がでないように更新していただける事と嬉しいですね。
・Twitterの機能をJSで簡単に導入できる「@Anywhere」の使い方メモ – Rewish
そのままで動かない公式サンプルを一番的確に指摘し、解決方法を紹介しています。
特にサンプルが動かないというのはかなりハマりやすいのでRewishさんのページは必読ですよ。さて、それではいよいよ自分のブログにコメントシステムとして設置する手順を紹介します。
【2013/02/07：追記】
Twitter ＠Anywhereは2012年12月でサポート終了しているようです。別の方法に移行したほうが良いでしょう。
Twitterの古い公式ウィジェットが使えなくなるのでご注意を！
事前準備
@Anywhereを利用するにはAPI登録が必要です。Rewishさんのエントリーを参考に登録しておいてください。
- dev.twitter.comからブログをAPI登録（APIキーをゲット）
- コメントの書き込みをしたいので、twitter.comの方のアプリケーション設定画面でRead/Write権限をONにしておく
dev.twitter.comの画面でそのままWrite権限を付与できないというのがとてもわかりにくいです。しかも、Write権限がないままTweetBoxからつぶやいてもエラーがでない（コメントも反映されない）という状態なので、一番のハマりポイントになっています。
コメントシステム表示エリアのHTML
説明用にサンプルページを作りました。
・Twitter @Anywhere Test
まず、コメントシステムの各要素についてHTMLを書いていきます。
コメントシステムでは、＠Anywhereで使える5つの機能の内、「Follow buttons」「Tweet Box」「User login & signup」の３つを使います。
<table cellpadding="5" cellspacing="1" border="1"> <tr> <td>Connect Button</td> <td id="twitterConnectButton"></td> </tr> <tr> <td>Follow Button</td> <td id="twitterFollowButton"></td> </tr> <tr> <td>SignOut</td> <td id="twitterSignOut"></td> </tr> <tr> <td>User Info</td> <td id="twitterUserInfo"></td> </tr> <tr> <td>Tweet Box</td> <td id="twitterTweetBox"></td> </tr> </table>
分かりやすいように、各要素は別々のIDをふってあります。
Connect Buttonは実際ログインボタンとして機能しますが、少しややこしいのですが「Twitterにログインしていること」と「アプリケーション(ブログ)にコネクトしていること」は別の意味になります。ですから、Follow Buttonでフォローしてもらったり、Tweet Boxでコメントしてもらったりする前に必ずコネクトしてもらわないといけません。
その辺りの処理はJavaScriptで記述することになります。
@Anywhereを制御するJavaScript
サンプルはこちらです：Twitter @Anywhere Test
まずは、＠Anywhereで提供されているJSファイルを読み込みます。
<script src="http://platform.twitter.com/anywhere.js?id={あなたのAPIキー}&v=1"></script>
これは、HEADタグ内でもこれから説明するJavaScriptコードの直前でもいいでしょう。
自分のAPIキーを入れることを忘れないで下さい。
すでに書いた通り、コメントシステムで使いたい「Follow Button」「Tweet Box」はどちらもコネクト済みであることが前提です。ですので、コネクトしているかどうかを判断するロジックを埋めないと正常な動作は保証されません。
それを踏まえたコードを書いてみました。
下記は、結構動作が重たいのでbody閉じタグの直前に設置することをおすすめします。
var permalink = '<$MTEntryPermalink$>';
/**
* コネクト済みの場合の処理
*/
function anywhereConnected(twitter) {
// コネクト済の場合はユーザー情報が取得できる
// データの呼び出しは、user.data('データ名')
var user = twitter.currentUser;
// コネクトユーザー情報の表示
document.getElementById('twitterUserInfo').innerHTML
= '<img src="'+user.data('profile_image_url')+'" alt="'+user.data('screen_name')+'" /><br />'
+ '<a href="http://twitter.com/'+user.data('screen_name')+'" target="_blank">'+user.data('name')+'</a><br />'
+ '<b>現在地</b> '+user.data('location')+'<br />'
+ '<b>Web</b> <a href="'+user.data('url')+'" target="_blank">'+user.data('url')+'</a><br />'
+ '<b>自己紹介</b> '+user.data('description')+'<br />'
+ '<a href="http://twitter.com/'+user.data('screen_name')+'/following" target="_blank">'+user.data('friends_count')+'</a>following<br />'
+ '<a href="http://twitter.com/'+user.data('screen_name')+'/followers" target="_blank">'+user.data('followers_count')+'</a>followers<br />';
// サインアウトボタンの表示
document.getElementById('twitterSignOut').innerHTML
= ' (<a href="javascript:twttr.anywhere.signOut();">Sign out</a>)';
// フォローボタンの表示
twitter('#twitterFollowButton').followButton("yager");
// コメント欄の表示
twitter('#twitterTweetBox').tweetBox({
counter: true,
width: 500,
height: 50,
label: "ツイッターでコメントが書けます",
defaultContent: "@yager ここにコメントをお願いします " + permalink
});
}
/**
* コネクトボタンを設置する処理
*/
function anywhereConnect(twitter) {
twitter("#twitterConnectButton").connectButton({
// サイズ指定 {small | medium | large | xlarge}
size: "large",
// コネクト後の処理
authComplete: function(loggedInUser) {
twttr.anywhere(anywhereConnected);
},
// サインアウト後の処理
signOut: function() {
location.reload(true)
}
});
}
/**
* @Anywhere を初期化
*/
twttr.anywhere(function(twitter){
anywhereConnect(twitter);
// Connect OK!
if (twitter.isConnected()) {
anywhereConnected(twitter);
}
// Connect NG!
else {
// Do something to connect.
};
});
まず、一番重要なのは初期化を行うtwttr.anywhere関数の中でコネクトしているかどうかを調べている「twitter.isConnected()」です。マニュアルでは「twitter.isConnected」となっていますが、後ろに「()」をつけて関数形にしないと正常に動作しませんでした。また、この条件分岐を行わないとコネクトしていないのにTweet Boxが表示されてしまい、空更新の原因になってしまいます。
それから、anywhereConnect関数の中で呼び出している「twitter(‘#twitterConnectButton’).connectButton()」にはパラメータオブジェクトを渡すことができます。その中で、authCompleteはコネクト成功時の処理、signOutはサインアウト時の処理を記述できます。ブログオーナーとしてはサインアウト機能は特に設置しなくても良いかもしれませんが、実装する場合うまくJavaScriptで完結する方法が思いつかなかったのでページをリロードするようにしました。リロードすると再度初期化処理が実行されますので、未コネクト状態の表示になります。
Topsy API と連携してツイート履歴も表示
コメントシステムとして使おうと思うとこれだけでは不十分で、できればツイート結果が画面に表示されてほしいです。そのために、すでに紹介したことのあるTopsy APIと組み合わせてみると良いかも。
・Topsy API を使ってブログに「つぶやかれ数」を自由にレイアウトする
Topsy APIはあくまでツイートに含まれるURLで検索するので、TweetBoxを初期化する時に「defaultContent」オプションでURL情報をあらかじめコメント欄にセットしています。ボクが使っているのはMovableTypeなので、JavaScriptのpermalink変数に<$MTEntryPermalink$>をセットしていますが、location.hrefとかでも代用可能かと思います。
さらに、コメント投稿後にTopsy APIを更新するためTopsy APIを再度呼び出して更新します。コメント投稿後に実行されるonTweetオプションが便利です。TweetBoxの初期化を下記のように変更すれば良さそうです。
// コメント欄の表示
twitter('#twitterTweetBox').tweetBox({
counter: true,
width: 500,
height: 50,
label: "ツイッターでコメントが書けます",
defaultContent: "@yager ここにコメントをお願いします " + permalink,
onTweet: function() {
// Topsy APIを更新
script = d.createElement('script');
script.type = 'text/javascript';
script.src = 'http://otter.topsy.com/trackbacks.js?callback=topsyCallback&url='+encodeURIComponent(location.href);
d.getElementsByTagName('head')[0].appendChild(script);
}
});
一応、このブログのコメント欄に実装していますが、うまく動いているのかな？（確認不足）
まとめ
しつこいですがｗサンプルはこちらです：Twitter @Anywhere Test
公式ドキュメントがおかしかったり、コード自体特に認証周りのロジックが曖昧な気がするので、これからアップデートで変更が入るかもしれません。色々情報が不足しているので必要に応じてこのページ内容も加筆、修正していく予定です。
何かおかしいところを発見したら教えてください！
▼Twitter API プログラミング (単行本)
