Twitterの@Anywhereを使ってつぶやけるだけのクライアントを作る

どんだけ話題に乗り遅れてるねんっていう話なんですけど、いまさら@Anywhereを使ってみました。

つぶやけるだけのTwitterクライアント – Only tweet

きっかけは、つぶやけるだけの俺俺クライアントがほしくて、Twitterの機能をJSで簡単に導入できる「@Anywhere」の使い方メモ – Rewishでなんとなく出来ることは読んでいた@Anywhereで十分やんじゃあつくれるな、という理由です。

はっきり言ってChrome(Windowsだけ)のアプリケーション登録がないとまったく使えないしょうもないやつです。でもアプリケーション登録すればキャプチャみたいに使えます。結構便利。

JavaScriptだけで作れるので、JavaScriptしかわからないけどちょっとやってみたい人にはちょうどいい感じかもです。

開発環境を整える

開発と言っても@AnywhereはJavaScriptだけで使えるので、用意するものは、テキストエディタとTwitterのAPIキーだけです。

APIキーの発行と、読み込むソースまでは、Rewishの
Twitterの機能をJSで簡単に導入できる「@Anywhere」の使い方メモ – Rewishを見てもらえば分かると思いますし、面倒くさいので省略します。

アクセス権限については、http://dev.twitter.com/appsで変更できるようになってるので、Read & Writeにしておきます。

@Anywhereの基礎知識

twttr.anywhere(function(twitter) {
  // 引数のtwitterがデータを持っているため
  // ここで@Anywhereの機能が使える
});

@Anywhereの機能を使いたいときは上記のようにtwttr.anywhere(function(twitter){ });の中に記述します。

サインインとサインアウトなど機能の実装

サインイン

twitter.signIn()

を使うかRewishでも紹介されている

connectButton()

を使います。connectButtonは以下のように引数でオプションを指定することができます。

twitter("#hoge").connectButton({
  authComplete: function() {
    // 認証が完了した後の処理
  },
  signOut: function() {
    // サインアウトした後の処理
  }
});

が、今回はtwitter.signIn()を利用しました。一番簡単な方法は指定した要素のonclickで実行するだけです。超簡単ですね。

document.getElementById("signIn").onclick = function() {
  twitter.signIn();
  return false;
}

signIn()を実行すると、TwitterのOAuthウィンドウが開いてそちらで認証後に元のアプリケーションに返されます。返ってきたときに何か実行したい場合は、authCompleteというトリガーを使います。

↓のようにjQueryみたいにトリガーをbindすることができます。トリガーにbindするfunctionは2つ引数を持っていて、イベントハンドラのeと、@Anywhereから渡されるuserです。userには、サインインしたユーザーの情報が入っているので、2つ目の引数は必ず受け取りましょう。

twitter.bind("authComplete", function(e, user) {
  // hogehoge
});

Only Tweetでは、サインイン後に

• ユーザー名を表示
• ユーザー名の後ろにサインアウトリンクを表示
• 使い方をTweetボックスに置き換え

というように置き換えています。

受け取ったuserの使い方

user.data(プロパティ)でscreen_nameやアイコン画像などを表示できます。

sign.innerHTML = [
  '<p>Logged in as : <a href="http://twitter.com/' + user.data('screen_name') + '">',
    user.data('screen_name'),
  '</a> (<a href="javascript:void(0)" onclick="twttr.anywhere.signOut();">Sign out</a>)</p>',
].join('');

サインアウト

サインアウトアクション自体は任意の要素でtwttr.anywhere.signOut()を実行するだけです。HTMLに入れる場合は、アンカーのonclickにでも入れておけばいいと思います。

<a href="javascript:void(0)" onclick="twttr.anywhere.signOut();">Sign out</a>

サインアウト後に何か実行したいときはautoCompleteと同じように、signOutというトリガーにfunctionをbindします。

twitter.bind("signOut", function(e) {
  // hogehoge
});

アクセス時のサインイン判定

アプリケーションにアクセスしたときに、すでにサインインしているかどうかで表示する内容を変えたい場合

twitter.isConnected()

を利用します。既にサインインしていればtrue、そうでない場合はfalseが返されます。

if ( twitter.isConnected() ) {
  // サインインしている場合
} else {
  // サインインしていない場合
}

Tweetボックス（つぶやくやつ）の表示

サインインしているとき、指定したIDの要素にTweetボックスを表示します。これには文字数カウントやらつぶやくボタンやら含まれているので、表示すればそのままつぶやくことができます。ただしこのTweetボックスはiframeで書き出されるので動作の微調整とかは行えません。むーん不便。。

twitter("hoge").tweetBox({
  label: /* いまなにしてる？のところ */,
  defaultContent: /* 予め表示しておく文言 */,
  onTweet: function(e) { // Tweet後のコールバック
     // hogeking
  }
});

つぶやけるだけのTwitterクライアントの実装

サインイン前

サインイン後

CSSは置いておくとして、用意したHTMLはこんなのです。

<div id="wrap">
  <div id="header">
    <h1><a href="./">Only tweet</a></h1>
    <p id="sign"></p>
  </div>
  <p class="desc">つぶやけるだけのTwitterクライアント</p>
  <div id="tweetBox">
    <ol id="step">
      <li><em>HOP</em>: Connect with Twitterボタンを押す</li>
      <li><em>STEP</em>: OAuth認証画面でconnectを押す</li>
      <li><em>JUMP</em>: つぶやく</li>
    </ol>
    <p id="attention">Tweeted</p>
  </div>

  <div id="footer">
    <small>Powered by <a href="http://twitter.com/">Twitter</a>. | <a href="./about.html">about</a> | <a href="http://twitter.com/5509">5509</a></small>
  </div>
</div>
<div id="loadingBg"></div>
<div id="loading"><p>Connecting @anywhere...</p></div>

なんかソース的に微妙なところもあると思いますけど、俺俺クライアントなので放っておきましょう。JSで追加すればいいやんなところも書いてあったりしますし。

仕様を決める

• authCompleteでp#signをSigned inに書き換え、div#tweetBoxもつぶやけるように書き換え
• アクセス時にサインインしていなければ、p#signはサインインボタンを表示
• アクセス時にサインインしていれば、authCompleteと同じ状態にする
• 待ち時間が発生するような箇所ではローディングのくるくるを表示
• Tweetが成功したら、成功したよ！的な文言を表示する

使いそうなものを変数に、機能を関数にしておく

var d = document;
var $d = function(id) { return d.getElementById(id); };
var sign = $d("sign");
var tweetBox = $d("tweetBox");
var step = $d("step");
var loadingBg = $d("loadingBg");
var loading = $d("loading");
var attention = $d("attention");

だいたい2回以上使うようなものは変数にいれときます。使ってなくても気にしない。

// ローディングの表示
function showLoading() {
  loadingBg.style.display = "block";
  loading.style.display = "block";
}
// ローディングの非表示
function hideLoading() {
  loadingBg.style.display = "none";
  loading.style.display = "none";
}
// サインインの表示、サインインクリック時は一旦ローディングを表示する
function addConnect(T) {
  sign.innerHTML = "<a href='javascript:void(0);' id='signIn'><img src='img/connect.gif' alt='Connect with Twitter'></a>";
  d.getElementById("signIn").onclick = function() {
    showLoading();
    T.signIn();
    return false;
  }
  hideLoading();
}

やっぱり2回以上使いそうなものはfunctionにしておきます。使ってなくても気にならない。

@Anywhereを利用して実装する

twttr.anywhere(function(twitter) {
  // 基本的に処理はここに書く
});

サインイン時にHTMLを入れ替えるfunctionを定義しておく。

var addHTML = function(User) {
  sign.innerHTML = [
    '<p>Logged in as : <a href="http://twitter.com/' + User.data('screen_name') + '">',
      User.data('screen_name'),
    '</a> (<a href="javascript:void(0)" onclick="twttr.anywhere.signOut();">Sign out</a>)</p>',
  ].join('');
  
  twitter("#tweetBox").tweetBox({
    label: "Tweet, tweet, tweet, tweet and tweet",
    defaultContent: "",
    onTweet: function(e) {
      attention.style.display = "block";
      setTimeout(function() {
        attention.style.display = "none";
      }, 2000);
    }
  });
  hideLoading();
}

アクセスしたときにサインインしているか、いないかで行う処理を変える

if ( !twitter.isConnected() ) {
  // サインインしていない場合は、addConnectでサインインリンクを表示
  addConnect(twitter);
} else {
  // サインインしている場合はstepを非表示にして、tweetBoxを表示する
  var User = twitter.currentUser;
  step.style.display = "none";
  addHTML(User);
  hideLoading();
}

最後にauthCompleteとsignOut時にコールバックをbindする。

twitter.bind("authComplete", function(e, user) {
  // ステップを非表示にしてtweetBoxを表示後ローディングを隠す
  step.style.display = "none";
  addHTML(user);
  hideLoading();
});
twitter.bind("signOut", function(e) {
  // サインアウトが完了するまでローディングを表示する
  // #signを空にして、tweetBoxを削除して、addConnectを実行する
  showLoading();
  sign.innerHTML = "";
  tweetBox.removeChild(tweetBox.getElementsByTagName("iframe")[0]);
  addConnect(twitter);
  step.style.display = "block";
});

完成ソースコード

ちなみにJavaScriptは全て</body>直前に書いてるので、window.onload的なやつは必要ないです。そのまま実行しましょう。

<script src="http://platform.twitter.com/anywhere.js?id=r3awJe8TS1nZhH4hUxtk4w" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
var d = document;
var $d = function(id) { return d.getElementById(id); };
var sign = $d("sign");
var tweetBox = $d("tweetBox");
var step = $d("step");
var loadingBg = $d("loadingBg");
var loading = $d("loading");
var attention = $d("attention");

function showLoading() {
  loadingBg.style.display = "block";
  loading.style.display = "block";
}
function hideLoading() {
  loadingBg.style.display = "none";
  loading.style.display = "none";
}
function addConnect(T) {
  sign.innerHTML = "<a href='javascript:void(0);' id='signIn'><img src='img/connect.gif' alt='Connect with Twitter'></a>";
  d.getElementById("signIn").onclick = function() {
    showLoading();
    T.signIn();
    return false;
  }
  hideLoading();
}
twttr.anywhere(function(twitter) {
  //addConnect(twitter);
  var addHTML = function(User) {
    sign.innerHTML = [
      '<p>Logged in as : <a href="http://twitter.com/' + User.data('screen_name') + '">',
        User.data('screen_name'),
      '</a> (<a href="javascript:void(0)" onclick="twttr.anywhere.signOut();">Sign out</a>)</p>',
    ].join('');
    
    twitter("#tweetBox").tweetBox({
      label: "Tweet, tweet, tweet, tweet and tweet",
      defaultContent: "",
      onTweet: function(e) {
        attention.style.display = "block";
        setTimeout(function() {
          attention.style.display = "none";
        }, 2000);
      }
    });
    hideLoading();
  }
  if ( !twitter.isConnected() ) {
    addConnect(twitter);
  } else {
    var User = twitter.currentUser;
    step.style.display = "none";
    addHTML(User);
    hideLoading();
  }
  twitter.bind("authComplete", function(e, user) {
    step.style.display = "none";
    addHTML(user);
    hideLoading();
  });
  twitter.bind("signOut", function(e) {
    showLoading();
    sign.innerHTML = "";
    tweetBox.removeChild(tweetBox.getElementsByTagName("iframe")[0]);
    addConnect(twitter);
    step.style.display = "block";
  });
});
//]]></script>

つぶやけるだけのTwitterクライアント – Only tweet

あとはTwitter APIのJSONPからscreen_nameでTLとか取得すればなんとなくTwitterっぽいのもできるので、興味がある人はぜひ。