トップ > ATND検索 > 開発日誌

開発日誌

ATND検索


前回のエントリを読んで，ATND検索をブクマしてくれた方がいて嬉しい限りです．
Twitterではけっこう宣伝しているつもりなのですが，改めてblog(はてなダイアリー)の力を実感しました．


今はphp中級者勉強会の課題がGoogleMapAPIなこともあって，
ATND検索の出力結果をgooglemapで表示できるようにしようとしています．


ATND API がjsonp形式でデータを返してくれるので，
地図へのマーカーのマッピングは，以下のようなコールバック関数で実現しています．

//jsonpで受け取ったオブジェクトのcallback関数
function jsonp_callback(obj){

   //googleマップ呼び出し
    var map = init_google_map();

　//取得したデータ件数    
    var event_count = obj.events.length;
    
   //経度、緯度
    var lat;
    var lon;
    

    //取得したデータ件数分ループ
    for(i = 0; i < event_count; i++) {
	
	//経度、緯度
	lat = obj.events[i].lat;
	lon = obj.events[i].lon;

	//勉強会タイトル
	title = obj.events[i].title;

	//勉強会開催場所
	place = obj.events[i].place;

	//勉強会ID
	event_id = obj.events[i].event_id;

	//開催日時
	start_day = obj.events[i].started_at;
	//変換する
	

	//緯度、経度が取得できたときのみ
	if(lat != 0 && lat!= null) {

	    //マーカーを作成
	    //var marker = new GMarker(new GLatLng(lat, lon));
	    
	    var latlng = new GLatLng(lat, lon)
	    
	    //マーカーを地図上に配置
	    map.addOverlay(makeMarker(latlng, place, title, event_id, lat, lon, start_day));
	}
    }
}


ここまでは比較的楽にできたのですが，
マーカーをDBに登録できるようにしようとしたところでつまづきました．


マーカークリックすると，吹き出しが表示され，イベントページへのリンク、
イベントのbookmark(DBへ登録できるようにしています)が表示されます．


そこで，bookmarkリンクをクリックするときに一工夫しようと思い，最近(??自分の中で)良く見かける
LightBoxを使ってみようかなと思い立ちました．


ATND検索にはjQueryを使っている箇所があるのですが，調べてみると，
LightBoxはprototype.jsと相性が良く，thickboxというライブラリが
jQueryと相性が良いようなので，thickboxを使ってみることにしました．



呼び出し後イメージ．


thickboxを使うには，下記ページが参考になりました．


http://blog.webcreativepark.net/2008/03/24-223837.html


上記ページを参考にして，各ファイルを配置し，GoogleMAP上の吹き出し上で呼び出してみると
...できません＞＜ 同じページ上のGooglemapの外で呼び出してみると呼び出す事ができます．


呼び出し部分は，

GEvent.addListener(marker, "click", function(){

	//吹き出しに表示する内容
        marker.openInfoWindowHtml(
		"<a href=" + atnd_uri + event_idx +	" target='_blank' >" + title_idx + "</a><br />" +
		    "場所: " + place_idx + "<br />" +
		    "日時: " + start_day + "<br />" +
		'<a href="insert.php?lat=' + event_lat + '&lon=' + event_lon + '&keepThis=true&TB_iframe=true&height=400&width=600" title="座標を登録します" class="thickbox bookmark">bookmark!</a>'
	);
	tb_init('a.thickbox');
}

のようにしています．


何度もいじっているうちに，いつも呼び出せない訳ではなく，初回呼び出し時のみ失敗してしまい，
そのまま別のマーカーをクリック→吹き出し表示→bookmarkリンククリックすると，thickboxは
正常に呼び出しできることが分かりました．


firebugを使ってリンククリック時の挙動を見てみると、初回呼び出し時はtb_init()が読み込まれる前に
画面遷移が起きてしまっていることが分かりました。


分かりました．が，解決策が思い浮かびません...


日本語では同じような問題が発生しているケースを見つけられず，英語でいくつかそれらしき情報を見つけました．


http://stackoverflow.com/questions/765143/calling-thickbox-from-a-js-file
http://codylindley.com/thickboxforum/comments.php?DiscussionID=171


1つ目のページではopenInfoWindowHtml呼び出しとtb_init呼び出しをsetTimeout関数で
囲んでopenInfoWindowHtmlを遅らせて呼び出しているようなのですが，
自分の環境ではうまくいきません．


2つ目のページではthickbox.jsのtb_init()を書き換えています．
これも試してみたのですがうまくいきませんでした．


やはり，何故このような修正をしているのか分からずに書いてあったからという理由で
直してしまっては，結局自分のモノにはなりませんね。。。


ただ，この問題を解決しないとリリースが出来ないです。。。
悩みます。。。