PHPのテクメモ

以下のサイトで、jQueryプラグインで、UserAgentを判別する機能が提供されている。

http://tenderfeel.xsrv.jp/jquery/1176/jquery/1174/

インターフェイスがシンプルなので是非使いたいと思ったが、なぜかiPad、iPhoneで動いてくれない。でも他のブラウザでは動作しているように見える。初めてこのプラグインに出会ったときは「中途半端な出来なのかな（失礼）」と思い、使用を諦めたのだけれど、$.browserに値が組み込まれるというシンプルで美しい実装に心ひかれて、どうしても使いたくなった。

少なくとも「navigator.userAgent.indexOf」と書くよりは見栄えがいいと思って。

ちなみに配布されている状態では以下のようなエラーが出る（iPadで）。

TypeError: ‘null’ is not an object

「これって当たり前でしょ」ってエラー（nullがオブジェクトなわけがない）。検討してみてiOSで動かないことがわかった。でもiOSでも動作するような実装になっている。とくれば、きっと内部コードにあるiOSの場合のみ起動する部分があるはず。ということでコードを追うことにした。

でも分岐処理がわかりやすくて、コードもシンプルで、一目見て原因がわかった。UserAgentを抜き出すための正規表現の問題だ。iOS5になってUserAgentの書式が変更されたことで、本来配列として返される変数がnullになってしまっていたようだ。

112行目あたりを変更して動作した。

//var m = ua.match(/\((\w+); U;[\w\s]+? OS (\d_\d(?:_\d)*)/i);
var m = ua.match(/\((\w+); [U;]?[\w\s]+? OS (\d_\d(?:_\d)*)/i);

スマホ系に特化したUserAgentも動作しなかったので、おそらく似たような修正で動くんじゃなかろうか。

綺麗なプログラムを公開なさっている作者に感謝。

jQueryで「スライダー」といえばjQuery UIのプラグインにあるようなバーを移動（スクロール）させて値を変化させるようなもののことだと思っていたら、実際はイメージスライダーというものばかりにぶち当たる。やっと希望のものが見つかったのでメモしておく。

スマホやタブレットでjQuery UIのスライダーを使おうとすると上手く動作してくれない。マウスでつまむ動作には対応しているものの、タップして移動、という動作には対応していないようだ。jQuery Mobileにはそれがあるのだが、単体では使えないっぽい。<input type=”range” />を使う方法もあり、それはスマホやタブレットでも動作してくれるが、IEで動いてくれない（IE9でもダメ）。

で、見つけたのがdragdealer。jQueryプラグインではないもののスマホ、タブレット、IE他ブラウザを問わず利用できるすぐれもの。コールバック関数callbackを引数で与えれば、変化後の値を読み取ることができるし、animationCallbackを引数で与えれば変化中の処理も与えることができる。

すごーい。しかもライセンスはMIT。いうことなし。早速使って見ることにする。

今更ながらColorBoxネタ。以前ThickBoxを使っていたときは、モーダルウインドウのままページ遷移させることが簡単にできた。ColorBoxではどうやるんだろう、といろいろ調べたがすぐには答えが見つからなかった。

結論としてはオプションでiframeをtrueにセットしてやればいいのだが・・・。

この状態にすると、モーダルウインドウのサイズをあらかじめ指定してやらなければいけない。そうしないとミニサイズのウインドウになってしまって、何も表示されていない状態になってしまうのだ。

ちょっと面倒。改善されないかな。

Google Maps APIを使って地図を表示させる際、何も特別なことをしない限り、ズームレベルを変更するバーが1から19（くらい）に変更可能な状態となっている。例えば、極端に拡大しても意味を成さないような場合、ズームレベルを5から10の範囲以外に変更できないようにしておきたい、と仮定する。やり方が全然見つからなかった。

やりたいことは、そもそもズームレベルのバーを5から10の範囲以外を表示させたくない。バーの表示をそのままでズームレベルが変更になった瞬間に、そのズームレベルの値を読み取って、最大値もしくは最小値の値にセットしなおす、というのは簡単にできた。しかし、バーが長ければ、どうしてもその分だけ拡大縮小したくなるというものだ。

ウェブで調べたらMapTypesがどうとかこうとか書いてあったりしたけど、結局それでは動作しない（きっと仕様変更とかあったんだろう）。で、仕方なく英語で検索をかけて、適当にウェブページを読んでみた。そして、方法が見つかった！。

Google Mapsオブジェクトの生成（google.maps.Map）の引数で、単にminZoomとmaxZoomを指定、それだけでよかった。例えばこんな感じ。

var mapOptions={zoom:10, center:latlng, mapTypeId:google.maps.MapTypeId.ROADMAP, minZoom:8, maxZoom:13};

あっけない。マニュアルに書いておいてくれさえすれば悩まなくても良かったのに（てか、なんとなくこんなので出来ないかな、と思っていたわけで、すぐに試せばよかったよ）。

JavaScriptではPHPのsprintfみたいに文字列をフォーマットするような関数はあまり見かけない。

しかし貴重なメソッドを見つけた。小数点以下をn桁に揃えるためのメソッドだ。Numberクラスのメソッドとして定義されている。

number.toFixed(n)

数値numberを小数点以下n桁で表示する。nよりも桁数が小さい場合は0を付加してくれる。nよりも桁が大きい場合は四捨五入してくれる。戻り値は「文字列」だ。

これは便利。