Twitter の @Anywhere を使ってみた

(2010/04/17 15:00 追記あり。赤字で表記しています)

　昨日、 Twitter が新しいサービス @Anywhere を公開しました。

http://dev.twitter.com/anywhere

　早速使ってみました。といっても、はてなダイアリーではタグ内をいじることはできないので、今使用しているもう一つのブログ( http://www.rs-f.net/t/ )で試してみました。以下の内容は、公式ドキュメント( http://dev.twitter.com/anywhere/begin )を参考にしていますが、私の英語読解力には難があるので、翻訳精度は低めに見積もってください。

　@Anywhere には以下の機能があります。

オートリンク機能
ホバーカード機能
フォローボタン設置機能
ツイート用テキストボックス設置機能
ログイン&ログアウト機能
ログイン状態表示機能

　以下、少し長くなりますが、ひとつひとつ解説していきます。実際のサンプルは、 http://www.rs-f.net/t/2010/04/15/twitter_anywhere/ をご覧ください。
~~(ただし、2010/04/16 AM4時現在、いくつかの機能がうまく動いていません。正常に動作し次第、サンプル、当記事ともに修正します。ご了承ください)~~
(全ての機能の動作確認ができました)

基本的な実装方法

　@Anywhere は JavaScript で使用可能です。まずは、上記 @Anywhere のページでアプリケーションの登録が必要です。ここは省略します。英語ページであること以外は特に難しいことはないと思います。

　自分のページに必要な修正としては、タグ内に以下の記述が必要です( タグの外でもブラウザによっては認識できると思いますが、そのあたりは未検証です)。

<script src="http://platform.twitter.com/anywhere.js?id=(key)&v=(version)"
    type="text/javascript"></script>

　(key) には登録時に与えられた key を、 (version) にはバージョン(2010/04/15 現在は 1 ) を入力してください。上記記述によって、 anywhere.js を使用可能になります。あとは、 twttr.anywhere 関数に設定を記述した callback 関数を引数として与えてやれば OK です。 twttr.anywhere の使用例は各機能の解説部分に記載しますので参照してください。

オートリンク機能

　これは、サイト内に"@username"のように Twitter ID を、アットマークつきで表記した際に、そのユーザのページ( http://twitter.com/username )へのリンクを自動で付与する機能です。これを用いれば、 <a> タグを使用する必要がなくなります。

　実装方法は以下の通り。

<script type="text/javascript">
    twttr.anywhere(
        function(twitter) {
            twitter.linkifyUsers();
        }
    );
</script>

ホバーカード機能

　"@username"という文字列にカーソルを乗せた時に、そのユーザの基本情報( Bio や follow 数、 follower 数など)を表示します。

　実装方法は以下の通り。

<script type="text/javascript">
    twttr.anywhere(
        function(twitter) {
            twitter.hovercards();
        }
    );
</script>

フォローボタン設置機能

　クリックするとフォロー指定されているユーザをフォローできるボタンを設置できます。

　実装方法は以下の通り。

<script type="text/javascript">
    twttr.anywhere(
        function(twitter) {
            twitter('#follow_on_twitter').followButton("risou");
        }
    );
</script>

<div id="#follow_on_twitter"></div>

　"#follow_on_twitter" はボタンを設置する HTML タグの ID です( ID の文字列はなんでもいいです)。 followButton の引数にはフォローさせたいユーザの Twitter ID を入力します(上記の例では私の Twitter ID が入っています)。

ツイート用テキストボックス設置機能

~~(この機能は、2010/04/16 04:00 時点で動作が確認できていません)~~
動作確認できました。動かなかった理由と対策は、この記事のラスト(まとめの直前)に記載しました。

　Twitter のウェブページ上部にあるものと同じようなツイート用のテキストボックスを設置できます。パラメータの指定で、「入力可能な残り文字数の表示」や「テキストボックスのサイズ指定」などが可能です。

<script type="text/javascript">
    twttr.anywhere(
        function(twitter) {
            twitter("#tweetbox").tweetBox({
                counter: true,
                height: 100,
                width: 350,
                label: "Tweet to me:",
                defaultContent: "@risou "
            });
        }
    );
</script>

<div id="tweetbox"></div>

　フォローボタンと同様に、"tweetbox"という ID を指定しています。内部で設定しているパラメータについて以下にまとめました。

counter	入力可能な残り文字数を表示するかどうか。 true か false
height	テキストボックスの高さ
width	テキストボックスの幅
label	テキストボックスの上に表示する文字列。(ex. 今なにしてる？)
defaultContent	テキストボックスに最初から入れておく文字列。( mention やハッシュタグなど)
onTweet	(具体的にどういうものなのかわかってません)

　それぞれのパラメータは必要なければ設定しなくてもかまいません。

ログイン&ログアウト機能

　Twitter にログインするためのボタンを設置する機能と、ログアウトするためのリンクが用意されています。

<script type="text/javascript">
    twttr.anywhere(
        function(twitter) {
            twitter("#twitter_login").connectButton();
        }
    );
</script>

<div id="#twitter_login"></div> <!-- ログインボタン -->
<a href="#" onClick="twttr.anywhere.signOut();">ログアウト</a><!-- ログアウトリンク -->

　connectButton の引数でボタンのサイズを指定できます。 connectButton( { size: "small" } ) と書くと小さいボタンになります。 small 、 medium 、 large 、xlarge の4つが指定可能で、デフォルトは medium です。

ログイン状態表示機能

~~(この機能は、2010/04/16 04:00 時点で動作が確認できていません)~~
動作が確認できました。ソースコード内の修正箇所はコメントで記述しています。

　ユーザがログインしている場合に、ログイン情報を取得できます。以下の例では、ログインしている場合、ユーザの名前とアイコンを取得して表示、ログインしていない場合はログインボタンを表示しています。

　この機能については、公式のドキュメントにあるサンプルコードに間違いがあります。詳細は下記サンプルのコメント箇所を参照してください。

<script type="text/javascript">
    twttr.anywhere(
        function(twitter) {
            if (twitter.isConnected()) {        // twitter.isConnected から変更。関数呼び出しなので () が必要
                currentUser = twitter.currentUser;        // twitter.User.current から変更。
                screenName = currentUser.data('screen_name');
                profileImage = currentUser.data('profile_image_url');
                profileImageTag = "<img src='" + profileImage + "'/>";
                document.getElementById('twitter_state').innerHTML
                    = "logged in as " + profileImageTag + " " + screenName;
            } else {
                twitter("#twitter_state").connectButton({ size: "small" });
            };
        }
    );
</script>

<div id="twitter_state"></div>

　twitter.isConnected はユーザがログイン済みの場合に true を返します。 twitter.User.current は現在ログインしているユーザの情報です。

(現在、上記に示したサンプルページでは、 twitter.isConnected はログインしていなくても true が返ります。また、 twitter.User.current には data ファンクションがない、というエラーがでます)
( twitter.isConnected ⇒ twitter.isConnected() , twitter.User.current ⇒ twitter.currentUser )

Tweet Box が正しく動作しなかった問題(2010/04/17)

(この項目の内容は全て 2010/04/17 15:00 に追記しました)

　Tweet Box からのツイートやフォローボタンでのフォローをするには、アプリケーション(最初に登録したもの)のアクセス権限を read & write にする必要があります。デフォルトではアクセス権限は read only になっており、Anywhere API ( http://dev.twitter.com/apps ) の設定ページでは、 2010/04/17 現在アクセス権限を変更できません。

　この問題を解決するには、 Anywhere API ではなく、 Twitter API ( http://twitter.com/apps/ ) の設定ページでアクセス権限を変更する必要があります。また、アクセス権限変更前の API を Twitter で接続許可していた場合は、一度接続許可をキャンセル(削除)して、再度接続許可をしていただくことで、アクセス権限の変更が適用されます。

まとめ

　ややこしい設定をしなくても Twitter を貴方のページで簡単に利用できますよ、という新機能を簡単に解説しました。 JavaScript を記述する時点で簡単だとは思いませんが……。

　また、英語をちゃんと読めていないので、上記の説明には間違いがあるかもしれません。間違いに気づかれた方は教えていただけると幸いです。

　それよりもなによりも、誰か英語の読める人が翻訳してくれると助かりますし、できれば日本語解説つきの完璧なサンプルもあると嬉しいです(他力本願)。