OpenSocial大技林(予)

前回との変更点は「gadgets.io.ContentType.TEXT」の部分を「gadgets.io.ContentType.JSON」とするくらいです。callback関数の引数にJSONがやってくるのも同じです。「Google Ajax Search API」の仕様は別途ご確認ください。

■ソース(XML) <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Google ImageSearch" height="300"> <Require feature="dynamic-height"/> </ModulePrefs> <Content type="html"><![CDATA[ <!-- フォーム --> <form onSubmit="return(getHtml())"> <input type="text" id="q" /> <input type="button" value="画像検索" onClick="getHtml()"> </form> <!-- 結果表示 --> <div id="content_div" style="border:1px solid gray"></div> <script type="text/javascript"> //---------------------- //リクエスト発信 //---------------------- function getHtml(){ var q = $('q').value; var url = 'http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=' + encodeURIComponent(q); //結果表示欄を空に $('content_div').innerHTML = ''; //オプション設定 var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON; //リクエスト gadgets.io.makeRequest(url, response, params); return(false); } //---------------------- //callback関数 //---------------------- function response(obj){ var json = obj.data['responseData']['results']; //HTML作成 var html = '<ul>'; for( var i in json ){ var url = json[i]['originalContextUrl']; var thumb_url = json[i]['tbUrl']; var width = json[i]['tbWidth']; var height = json[i]['tbHeight']; var alt = json[i]['title']; html += '<li><a href="' + url + '" target="_blank">' + '<img src="' + thumb_url + '" ' + 'width="' + width + '" ' + 'height="' + height + '" ' + 'alt="' + alt + '" ' + ' /></a></li>'; } html += '</ul>'; //HTML反映 $('content_div').innerHTML = html; //ガジェットの高さを自動調整 gadgets.window.adjustHeight(); } //---------------------- //ショートカット //---------------------- function $(id){ return(document.getElementById(id)); } </script> <style tyle="text/css"> ul > li{ list-style-type:none; display:inline; padding:10px; } img{ border:0px; } </style> ]]> </Content> </Module>

■参考ページ
Google Code - ガジェット - リモート コンテンツの処理
http://code.google.com/intl/ja/apis/gadgets/docs/remote-content.html

JSON コンテンツ タイプを使用すると、JSON エンコードのコンテンツを JavaScript オブジェクトとしてフェッチできます。