Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

JavaScript 小技集

Twitter @Anywhereをブログのコメントシステムにする方法

投稿日:


@Anywhere
Welcome to @Anywhere | dev.twitter.com
もはや、WEB界隈ではコミュニケーションプラットフォームとして定着しつつあるTwitterですが、先週、自分のサイトにJavaScriptを使って簡単にTwitter機能を導入できる@Anywhereというサービスが発表されました。こちらにドキュメントが公開されているのですが、サンプルコードがまともに動かなかったり、APIの説明が不十分だったり、今すぐに導入するのはかなりハードルが高いです。
というわけで実際にサンプルを紹介する前に、日本人に非常に分かりやすいエントリーを2つほど紹介しますので、そちらで基本的な使い方を覚えていただければと思います。
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」の3つを使います。

<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);
}
});

一応、このブログのコメント欄に実装していますが、うまく動いているのかな?(確認不足)

まとめ

しつこいですがwサンプルはこちらです:Twitter @Anywhere Test
公式ドキュメントがおかしかったり、コード自体特に認証周りのロジックが曖昧な気がするので、これからアップデートで変更が入るかもしれません。色々情報が不足しているので必要に応じてこのページ内容も加筆、修正していく予定です。
何かおかしいところを発見したら教えてください!
Twitter API プログラミング (単行本)
4862670849

-JavaScript, 小技集

執筆者:

関連記事

[N]ネタフル x [S]シカマケ = ブログデザイン勉強会 第1回に参加

日本のトップブロガーであるネタフルのコグレさんが主催されており、先ほど紹介した「視覚マーケティングのススメ」の著者であるウジトモコさんを講師にお招きして行われる、ブログデザイン勉強会の第1回目が昨日開 …

no image

見ているページのHTMLソースを表示するブックマークレット(Yahoo!Pipes版)

この辺のエントリーに触発されてブックマークレット作りました。 ・URLを渡すとページの内容(htmlソース)をJSONPとかで取得できるAPIをYahoo! Pipesで作った(管理人日記) &#82 …

MacのAutomatorで楽天kobo「kobo Touch」に最適なcbz形式ファイルを作成する

ちょうど1週間前に発売した楽天koboですが、サービス開始時のクオリティの低さに悪評が絶えず、炎上案件となってしまっているようです。 ・「大きなミスを犯してしまった」――楽天koboに何が起きたのか …

no image

第15回:見ているページをAnother HTML-lintで文法チェックするブックマークレット

サイトを作ったら、見た目の確認も重要ですがマークアップの文法チェックも重要です。別にW3C信者という訳ではありませんがSEOの面でもstrictなHTMLの方が良さそうなのでできる限り対応した方が良い …

no image

AmazonのURLを短くするブックマークレット

今日、はてブ経由でこんな豆知識を仕入れました。 もともとAmazonの商品ページは、書籍であれば10けたのISBNコード、それ以外の製品もASINの10けた番号さえあればアクセス可能だ。 via: 3 …

スポンサードリンク

スポンサードリンク