risou style

2010-04-15

Twitter の @Anywhere を使ってみた

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

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

Twitter / ?

 早速使ってみました。といっても、はてなダイアリーでは <head> タグ内をいじることはできないので、今使用しているもう一つのブログ( no title )で試してみました。以下の内容は、公式ドキュメント( Twitter / ? )を参考にしていますが、私の英語読解力には難があるので、翻訳精度は低めに見積もってください。

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

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

 以下、少し長くなりますが、ひとつひとつ解説していきます。実際のサンプルは、 no title をご覧ください。

(ただし、2010/04/16 AM4時現在、いくつかの機能がうまく動いていません。正常に動作し次第、サンプル、当記事ともに修正します。ご了承ください)

(全ての機能の動作確認ができました)

基本的な実装方法

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

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

<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 を記述する時点で簡単だとは思いませんが……。

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

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

@mokk23@mokk23 2010/05/10 17:45 はじめまして!@anywhereで、立ち上げたばかりの自サイトでフォローボタンを設置する際に参考にさせていただきました。

大変わかりやすく、参考になりました。
ありがとうございます。

ありがとうございますありがとうございます 2010/05/26 15:20 認証ボタン等にも問題があり、相当時間を費やしました。
良質な記事で助かりました

risoufrisouf 2010/06/01 18:48 参考にしていただきありがとうございます!
お役に立ててなによりです。

Cafe JintaCafe Jinta 2010/06/01 22:22 はじめまして!
とってもわかりやすくて参考になりました。
あとは@anywhereがiPhone上で動作してくれるようになることを願ってます。

risoufrisouf 2010/07/01 08:54 >Cafe Jinta さん
iPhone版のSafariでは動作が確認できましたよ。

>ellegarden1979
こちらこそ参考にしていただいてありがとうございます。
記事にした甲斐があります。

chairochairo 2011/07/06 14:09 初めまして。
今、とある企業サイトの制作をしていて、つまづいています・・・

http://www.rs-f.net/t/2010/04/15/twitter_anywhere/

のページをIE6で見ると真っ白になるのですが、
これは@anywhereがIE6に対応していないからでしょうか・・・?

risoufrisouf 2011/08/24 01:54 IE6 で動かないという情報は目にしたことありますが、
自分には試す環境がないため、実際のところどうかはわかりません。
お役に立てず申し訳ないです。

bonbon 2011/08/28 10:29 read only の問題ですが、当方でも動かないのでこれだろうと思うのですが、アクセス権限変更前の API を Twitter で接続許可していた場合は、一度接続許可をキャンセル(削除)して、再度接続許可する、とはアプリケーションを削除するという事でしょうか? 一旦削除してname websiteを同じにして登録しなおしましたが、read & write には成りませんでした。どうすればよいのでしょうか?

risoufrisouf 2011/08/29 22:40 >bonさん

https://dev.twitter.com/apps
で自分が登録したAppを選択して、settingsタブのApplication TypeのAccessをread and writeにしていただければ、設定できると思います。
接続許可云々のところは、上記変更後、
http://twitter.com/settings/applications
にアクセスして、Appを一度削除(Revoke)してから、再度登録する、ということです。

……質問の答えとして十分でしょうか?

bonbon 2011/08/29 23:48 risoufさん、ありがとうございます。一生懸命detailのところで探していました。解決しました。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/risouf/20100415/twitter_anywhere
Connection: close