Posted by & filed under programming.


 

Twitterには素敵なウィジェットが用意されていますが,(当然のことながら)鍵付きアカウントには使用できません.

しかしながら,サービス利用者のみへの情報発信用のアカウントを作成しておき,ログインページ等サービス利用者のみが閲覧可能なWebページにウィジェットを設置して最新の投稿を参照できると便利ではないかと思います.

ということで,鍵付きアカウントのタイムラインが表示できるTwitterウィジェットを作ってみました.

作ったといっても(面倒くさい)既に素晴らしいウィジェットがあるので公式ウィジェットのソースコードをちょっと改変しただけです.

基本的なアプローチとしては,ウィジェットがタイムラインを取得してくるURLを書き換えて,独自に用意したstatuses/user_timelineのラッパからデータを取得するようにします.

独自に用意したラッパでは内部で鍵付きアカウントでOAuth認証していて,それによってタイムラインが得られるという仕組みです.

まずは公式ウィジェットの本体をダウンロードしてきます.

http://widgets.twimg.com/j/2/widget.js

本体は難読化されたコードなのでツールを使って読みやすいように変換してから読んでいきます.
すると,こんな部分が見つかります.

var v = U ? "https://" : "http://";
var t = "twitter.com";
var p = v + "search." + t + "/search.";
var o = v + "api." + t + "/1/statuses/user_timeline.";
var s = v + "api." + t + "/1/favorites.";
var q = v + "api." + t + "/1/";

どうもこの部分でタイムラインの取得先アドレスを生成しているようです.

今回表示したいのはユーザタイムラインのみなので,oだけ書き換えてしまいます.

var o = "/wrap/user_timeline.";

書き換えた後に一旦このJavaScriptを読み込んでウィジェットを表示させてみます.

<script charset="utf-8" src="/js/twitter-widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 'auto',
  height: 150,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
  }
}).render().setUser('hoge').start();
</script>

当然ですが,何も表示されません.Apacheのログを見ます.

127.0.0.1 - - "GET /wrap/user_timeline.json?screen_name=hoge&callback=TWTR.Widget.receiveCallback_1&include_rts=true&count=4&refresh=true&clientsource=TWITTERINC_WIDGET&include_entities=true&1333314015824=cachebust HTTP/1.1" 200 2375

ここからパラメータを抜き出してすべてのパラメータを渡してやります.
でなくて,わざわざチェックしなくともどうせ内部でしか使うことのないものなので$_GETをそのまま引数として渡してしまう仕様にしました.(内部からしか呼べないように.htaccessで適切な設定を!)

<?php
require_once('twitteroauth.php');

define("CONSUMER_KEY", "????");
define("CONSUMER_SECRET", "????");
define("OAUTH_TOKEN", "????");
define("OAUTH_SECRET", "????");

header('Content-Type: application/json; charset=utf-8');
try {
    $con = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, OAUTH_TOKEN, OAUTH_SECRET);
    $con->decode_json = false;
    $rt = $con->get('statuses/user_timeline', $_GET);

    echo $rt;
} catch (Exception $ex) {
    echo json_encode(array('error' => 'Failed to get twitter timeline.', 'request' => '\/1\/statuses\/user_timeline.json'));
}
?>

これで完成です.

動作には問題ないはず,ですが,問題はAPIを叩く回数で,リアルタイム更新はオフにしておいた方がいいかもしれないです.

  • Test

    decode_json = false;
    $rt = $con->get(‘statuses/user_timeline’, $_GET);

    echo $rt;} catch (Exception $ex) {
    echo json_encode(array(‘error’ => ‘Failed to get twitter timeline.’, ‘request’ => ‘/1/statuses/user_timeline.json’));}?>
    の????部分にoauth認証しそれぞれ入力してサーバーにアップロードしたのですが、
    ガジェットに表示されません。
    このphpにアクセスしても[{“created_at”:”M なんとかとなってしまって表示されません。どうしたらガジェット内に表示させる事ができるのでしょうか?
     

    • webサーバ(Apache等)のログはどうなっているでしょうか?
      記事のapacheログを参照してもらうとわかると分かると思いますが,この記事の修正のみでは,ウィジェットは /wrap/user_timeline.json にリクエストを投げます.
      恐らく,サーバ側のスクリプトのパスは /wrap/user_timeline.php になっていると思いますので,そこで404エラーが出てはいないでしょうか?
      その場合は,mod_rewriteを使ってサーバ側でURIを書き換えてやるか,javascriptを編集して,.jsonではなく.phpへリクエストを投げるようにしてやれば良いと思います.

  • Pingback: 10/20 河添香織 | 森隆知ゼミポータル()