Twitter @Anywhereを導入（その２：コード編）

ChanTo.me Twitter JavaScript

前回に続いて @Anywhere の導入について、実際のコードについて書きます。


まず、@Anywareに関する情報は、http://dev.twitter.com/anywhereにあります。

そして、日本語訳もすでにされている方がおられます。

Twitter 新 API のドキュメント「Getting Started with @Anywhere」日本語訳


今回紹介するコードは、生活チェックサービス「ChanTo.me」で使っているコードの抜粋です。


アプリケーションの登録

http://twitter.com/apps にアクセスし、「新しいアプリケーションを追加>>」をクリックしてアプリケーションを登録します。

この登録については色々なサイトに書いてありますので、注意点だけ書いておきます。


Callback URLについて

これはOAuthを使う時に利用しますが、@Anywhereでは使用されません。

ただ空白では使えませんので、「Application Website:」と同じドメインのURLを記入する必要があります。


Default Access type:

デフォルトは「Read-only」になっています。「Twitter IDへのリンク追加(Auto-linkification of @usernames)」と「Twitter IDへのツールチップの追加(Hovercards)」だけであればそれでも良いのですが、フォローとツイートボックスを使う場合は、「Read-Write」にする必要があります。


JavaScriptの読み込み

まず必要なのは当然JavaScriptの読み込みです。

コードは次のようになります。

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

ここの「YourAPIKey」は、先にアプリケーション登録した時に表示される「Consumer key」です。


準備はこれだけです。後は、やりたい事を書くだけです。


Twitter IDへのツールチップの追加(Hovercards)

ツールチップの例は、こちらのサイトを見てください。→ http://www.chanto.me/kumoma/

右の「プロフィール」にある「@nakachin」にマウスオーバーすると表示されます。

    twttr.anywhere(function (twitter) {
        twitter("#navi_area div.contents").hovercards();
    }

この「#navi_area div.contents」の部分は、ツールチップを表示するTwitter IDを検索する範囲を、jQuery(http://api.jquery.com/category/selectors/)のselectorの記述方法を利用して書きます。

これで、@xxx を探して「xxx」の部分をマウスオーバーするとツールチップが表示されるようになります。

当然、検索する範囲がロードした後でないと使えませんので、http://www.chanto.me/ではonloadに書いています。


単純な使い方は、これだけです。もっと詳しい使い方をしたい場合は、マニュアルをご覧ください。


ツイートボックスの表示

ツイートボックスを表示するのは以下のコードになります。

<script type="text/javascript">
    twttr.anywhere(function (twitter) {
        twitter("#twitter-dialog-tweet").tweetBox({
            label:＜ツイートのラベル＞,
            defaultContent: ＜デフォルトのツイート内容＞,
            onTweet:function (tweet,renderdTweet){
                ＜ツイート後の処理＞
            }
        });
    });

「#twitter-dialog-tweet」の部分は、ツイートボックスを表示するhtmlの部分を指定します。

labalとdefaultContentとonTweetは、通常は必要ありません。

http://www.chanto.me/では、ツイート後にダイアログを閉じるようにしているので、その処理をonTweetに書いています。

また、defaultContentは、動的に変えたいので、djangoのtemplateを使って適宜書き変えています。

ただ、前の記事にも書いた通り、ツイートボックスの入力域を選択しないと「Tweet」ボタンが押せませんのでご注意ください。


Twitter APIと@Anywhereの使い分け
ChanTo.meでは上記のように使っているのですが、Twitterアカウントでログインしているユーザがツイートする場合には、@Anywhereではなく、Twitter APIを使っています。

これは、@Anywhereを使うのであれば、Twitterアカウントでのログインしていても、また、@Anywhereにログインしないといけないためです。これがなんとかなるとうれしいんですけどねえ。たとえば、@AnywhereでもCallbackを実行してもらうようにするとか。


ログアウトのリンク表示

@Anywhereのログアウトは、以下のようなリンクで行えます。

<a href="#" onClick="twttr.anywhere.signOut();">Logout</a>

ログアウトは普通はあまりいらないと思うのですが、複数のTwitterアカウントを使っている人もいますので、あった方がいいでしょう。

本当は、ログイン状況を確認してログアウトを表示するかどうか決めたいのですが、残念ながらその部分がうまく動かないので、常にログアウトを表示しています。


マニュアルの不明点

ところで、マニュアルを見ると、twttr.anywhereのコードが以下のようになっています。

twttr.anywhere("1", function (twitter) { ...

また、こういうコードもあります。

twttr.anywhere(anywhereApiKey, "1.0.0", onAnywhereLoad);

しかし、これらの記述ではまったく動作しませんでした。このコードの意味をご存じの方がおられたら、ぜひ教えてください。


大したコードではありませんが、ご参考までにご覧ください。