Twitterで特定のアカウントのツイート一覧や検索結果を表示

広告

TwitterではREST APIが数多く用意されており、Twitterに投稿された色々なツイートを取得することができます。今回は特定のアカウントの方が投稿されたツイートの一覧を取得する方法と、Twitter上で検索した結果を取得する方法について解説します。

1.Twitter REST API Resources
2.特定アカウントのツイートを取得
3.検索結果を取得
4.サンプル

Twitter REST API Resources

Twitterで用意されているREST APIは下記で参照することができます。

p4-1

色々なAPIが用意されています。今回はこの中から2つのAPIを使ってみます。

特定アカウントのツイートを取得

特定のアカウントのツイート一覧を取得する場合は「GET statuses/user_timeline」を使います。

p4-2

このカテゴリのフィードURLは次のようになります。(RSSでもATOMでも結構です。今回はATOMを使います)。 

https://api.twitter.com/1/statuses/user_timeline.rss
https://api.twitter.com/1/statuses/user_timeline.atom

取得するTwitterのアカウント名は「screen_name」パラメータを使って次のように指定します。 

https://api.twitter.com/1/statuses/user_timeline.atom&screen_name=アカウント名

上記以外にも色々なオプションパラメータがありますが、今回は省略します。

このフィードのURLに対してGoogle AJAX Feed APIを使いエントリを取得します。 

var feedurl = "https://api.twitter.com/1/statuses/user_timeline.atom&screen_name=アカウント名";

var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(8);
feed.load(function (result){
  /* ... */
});

取得した各エントリにはツイート内容やツイートへのURL、そして日付などが含まれています。

検索結果を取得

Twitterで検索した結果を取得する場合は「GET search」を使います。

p4-3

このカテゴリのフィードURLは次のようになります。 

http://search.twitter.com/search.atom?q=キーワード

検索するキーワードは「q」パラメータを使って指定します。このパラメータは必須です。

またクエリの言語を指定するには「locale」パラメータを使って次のように指定します。(現在指定可能な値は「ja」だけのようです)。 

http://search.twitter.com/search.atom?q=キーワード&local=ja

検索結果の言語を指定するには「lang」パラメータを使って次のように指定します。 

http://search.twitter.com/search.atom?q=キーワード&lang=ja

上記以外にも色々なオプションパラメータがありますが、今回は省略します。

このフィードのURLに対してGoogle AJAX Feed APIを使いエントリを取得します。 

var feedurl = "http://search.twitter.com/search.atom?q=キーワード";

var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(8);
feed.load(function (result){
  /* ... */
});

取得した各エントリにはツイート内容やツイートへのURL、そして日付などが含まれています。

サンプル

それでは簡単なサンプルで試してみます。まずは特定のアカウントのツイート一覧を取得します。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Google AJAX Feed API テスト</title>

<style type="text/css">
#feed p{
  margin:0;
  padding:0;
}

#feed .postdate{
  font-size:12px;
  margin-bottom:15px;
}
</style>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="./js/script4_1.js"></script>

</head>
<body>

<p>Google AJAX Feed API テスト</p>
<div id="feed"></div>

</body>
</html>

google.load("feeds", "1");

function initialize() {
  var feedurl = "http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=kazuyo_k";
  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(8);

  feed.load(function (result){
    if (!result.error){
      var container = document.getElementById("feed");
      var htmlstr = "";
      htmlstr += '<h2><a href="' + result.feed.link + '">' + result.feed.title + '</a></h2>';

      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];

        htmlstr += '<p class="posttitle">' + entry.content + '</p>';

        var pdate = new Date(entry.publishedDate);
        var strdate = pdate.getFullYear() + '年' + (pdate.getMonth() + 1) + '月' + pdate.getDate() + '日' + pdate.getHours() + '時' + pdate.getMinutes() + '分' + pdate.getSeconds() + '秒';
        htmlstr += '<p class="postdate"><a href="' + entry.link + '">' + strdate + '</a></p>';
      }

       container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + ":" + result.error.message);
    }
  });
}

google.setOnLoadCallback(initialize);

上記を実際にブラウザ見てみると次のように表示されます。

p4-4

このように指定したTwitterアカウントのツイート一覧を取得することができます。

では別のサンプルで試してみます。今度はTwitterで指定したキーワードで検索した結果を取得します。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Google AJAX Feed API テスト</title>

<style type="text/css">
#feed p{
  margin:0;
  padding:0;
}

#feed .postdate{
  font-size:12px;
  margin-bottom:15px;
}
</style>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="./js/script4_2.js"></script>

</head>
<body>

<p>Google AJAX Feed API テスト</p>
<div id="feed"></div>

</body>
</html>

google.load("feeds", "1");

function initialize() {
  var feedurl = "http://search.twitter.com/search.atom?q=%E3%82%AB%E3%83%AC%E3%83%BC";
  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(8);

  feed.load(function (result){
    if (!result.error){
      var container = document.getElementById("feed");
      var htmlstr = "";
      htmlstr += '<h2><a href="' + result.feed.link + '">' + result.feed.title + '</a></h2>';

      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];

        htmlstr += '<p class="posttitle">' + entry.content + '</p>';

        var pdate = new Date(entry.publishedDate);
        var strdate = pdate.getFullYear() + '年' + (pdate.getMonth() + 1) + '月' + pdate.getDate() + '日' + pdate.getHours() + '時' + pdate.getMinutes() + '分' + pdate.getSeconds() + '秒';
        htmlstr += '<p class="postdate"><a href="' + entry.link + '">' + strdate + '</a></p>';
      }

       container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + ":" + result.error.message);
    }
  });
}

google.setOnLoadCallback(initialize);

上記を実際にブラウザ見てみると次のように表示されます。

p4-5

「カレー」で検索した結果を取得しています。キーワードに日本語を使用する場合はURLエンコードしたものを指定して下さい。

( Written by Tatsuo Ikura )