jQuery、Google Map、csvでWEBコーディング

この週末はゲームプログラミングはお休みで、お仕事がらみで試行錯誤をしていました。

正直、WEBサイトはサンプルを動かすぐらいで、きっちりとコーディングした経験値がほとんどないので、あーでもないこーでもないともがき、なんとか依頼のものが実現できたのでホッとしております。
頭ではできるはず、とわかっていながらも、ブラウザを相手にするWEBのコーディングの「クセ」といいますか、「勘所」を押さえないといけないので、時間がかかりました。でも、おかげでレベルアップできました。

今回の依頼は、毎月更新される施設情報のcsvをもとに、左手側にリスト表示＋アコーディオン、右手側にGoogle Mapで表示する、というものでした。

特に、jQueryを使ってcsvを読み込んだあと、表示するリスト成分をHTML生成しながら、cssで表示、非表示を切り替えるというアプローチが通常の？プログラミングからするとそれはそれは気持ち悪いといいますかなんといいますか。まあでも、確かにこれでアコーディオンが実現できるのは魅力的なんですよね。

あと地味につらかったのが、リスト表示されている施設をクリックすると、Google Mapの表示を連動させるのですが、もともとGoogle Map上にはその施設の種別ごとにアイコンを表示させているので、クリックした施設をあらわす標準マーカーの経度をちょいずらして表示させているのですが、この「ちょいずらし」がMapのズームに応じて変更しないといけない、というものでした。getZoom()なんというAPIがあるのね。あとはひたすらzoom 17のときは0.0006、18のときは0.0003いや、0.00035か？と調整…。くじけそうになると下町ロケットを思い出して乗り切りました。

まあでも、やってみて驚いたのは、サーバーやデータベースがなくても、csvとjQueryでそこそこ動きのあるWEBページつくれるんだ、ということ。
今回、とても重要なことは毎月のデータをメンテする方がフツーの人である、ということ。Excelは使えて、csvファイルをアップロードすることはできる一般人で、それ以外の作業は一切発生しないようにしなければいけない。でも、大層なシステム構築しなくても、ブラウザでかなり高機能なことができてしまう…。いい時代になったもんですね。