せっかくなのでATND検索APIを叩いて、その検索結果イベントをGoogle Mapに表示するところまで。
(ATND検索APIからはJSONで取得してます)
①事前に呼び出し元のHTMLページ内に
を組み込んでおく。
②下記のように処理を書いて…
/*
* HTMLページで適当なイベント(onclick等)から呼び出す
*/
function callGMAP(){
str = location.search;
str = encodeURI(str);
str = str.substring(1,str.length);
str = decodeURI(str);
getATNDSearchResult(str);
}
/*
* ATNDイベント検索
*/
function getATNDSearchResult(str){
// JSONPでrequest投げる
str ="忘年会";
url = "http://api.atnd.org/events/?keyword="+str+"&format=jsonp&callback=cbfuncATNDSearch";
var script = document.createElement("script");
script.src = url;
$("body").append(script);
}
/*
* CallBack of getATNDSearchResult()
* JSONP返り値処理
*/
function cbfuncATNDSearch(json){
marker = new Array();
// 開いているマップ情報ウィンドウ
var curr_infw;
contentString = new Array();
infowindow = new Array();
// マップ初期化
var centerPos = new google.maps.LatLng(35.658613, 139.745525);
var mapOptions = {
zoom : 10,
center : centerPos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for(var i = 0; i < json.events.length; i++) {
// マップ上のマークの設置
var markerPos = new google.maps.LatLng(json.events[i].lat, json.events[i].lon);
var markerOptions = {
position : markerPos,
map : map,
title : json.events[i].title
};
marker[i] = new google.maps.Marker(markerOptions);
// ウィンドウのHTML
contentString[i] = "イベント " + json.events[i].title + "概要 "+ json.events[i].catch +" 日時/場所 "+json.events[i].started_at+"~"+json.events[i].ended_at+" @ "+json.events[i].address+" ";
// マップ情報ウィンドウ生成
infowindow[i] = new google.maps.InfoWindow({
content: contentString[i]
});
// 開いているマップ情報ウィンドウを閉じて、クリックされたマーカの情報ウィンドウを開く
google.maps.event.addListener(marker[i], 'click', function(e){
if(curr_infw) { curr_infw.close();}
var gm_num = $(this).attr("__gm_id")-1;
infowindow[gm_num].open(map,marker[gm_num]);
curr_infw = infowindow[gm_num];
});
}
}
③呼び出し元ページにmap_canvasタグを書いて、そこに地図を描写。
2008年5月31日土曜日
Yahoo!Pipes 制作物(Google/Yahoo!検索Pipe)
TopPageの検索結果だけ対象ですが、日本語版Google検索PipeとYahoo!検索Pipeを作りました。
(デフォルトでは英語版しか用意されてない & 翻訳Pipeでは結果に違和感あったので‥)
【特徴】
・検索結果TopページのデータをRSSで出力可能
・キーワードは任意でURLへ入れて使う
(自分の場合はWebアプリに仕込むので、検索結果RSSの各URLにキーワードクエリを渡して、配列にして取ってきます。)
・「keywords で検索対象のキーワードを指定する」
・「input number で表示したい検索結果件数を指定する」
※気まぐれで500Errorが出ることも。。
- Google検索
(元データはhtmlなので、FetchPageモジュールで検索結果を抽出&Regexpで不要なmetatag列を削除&RenameモジュールでRSS化)
http://pipes.yahoo.com/pipes/pipe.run?_id=f1c7d25931aaa47ad6e59f6683656e38&_render=rss&keywords=(キーワード)&numberinput=(表示件数)
例:SQL
- Yahoo!検索
(元データは検索WebServiceのXMLなので、不要なmetatagをRegexpで除去してからFetchDataでRSS加工)
http://pipes.yahoo.com/pipes/pipe.run?_id=kg4GW_QH3RGc0zDMiXrL0A&_render=rss&keywords=(キーワード)&numberinput=(表示件数)
例:SQL
- これは拝借物ですが、PowerSet検索
(Pipe制作する上でとても参考になります)
http://pipes.yahoo.com/pipes/pipe.run?_id=5d07e2ff70a3612039b9188e6394439d&_render=rss&text=(キーセンテンス/英語質問文)
例:What is SQL?
Topページ(検索結果1ページ目/1~10件)だけでなく11件目以降をRSSで取るには、新たに別のPipeを追加しないといけないところが難点なので解決を図ります。
とりあえずこれでYahoo!Pipesを情報収集ハブとして使う目途が立ってきました。。
(追記@2008/06/01)
Yahoo!Pipesで作成してあるPipeで「Input nymber で表示したい検索結果件数を指定する」機能を追加しました。(デフォルトでは50件表示に)
この延長で「検索対象の言語指定」、「URLに検索キーワードが含まれているかどうか選択」など機能追加できます。
具体的にはRSSを出力するURLをYahoo!Pipesで生成するだけでOK。
参照サイト→WebOSGoodies
(追記@2008/06/07)
PowerSet のPipeが使えなくなってました。。
考えられるのは、、サイトデザイン変更に伴うPageFetchに失敗したとか…?
自力で作成しようと検討中。
→作りました。(@2008/06/08)
Babelfish モジュールで「英→日」変換は一発です。
翻訳の精度はGoogle翻訳APIと比較してみたいかも。。
2008年3月19日水曜日
"Google Co-op"体験記
"Google Co-op" from here.
非常に簡便に"オリジナル検索エンジン"を作成&設置できる機能です。。
JavaScript部分のコードをcopy&pasteすれば設置完了。手順は下記URL。
http://www.ajaxtower.jp/googlecoop/create/index.html
みたところ、日本語での検索結果を絞り出そうとする自作エンジンはまだ少ない様子。
絞り出す‥というのも、抽出対象のWebサイトのURLを列挙して、その中から検索語を抽出するところからの着想。
検索の効率を考えると、いかに雑音(ブログなどの断片的なものや信憑性の疑わしいもの)を除くかは、大きな課題と考えてたので、これは凄いサービスですね。
ただ、対象URLを増やせば、情報量の規模が大きくなる一方、欲しい情報にたどり着く効率はUp or Down??など、考える余地もあるかも。
あと、"検索フォームを備えているサイトのそれ"と"Google Co-op"の検索では、抽出結果が異なる様子。
これは面白いかな、と。
以降、検索結果をXMLでも吐き出せるなら、既存のRSSサービスと連動できるかな‥と調査中。。
登録:
コメント (Atom)
