自分のwebページにtwitterのつぶやきをテーブルで囲って表示させ

解決済

質問者：momohh1988
質問日時：2010/09/18 19:00
回答数：2件

自分のwebページにtwitterのつぶやきをテーブルで囲って表示させているのをよく見かけますが、自分のwebページでもそれをやりたいなと思っております。現在は、自分のwebページはhtmlとCSSだけで作っています。javascriptの仕組みがよく分かっていないのですが、方法としてはjavascriptしかないのでしょうか。もし、その方法が分かる方がいらっしゃいましたら教えて頂けますでしょうか。宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： kuzumiHK
回答日時：2010/09/19 18:23

こんな感じでしょうか。

表示する項目を増やしたりするには、JS部分を改修する必要があります。見た目はid=twitter内をCSSでスタイルするなりできると思います。

▼表示したいhtmlのbodyに下記を追加
<div id="twitter"></div>
<script type="text/javascript" src="test.js"></script>

▼test.php（※twitterのIDを変更する必要あり）
<?php
$twitter_id = "hoge"; // twitterのID
$mojicode = "UTF-8"; // UTF-8が推奨。htmlがShift-JISの場合Shift-JISに変更する必要があるかも。
mb_http_output($mojicode);
mb_internal_encoding($mojicode);
header('Content-Type: text/xml;charset={$mojicode}');
$url ="http://twitter.com/statuses/user_timeline.xml?id …
print(file_get_contents($url));
?>
▼test.js
(function (){
var php = "test.php"; // phpのファイル名やパスを変更する場合

xmlHttpObj = null;
if (window.XMLHttpRequest){// Firefox用
xmlHttpObj = new XMLHttpRequest();
}else if (window.ActiveXObject){
// IE6用
try{
xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
// IE5用
try {
xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
if (xmlHttpObj)
xmlHttpObj.onreadystatechange = getXML;
if (xmlHttpObj){
xmlHttpObj.open("GET",php, true);
xmlHttpObj.send(null);
}
})();

function getXML(){
var xmlData = null;
if ((xmlHttpObj.readyState == 4) && (xmlHttpObj.status == 200)){
xmlData = xmlHttpObj.responseXML;
var items = xmlData.getElementsByTagName("statuses");
var html = "<ol>";
var words = items[0].getElementsByTagName("status");
var max = words.length;
for(var i = 0; i < max; i++){
// この部分は、http://twitter.com/statuses/user_timeline.xml?id=＜あなたのID＞に表示されるXMLを見ながら、表示する項目を増やすことも可能です。↓created_atと入れればそのタグで囲われている部分がaに格納されます。
var a = words[i].getElementsByTagName("created_at")[0].childNodes[0].nodeValue;
var b = words[i].getElementsByTagName("text")[0].childNodes[0].nodeValue;
//var c = words[i].getElementsByTagName("screen_name")[0].childNodes[0].nodeValue;

html = html + "<li>" + b + "（" + a + "）" + c + "</li>"; // aやbをリストに連結
}
html = html + "</ol>";
document.getElementById("twitter").innerHTML = html; // id=twitterに書き込む
}
return 1;
}