そろそろちょっとずつ使えそうなものを。
Twitter の検索アプリを作ってみる。
といっても、Twitterも最近使い始めたばかり・・・Twitterの流儀やらもよくわからないので、APIドキュメントを見ながら、なんとなく作ってみる。
全体像を把握するのも面倒なので、まずは検索から。
http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search
HTTP GETを利用して、以下のURLの format に、JSONやらATOMやら返してほしい書式を指定したURLにパラメータをURIエンコーディングして渡してあげればよい。
JSONで返してもらうこととして、JSONを要求する、Google Gadgets APIは、以下を参考に。
http://code.google.com/intl/ja/apis/gadgets/docs/remote-content.html#Fetch_JSON
結果は、JSONで帰ってきたオブジェクトのキー results 以下にレコードオブジェクトが繰り返しあり、text プロパティにコメントが、profile_user_image プロパティにユーザーのイメージURLが格納されている感じ。
適当にtext中のURLをリンクに、ユーザーIDをユーザーページへのリンクに置換する処理を書いておしまい。
↓ こんな感じ。
URLをリンクに置き換える正規表現がうまく動かない・・・
行末にちゃんとマッチしてくれない・・・
面倒なので、とりあえず、末尾にスペース1文字付加して回避。と。
|
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="twitter search sample">
<Require feature="opensocial-0.8"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<style type="text/css">
a:active, a:hover, .b:active, .link:active {
color:#AAAAAA;
text-decoration:underline;
}
a, .link {
color:#2694E8;
cursor:pointer;
text-decoration:none;
}
</style>
<script type="text/javascript">
/**
* mixi アプリ : Twitter 検索を行う
*/
function search_twitter(url) {
var baseurl = "http://search.twitter.com/search.json";
if (url) {
url = baseurl + url;
} else {
url = baseurl + makeHttpParam(‘q’, true);
}
var params = {};
params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
gadgets.io.makeRequest(url, searchResponse, params);
}
/**
* 検索結果処理
*/
function searchResponse(responseObj) {
var html = "";
var jsondata = responseObj.data
var next_page = jsondata[‘next_page’];
if (next_page) {
html += "<a href=’javascript:search_twitter(\"" + next_page + "\");’>next page</a>";
html += "<br/>";
}
var results = jsondata[‘results’];
html +="<table border=’0′>";
for (var i=0; i<results.length; i++) {
var result = results[i];
html += "<tr style=’font-size:small;’>";
html += "<td>";
html += "<a href=’http://twitter.com/" + result[‘from_user’] + "’ target=’_blank’>";
html += "<img src=’" + result[‘profile_image_url’] + "’ border=’none’/>";
html += "</a>";
html += "</td>";
html += "<td>";
html += "<a href=’http://twitter.com/" + result[‘from_user’] + "’ target=’_blank’>";
html += "<span style=’color:#2FC2EF;font-weight:bold;’>" + result[‘from_user’] + ":</span>"
html += "</a>";
html += createLink(result[‘text’]) + "</br>";
html += "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById(‘content_div’).innerHTML = html;
}
function createLink(text) {
return toUserUrlText(toFuzzyUrlText(text + ‘ ‘));
}
/** ちょっといい加減にURLをリンクに変更する関数 */
function toFuzzyUrlText(text) {
var ret = text;
var ptn = /(http:\/\/.*?)[ $]/g; // 行末にマッチしない？？？
var ary = ptn.exec(text);
while(ary) {
ret = ret.replace(ary[0], "<a href=’" + RegExp.$1 + "’ target=’_blank’>" + ary[0] + "</a>");
ary = ptn.exec(text);
}
return ret;
}
/** ちょっといい加減にTwitter ID をリンクに変更する関数 */
function toUserUrlText(text) {
var ret = text;
var ptn = /@([A-Za-z]{1,}?):/g;
var ary = ptn.exec(text);
while(ary) {
ret = ret.replace(ary[0], "<a href=’http://twitter.com/" + RegExp.$1 + "’ target=’_blank’>" + ary[0] + "</a>");
ary = ptn.exec(text);
}
return ret;
}
/**
* HTTP GETリクエストパラメータを生成
*/
function makeHttpParam(param_id, isFirstParam) {
isFirstParam = !(isFirstParam == undefined);
var paramObj = document.getElementById(param_id);
var ret = "";
if (paramObj != null) {
ret = ((isFirstParam)?"?":"&") + param_id + "="
+ encodeURIComponent(paramObj.value);
}
return ret;
}
</script>
<input type="text" size="16" id="q"/><input type="button" name="search" value="twitter search" onclick="javascript:search_twitter();"/>
<div id="content_div"/>
]]>
</Content>
</Module>
|
