なんだかやたら忙しくなり、
忙しくなればなるほど余分なことやって遊びたくなるという。
何気なくTwitterのAPI仕様書を読み直してたら、検索用のAPIでgeocodeを指定出来るとのことで、試しにGoogle Maps APIと連携させてみた。
地図の右側に、表示範囲内で発言された最新15件のツイートを表示。
地図を動かす度にAPIを実行するので、制限(100回/1h)に引っかかりやすそう。
地図上にピンを打って表示できるかな…と期待してたんだけど、
検索のAPIは認証不要で使えるからか（？）戻ってくるデータにgeocodeが入ってこないみたい。
APIから戻ってくるデータは
「geo」には一律nullが入っていて、
「location」に、プロフィールの「現在地」がテキストで入っている物と、緯度経度が入っている物が混じってる感じだった。
最近多い気がする。
テキストボックスが空の時に初期値で警告文とか入っていて、フォーカスすると消えるアレ。
ここんとこ出番が多かったのでjQueryのプラグインにしてみた。
未入力のままフォームがsubmitされると初期値が送信されちゃうので、親のformオブジェクトを探してsubmitの際に空にするようにしてみた。
第一引数に初期値になるメッセージ
第二引数にクラス名を入れると、初期値を表示している際に適用される。
グレー文字で出したいとか、背景を赤にしたいとかありそうだったので。
任意の数の多段に対応したツリーメニュー。
リクエストに、階層単位での処理(開く際に同階層の他のメニューを閉じる)があったんで再起関数を使ったんだけど、jQueryのセレクタでちょっと戸惑った。
再起で1階層づつ処理したかったんで、上手いことやる方法ないかと探してたんだけど、
parent > child
(親子関係を指定して要素を選択する。)
これって、parentを省略して
って書き方でいけるのね。メモメモ。
HTML
JS
とりあえずデフォルト状態で、class=”treeMenu”と入っているエレメントに対して自動で設定されるようになってるけど、
速度と挙動(メニューを開いた際に同階層の他のメニューを閉じるか残すか)が変更出来るようにしてあるので、
3～5行目を編集して
といった感じでも。
時間もないのでとにかくシンプルにって感じで書いたんだけど、
メニューを開くトリガーに画像を使いたいって事だったので、開閉に応じた画像のスワップとかのリクエストもありそう。
コールバック関数とか渡せるようにしといたら便利になるかなぁ。
よくあるヤツだけど、微妙な間隔でリクエストされて、なんか毎回書き起こしてる気がするのでメモ的に。
（ちゃんとソースを管理しておけと）
jQueryと、jQuery.easingを使用。
jquery.js
jquery.easing.1.3.js
の2つと下記のスクリプトをロードして、
スクロールにしたいアンカーリンクにclass=”sScroll”の属性を付けておくだけ。
#で始まるリンクを自動で拾う、という形の物が多いけど、
アンカーリンクを全部スクロールにしたくない、とか、
他のスクリプトで使う為にダミーのアンカーリンクを多用してるとか(自分がよくやる)
そんなケースの事を考えて、”sScroll”というクラス名のついた<a>タグだけを対象にした。
IEだと、jQueryのoffset()の値がスクロール位置によって狂うので、IEの時はoffset()の値にスクロール位置を加算して補正。
(offset()って絶対位置を取るんじゃなかったっけ…？)
何故か、divタグに直接borderのスタイルを設定した場合のみ狂う模様？(IEのみ)
レアケースだと思うので上記補正は除去
Operaの場合、”html,body”をanimateすると表示がおかしくなるので、Operaの場合のみ”html”を指定。
jquery.easingでイージングを付けたりした時、ページのスクロール量が足りないと動きがおかしくなるので、
アンカー先のスクロール位置がページのスクロール量を超える場合は調整。
やっつけ感漂う気がするけどこんな感じですかねぇ。
引越をすることになり、その件で頭が一杯だったのでつい…。
家具どう置こうかなー、とか色々考えてて、
とリあえず、Javascriptで家具配置のシミュレーションが出来る物を自分用に簡易なの作ってこれで遊んでたんだけど、
ちょっと面白そうなんで一度ちゃんと作ってみるかも。