19
April
2010
72
comments reply

Twitter＠Anywhereの使い方WordPress編

Twitter@Anywhereの使い方WordPress編
Twitter が発表した @Anywhere、各種サービスがこぞって取り入れることでどんな風に WEB が変わっていくのかとても楽しみです。Google が連発するマイナーサービスのように出ては消え、なんてことにはならないといいですね。Getting Started の翻訳記事もチラホラ出てきましたが、こういうところに書いてあるサンプルやドキュメントなどは、始まったばかりのサービスならなおさら、だいたい内容が意味不明です。平気でウソも書いてありますが、訂正されることはあまりありません。
なので、良識ある wpist の皆さんは原文や日本語になった記事を読んだだけで納得してしまわないように。見聞きしただけでその世界がわかった気になるのはクラブのおねーちゃん達の得意技です。皆には目先の欲望に振り回されず、その浅さを愉しむ大人になって欲しい。
そういったわけで wpxtreme では現場第一主義を貫き、実際にやってみたちゃんと動く @Anywhere の使い方を長々とお届けします。

まずは API キーを取得しよう

Twitter の機能がラクチン API でボク達のサイトでも利用できるようになるという夢の @Anywhere。まずは「http://example.com ってサイトで使いますよ」っていうことを Twitter 様に申し出る必要があります。そうすると Twitter 様から「じゃぁ、お前んとこはこの API キーを使え」と呪文（APIキー）を授けられます。これはヨソのドメインでは使えません。めんどくさいですがイイナリになるしかないのでこの手順を踏む必要があります。

New Twitter Application をクリックすると以下のような画面になります。

  • Application Name：サイトの名前
  • Application Website： サイトのURL
  • Callback URL：とりあえず同上で OK
  • Application Icon：72x72くらいでどうでしょう（指定しなくても OK）
  • CAPTCHA：2単語読んで

のように必要事項を入力して［Register application］ボタンをクリックすると利用規約のウインドウが表示されるので［Accept］ボタンをクリックします。無事登録完了すると以下のような画面になります。サンプルコードの id=なんちゃら が API キーなのでメモっておくように。どうせ HTML ソースに丸出しになるのでモザイクをかける必要も彼女に内緒にしておく必要もありません。

これで自分のサイトで @Anywhere を使う準備ができました。

WordPress で利用するには

functions.php に以下を追加して、@Anywhere のスクリプトと @Anywhere を使用するアナタのスクリプトを読み込ませます。wp_enqueue_script() だと @Anywhere の URL の最後に &ver=2.9.2 とか WordPress が勝手に付けますがちゃんと動作しますのでご安心ください WebKit系でちゃんと読めないようなので echo に変更。

add_action('wp_print_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts(){
/*
  wp_enqueue_script( // @Anywhere のスクリプト
    'twitter-anywhere', 
    'http://platform.twitter.com/anywhere.js?id=アナタのAPIキー&v=1',
    array(), false, true
  );
*/
  echo '<script src="http://platform.twitter.com/anywhere.js?id=アナタのAPIキー&v=1" type="text/javascript"></script>';

  wp_enqueue_script( // @Anywhere を使うアナタのスクリプト
    'my-script', 
    'http://example.com/〜/my-script.js',
    array(/* 'twitter-anywhere' */), false, true
  );
}

WprdPress で、っていうのはコレだけなので詐欺的な記事タイトルですね。

さぁ、始めるよ！

@Anywhere は jQuery ライクな 使い方ができる API です。my-script.js とかなんとかを作成して以下のような書き方で利用すると良いでしょう。

jQuery(document).ready(function($){
  var myTwitter;                 // オレ達が使う Twitter オブジェクト用変数。

  // @Anywhere を初期化。初期化完了後は onAnywhereLoad をコールバック！
  twttr.anywhere(onAnywhereLoad /*, ウインドウコンテキストも指定可能 */);
  
  // @Anywhere 初期化コールバック。オレ達専用の初期化はここで行う。
  function onAnywhereLoad(twitter){
    myTwitter = twitter;         // オレ達用に @Anywhere から授けられた Twitter オブジェクトを保存しておく。
    myTwitter.linkifyUsers();
    myTwitter('.hovercards-target').hovercards();
    myTwitter('.follow-kz').followButton("kzxtreme");
    /* ... などなど、お好みの初期処理を記述 */
  }

  // myTwitter を使っていつでもどこでも @Anywhere を利用できます。
  // クリックされる度に指定ユーザーのフォローボタンを追加
  $('.add-follow-button').click(function(){
    myTwitter('.follow-user').followButton($('input#user-to-follow').val());
    return false;
  });
});

anywhere.js を読み込むと twttr オブジェクトが使えるようになります。twttr は 初期化とかサインアウトとかを行うための、ボク達が色々イジくれるオブジェクトとは別次元に存在するオブジェクトです。
まず始めに twttr.anywhere() で @Anywhere を初期化します。引数にはコールバック関数 onAnywhereLoad() を指定し、ソコで自分の初期化処理を行います。一部のウインドウコンテキストでのみ @Anywhere を使いたい場合は、第2引数にソレを指定します。未指定の場合は、現在のページがまるっと対象です。
onAnywhereLoad() で受け取った twitter がボク達が色々イジくれる Twitter オブジェクトです。上のコードのように myTwitter に Twitter オブジェクトを保存しておけば onAnywhereLoad() の外でも使うことができて便利ですね。ただし実際にお外で使うときは、オブジェクトが null だか undefined じゃないことをまず確認しましょう。
この Twitter オブジェクトには jQuery のセレクタと同様に操作対象となる DOM 要素を指定することができます。

  • myTwitter.linkifyUsers()
    linkifyUser() の対象は myTwitter のウインドウコンテキスト全体（ページ全体）。
  • myTwitter('.linkify-target').linkifyUsers()
    linkifyUser() の対象は myTwitter のウインドウコンテキスト内で linkify-target クラスを持つ DOM 要素以下すべて。

ただし、このセレクタは twttr.anywhere() で初期化を行う前の DOM要素しか見ていません。twttr.anywhere() 以降に javascript で追加された DOM 要素はセレクトしてくれないので注意してください。

Linkify - ユーザー名を自動でリンクさせる

例えば ページ中のテキストに @kzxtreme のような Twitter ユーザー名があれば、それに Twitter ユーザーページへのリンクを付けてくれる。以下の文章をよく読んで linkify ! リンクをクリックしてみよう。@kzxtreme 他がリンクされるぞ。変化の瞬間を見逃さないようにね。

この文章には class="linkify-target" が指定されているので、この @kzxtreme にリンクが付けられるはずだ。大文字小文字は関係ない @KzXtReMe。存在しないユーザー名でもリンクする @sonnnayatu_ine_yo。非twitter ユーザー名 @ab-bc @オレ様 だとどうなるかは己の目で確かめて欲しい。@Anywhere の動向については @anywhere をフォローすると良いぞ。wpist なキミは @jawordpressorg もマストだ。

では、心を無にして、レッツ linkify！

どうだね！非常に地味だろう！ linkify はちょっと便利だけども、たかがリンクを張るだけなのでイマイチ面白くない。真面目過ぎてツマランのだ。視野がチョー狭い思春期ならともかく、大人ならもっと遊び心が欲しい。それが大人の余裕。私年上じゃないとダメなの、というえびちゃんの真意を読み取ろう。この linkify のサンプルは以下のようなコードで実現している。

$('.linkify').click(function(){                 // linkify クラスをもつ DOM 要素がクリックされた！
  myTwitter('.linkify-target').linkifyUsers();  // twttr では linkifyUser() はできんのだよ ...
  return false;                                 // このクリックのイベントはここで終わらせてくれ。
})

日本語で説明すると linkify クラスを持つアンカーリンクがクリックされたときに「linkify-target クラスを持つ DOM 要素以下すべてに対して linkifyUsers() を実行」してユーザー名のリンクを作成しています。
なお、実際にはこのように閲覧者のアクションで linkify することはないはずなので、初期化のコールバック関数内で始めから linkifyUsers() しちゃいましょう。

コネクトしよう

以降のサンプルがフルで動作するためには、今まさにキミがウチのサービスにサインイン（ログイン）＝Twitter にコネクトしている必要がある。していなくても必要になったらサインイン的コネクトウインドウが出てくるのでヨロシク。コネクトのためのボタンは connectButton() を使って以下ようなコードで表示する。

myTwitter('#signin-anywhere').connectButton({
  authComplete: function(signedInUser){  // コネクト／サインイン完了後のコールバック
    /* 好きなことができます */
  }
});

これで id が signin-anywhere の DOM 要素内にボタンが表示される。コネクト／サインイン後に何もしない＝ボタンの表示だけなら、authComplete オプションなしで単に myTwitter('#signin-anywhere').connectButton() などとすれば OK。なお、原文には signOut っていうオプションでユーザーがサインアウトしたときに何かやれまっせ的なことが書いてあるが、そんなイベントは今のところ発生しないぞ？

アンコネクト／サインアウトのためのボタンは提供されないが、twttr.anywhere.signOut() を実行すればサインアウトできる。ので以下のように何かのクリックイベントで呼んでやれば良い。クリックしてもシー・・・ンとしてるので親切な方は「サインアウトしましたよ」とか表示してあげてください。

$('.signout-anywhere').click(function(){
  alert('signout しますー');
  twttr.anywhere.signOut();
  return false;
});

右のリンクをクリックするとサインアウトします... 【サインアウトする】

サインインしたりサインアウトしたりコネクトしたりアンコネクトしてみるが良い。非コネクト状態でこの記事を一通り読んだ後で、コネクトしてからこのページの表示を更新するとまた違った世界が見えてくるはずなのでぜひお試しください。

ところで、ユーザーがコネクト／サインインしているかの判定やユーザー情報の取得方法を説明している Welcome to @Anywhere | dev.twitter.com の Working with the current user にある以下のサンプル（一部）は 2010.4.18 16:00 現在ウソなので信用しないように。

if(twitter.isConnected) {
  currentUser = twitter.User.current;
  screenName = currentUser.data('screen_name');

以下がこのコードの具体的な真実だ。

  • twitter.isConnected はいつでも true。だって関数だもの。isConnected() だろ。
  • twitter.User は attributes を設定するファンクション。current なんて無い。
  • data なんてファンクションは無い。

正しくは、現在の（コネクト／サインインしている）ユーザーの情報は以下のように取得する。

if(myTwitter.currentUser)
    screenName = myTwitter.currentUser.attributes.screen_name;
    profileImage = myTwitter.currentUser.attributes.profile_image_url;

サインインしているコネクテッドなキミならわかると思うが、上に表示されているキミの情報が Twitterオブジェクト.currentUser で取得できる。それに続けて .attributes.screen_name などとたどれば必要な値を取得することができる。例えば、現在コネクト／サインインしているユーザーのプロフィール／自己紹介の内容なら以下のようにすれば OK。

myTwitter.currentUser.attributes.description

アナタの自己紹介を 取得する
[your info]

Hovercards - ユーザー名にホバーするとツールチップが！

次は linkify よりちょっとワクワクするぜ。先ほどの linkify されたユーザー名にマウスポインタをマウスオーバー（長いので以降ホバー）させると、ユーザの公開情報がイカしたツールチップで表示されるのだ。そのツールチップのことをホバーカードと呼ぶ。商標取るなら今のうちだぜ。では早速下の @kzxtreme にキミのマウスポインタをホバーさせてみて right now !

この @kzxtreme にレッツホバー！

どうだね！ちったぁ オォッ ってなったかね！ツールチップ内の「もっと読む ...」をクリックするとさらに詳細な情報が表示させるぜ。hovercards() では指定の DOM 要素内をまず linkify して、そのホバーイベントで ajax なツールチップを表示させている。こ、これがマッシュアップってやつか！違うな、ハッシュドポテト食べたい。こういうオシャレなことがしたかったら、以下のようなコードを我らがイニシャライザーコールバック onAnywhereLoad() に追記します。hovercards で 1 語だから c は小文字でヨロシク。

myTwitter('.hovercards-target').hovercards();

とくに DOM 要素を限定せずページ全体に適用したい場合は myTwitter.hovercards() で OK。この hovercard は対象リンクが画面上のどこにあっても、リンクの上下いずれかシックリくる方に表示される。ステキ。

素のユーザー名以外でもホバーカードできる？

はい、私達はアナタが好き勝手に書いたリンクテキストや画像や、そしてリンクもクソも無い素のテキストにさえも ホバーカード を使えるように設計しました。すばらしい、そういった心配りがあるから Twitter はバブリーな存在になれるのだ。例えば既にリンクとなっている文章がユーザー名を含んでいる場合は、hovercards() の infer オプションに true を指定する。

myTwitter('.hovercards-target-infer').hovercards({
  infer: true
});

onAnywhereLoad() でこんな風に書いておけば、下の class="hovercards-target-infer" なオレ様のアンカーリンクでもホバー時に hovercard が表示される。

リンク内のテキストの一部に @kzxtreme なんてユーザー名を含む場合もOK

うむ、使いどころがよくわからんぞ。リンクテキスト内のユーザー名捜索には正規表現を使っているとのことです。

えっ、じゃぁ @jawordpressorg @kzxtreme みたいにユーザー名が複数ある場合は？

始めに一致するユーザー名が hovercard の大賞おめでとう、ちゃう、対象になります。

次にユーザー名を含まないテキストや、もはやテキストですらない画像であってもホバーカードはご利用可能です。VISA/MASTER カードに迫る勢いだね。キタるべきカード至上社会に備えよ！ワンランク上を行く大人のステイタス、ホバーカード。まずはイメージから。

recent kzやぁ！オレは kz。
もうさすがに WEB 3.0 とか言い出すヤツはいないと思ってるよ！
ところで、そろそろ「なんで今ドキえびちゃんなんですか？」っていうご意見があっても良さそうなんだけど、一向に無いってことはまだまだえびちゃんはアツイってことなんだね。
ちなみに、はてブ的にはこのサイトのキーワードは「WordPress, えびちゃん」だ。計画通り。

こういう場合は hovercards() の username オプションにユーザー名を指定すれば OK。パンが無ければケーキでいいじゃないの法則です。以下のようにオプション値にファンクションを書いてさんざん好きなことをした後で、思い出したように return でユーザー名を返しても良いです。

myTwitter(".hovercards-target-image").hovercards({
    username: function(node){  // ファンクションにすると「この」DOM要素のオブジェクトを受け取れる。  
      /* do stuff */
      return node.title;       // img 要素なら title 属性にユーザー名を指定しておくと良いね！
    }
});

ん、title 属性の値をヒント表示するブラウザだと、ウザい。では素テキストの場合。通常は太字にしたり色変えたりしないとホバーカードが出てくるなんて誰も気づかんのでご注意ください。以下、サンプルのご利用方法：

  • 「けーずぃーえくすとりぃーむ」にホバー！
  • 何も起こらない ...
  • 「ホバーカード対応させる！」のリンクをクリック
  • 黄色くなった ...
  • 怪訝な表情で再度「けーずぃーえくすとりぃーむ」にホバー
  • おおぉ「けーずぃーえくすとりぃーむ」がホバーカード対応されておる！
  • 嬉しくって何度もホバー
  • 「ホバー！」だらけ

けーずぃーえくすとりぃーむ
上のテキストをホバーカード対応させる！

これは、以下のような jQuery を用いた javascript プログラミングで実現されています。

$('.hovercards-text').click(function(){
  $('.hovercards-target-text').css('color', 'yellow');
    myTwitter('.hovercards-target-text').hovercards({						
      username: function(node){
        $(node).append('  ホバー！');
	return 'kzxtreme';
      }
    });
    return false;
  });
あなたのそばに、フォローボタン

今までは、一般の方はサイト上で follow me とか言っても twitter.com/ユーザー名 へのリンクを張るのが精一杯でしたが、@Anywhere の登場によって 本物の「フォローする」ボタンを表示させることができるようになりました。見た目は諸々の状態によって変化します。このボタンは iframe の中にいるのでデザインは 変更できません。よね？

オレをフォローするボタン フォローしたり解除したりしてみて。

@jawordpressorg をフォローするボタン もうフォローしてるよね？

@jpwordpressorg をフォローするボタン そんなユーザーはいません。

ここ にユーザー名を入力して、
フォローするボタンを 追加 ...

Twitter 上での動作通り、ボタンをクリックすると確認無しでフォローします。ログインしてない場合は、まずログインウインドウが表示されます。なお、自分をフォローするボタンをクリックすると［Can't follow @kzxtreme］な disabled ボタンに変わります。ちぇっ。

Tweet Box

下のツイートボックスからダイレクトにつぶやけます。アプリケーションはこのサイトなので「wpxtremeから」のツイートとなるんですよ、ワォ！

（ここにつぶやいた内容が表示されます。）

これも簡単、サンプルコードは以下のとおり。

myTwitter("#tweet-box").tweetBox({
  counter: true, // あと何文字ですよの表示の有無
  height: 100,
  width: 620,
  label: 'レッツツイート！',
  defaultContent: 'ツイートボックスに予め入力しておく文字列',
  onTweet: function(tweet, renderedTweet){
    $('#tweeted-text').html(renderedTweet);
});

onTweet にはツイート完了後の処理を書くことができます。引数の tweet は生のつぶやき、renderedTweet はマークアップされたつぶやきです。サンプルではツイート後に id="tweeted-text"の DOM 要素内へマークアップされたつぶやきを放り込んで表示しています。

CONCLUSION

以上、ナガナガと説明しましたがコレこそが今 @Anywhere でちゃんと動くサンプルです。どうせまたコロコロ変わると思うので、うまく動かないうまく動かないうまく動かないと悩まなくてもよろしい。あんまりクヨクヨするとハゲるぜ。
ドMなアナタは @Anywhere documentation を頼りに試行錯誤して悶絶してみるのもいいだろう。

動作確認バージョン
  • @Anywhere 1
  • WordPress 2.9.2

RELATED

  • No related posts.
     

72 Comments