ここでは javascript で取得する方法についても書いてみます．
基本的にはPHPの時と一緒で，apiのアドレスにぶん投げるだけです．
<html>
<head>
<script type="text/javascript">
//ページが呼び出された時に同期通信させる
window.onload = function(){
var httpObj = new XMLHttpRequest();
httpObj.onload = function(){
document.getElementById("activities").innerHTML = httpObj.responseText;
};
//GETでapiを叩きます．key については自分で取得したものを入れて下さい．
httpObj.open("get","https://www.googleapis.com/plus/v1/people/ID番号/activities/public?key=***************&maxResults=2",false);
//GETなのでnullか空に設定
httpObj.send("");
}
</script>
</head>
<body>
<div id="activities"></div>
</body>
</html>
ただjsonデータを取り出すだけではアレなので，
更にjsonデータから，投稿内容と画像を取り出すことにすると，こんな感じ．
//データの受け取りの所からプログラムを変更します
var jsonData = httpObj.responseText;
//evalで参照
var data = eval("("+jsonData+")");
//配列みたいに.で参照していく
var resultData = data.title;
//取得した投稿数だけforループする処理
for(var i = 0 ; i < data.items.length ; i++){
resultData += "<hr>";
//投稿内容
resultData += data.items[i].object.content;
//画像があれば画像をimgタグで囲って出力
//画像の大きさも取り敢えず半分に調整
if( null != data.items[i].object.attachments ){
resultData += "<hr><img src='";
resultData += data.items[i].object.attachments[0].fullImage.url;
resultData += "' height='";
resultData += (data.items[i].object.attachments[0].fullImage.height / 2);
resultData += "' width='";
resultData += (data.items[i].object.attachments[0].fullImage.width / 2);
resultData += "'>";
}
}
//処理が終わったので，resultDataをhtml内に返してあげる．
一気にコード書いてみました．
PHPよりもjavascriptの方が遥かに処理速度が早い・・・
0 件のコメント:
コメントを投稿