Android端末や、iPod touchを使うようになって、4sqmapの動作も確認出来たが、やっぱりそのままだと使いづらい。という事で、スマートフォン対応をする事にしました。
今回、スマートフォン対応をするに辺り、デザイン周りや、どのライブラリを使うかあれこれ検討した結果、とりあえずJQtouchを使う事にしました。
単純にデザイン的にそのまま使えそうってのもあり、テーマのカスタマイズもできそうだし、エフェクトの数も抱負などなどで決めました。
ちなみに、他にはiUiや、JQuery Mobile UIも試してみました。
当初、気軽に考えていたところありましたが、思いのほか大変でした。
特にGoogleマップと、JQtouchの相性のところで思わぬところでつまづいてしまいました。
JQtouchでのページ遷移で地図表示をした後に、Googleマップの描画が止まってしまう事があって、随分とはまりました。
どうやら、JQtouchのgoToメソッドで遷移させるとうまくいかないようです。なので、極力goToメソッドは使わないようにしました。
後は、スマフォ上のGoogleマップでコンテキストメニューを出すのは無理があったので、ページ遷移でメニューを表示させるようにしました。このとき、中心点で、venue検索やローカル検索をさせていたんですが、見た目の中心とGoogleマップAPI上の中心点がずれてしまうという事がありました。
よくはわからなかったんですが、ページ遷移させた後に、微妙にブラウザの全体サイズが変更されているのかなという感じがしました。
とりあえず、ブラウザサイズが変更されたときに、中心点を再設定する事でなんとかそれらしい動きになるようにはしました。でも、ここら辺はまだサイズ調整がうまくいってませんね。
やり方としては単純にwindowのresizeイベント時に、googleマップを表示させているdivタグのサイズを再設定しています。
windowのreisizeイベントを設定します。
$(window).resize(windowResize);
リサイズ時の動作です。
function windowResize()
{
var lastWidth = $("#content").css("width");
var lastHeight = $("#content").css("height");
// ディスプレイサイズを取得
var disp = getDispSize();
// 調整値
var offset = 0;
if(isiOS) {
offset = 10;
}
else {
offset = 50;
}
// サイズ変更
$("#content").css("width", disp.width);
$("#content").css("height", disp.height - offset);
var currentWidth = $("#content").css("width");
var currentHeight = $("#content").css("height");
// サイズが変わったかどうかを返す
return (lastWidth != currentWidth || lastHeight != currentHeight);
return (lastWidth != currentWidth || lastHeight != currentHeight);
}
function getDispSize(){
if(document.all){
if(window.opera){
return { width:document.body.clientWidth,height:document.body.clientHeight };
}else{
return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight};
}
}
// NN
else if(document.layers || document.getElementById){
return {width:window.innerWidth,height:window.innerHeight};
}
}
ただ、これだけだと足りなくて、メニュー選択時に改めて、サイズ調整をして、Googleマップの中心点が変更されたイベントが発生した場合は、中心点を取りなおしてメニュー処理をするようにしました。
画面サイズが大きい場合だと、中心点の変更が発生しなかったりするので、1秒まって強制処理するようにしてます。ちょっと、ここら辺はスマートにしたいところですね。
function initMenu()
{
// tapがサポートされてたら、tapイベントを使う
var clickTrigger = ($.support.touch)? "tap": "click";
// メニュー項目をイベントにbindする
$(".menuitem").bind(clickTrigger, function(e) {
var item = e.currentTarget; // click or tapされた項目
var href = $(item).attr("href"); // リンク先
if(href == "#content") { // 地図表示の場合
var run = false; // メニュー項目の処理をしたかどうかのフラグ
// イベントリスナー作成
// リサイズ後に、マップの中心位置が変わった場合の処理
var listener = google.maps.event.addListener(map, 'center_changed',
function() {
// メニュー項目が処理されてない場合
if(!run) {
run = true;
clickMenu(e); // メニュー項目を処理する
}
google.maps.event.removeListener(listener); // イベントリスナーを削除
}
);
run = false; // 初期化
var resize = windowResize(); // 一度リサイズする
// 1秒経過したら待たずに実施
setTimeout(
function() {
if(!run) {
run = true;
clickMenu(e); // メニュー項目を処理する
}
}, 1000);
}
else { // 地図表示以外はそのまま
clickMenu(e);
}
});
}
/**
* イベントオブジェクトからメニュー項目を処理する
*
* @param イベントオブジェクト
*/
function clickMenu(e)
{
var item = e.currentTarget; // 該当メニュー
var rel = $(item).attr("name"); // nameを取得
var key = "#" + rel;
selectMenu(key, map.getCenter()); // 実際のメニュー処理。(右クリックと共通)
}
という事で、スマフォ対応版の4sqmapです。
URLは通常版と同じです。
4sq map : http://labs.s-koichi.info/4sqmap/
スマフォ版のスクリーンショットです。右上のメニューを選ぶとメニューの一覧画面に遷移します。
メニューはこんな感じです。venue検索、ローカル検索は、さらに選択メニューが選べます。スマフォ版だけの機能で、現在地をチェックするを選択するとGPSから現在地を中心に地図を移動してくれます。
ローカル検索後です。基本的には、通常版とかわらないですが、情報ウインドウの情報量が減ってます。
venue登録の画面です。ローカル検索からの登録もできます。
venue検索後の画面です。こちらも、情報ウインドウでの情報量は減ってます。
チェックイン一覧の画面です。これまで、ピン表示でしたが、アイコンを表示するようにしてみました。
とりあえず、ひと通りの機能は実装出来たと思いますが、いろいろと微調整は続けようと思います。
今後ですが、スマフォ版は、チェックインも出来るようにしようかなと思ってます。
後は、時間があるときに、foursquareのAPI V2に対応して行きたいと思っています。
4sqmapのスマートフォン対応