ここでは 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 件のコメント:
コメントを投稿