前回、4sqmapをfoursquare API V2対応したときに、お知らせしたとおり、スマートフォン版をリニューアルしました。
元々、JQtouchを使って実装していたのですが、今回JQuery mobileにUI周りを変更しました。
基本的なUIは、JQtouch版を元にしてます。JQuery mobileのタグの記述形式にあわせて要素を変えたり、cssを変えていくというのを地道にやってました。
あとは、遷移周りの記述が違うので、そこら辺も地道に変えていきました。
JQuery touchはページを最初に表示するときにいろいろ初期化をしているらしくって、リストをJQueryで構築させながら作成すると、cssがあたってくれなかったりというのがあって、少し手間取りました。
サンプル関係がほとんど静的なhtmlを読み込むような感じだったので、実際どういうやり方をするのが正式なのかわからなかったので、なんか無理やり表示させる感じにしました。
本家のドキュメントの方が最新版に対応してるのだが、英語なので、日本語に翻訳されたサイトがあったので、多くはそこを参考にしました。
スマフォ対応版の4sqmapです。
URLは通常版と同じです。
4sq map : http://labs.s-koichi.info/4sqmap/
JQuery mobileに変更したUIで作ったスクリーンショットです。
4sqmap スマートフォン版
メニューには、ログインを追加しました。ログイン後は、ログアウトメニューになります。
ただ、ログイン後にしか使えないメニューも、使用出来てしまうので、ここいら辺の制御は加えたいと思ってます。
4sqmap スマートフォン版 メニュー
venue一覧でし。地図上の中心点からvenueを検索してます。キーワード検索も出来ます。
4sqmap スマートフォン版 venue一覧
チェックイン一覧です。いまのところ、最新から10件ほどに固定です。
4sqmap スマートフォン版 チェックイン一覧
とりあえず、全般的になんとか動かせるようになったというレベルですね。
もうちょっと、修正が必要なところがあるので、おいおい直していきたいと思います。
落ち着いたら、Androidアプリ版でも作ってみようかな。
4sqmapスマートフォン版をリニューアル