JavaScript :: Lunatic-Code

仕事でiOSのヴァージョンが4.2以上かどうか知りたい！という要望があったので、
ちょっとメモって置こう。

var ua='Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5';
ua.match(/iPhone OS (\w+){1,3}/g);
var osVar=(RegExp.$1.replace(/_/g, '')+'00').slice(0,3);
if(420>=osVar){alert('4.2↑');}
else{alert('4.2↓);}

iPhone OS X_X_Xという部分を探し出し、
XXXを抜き出して3桁の数値として大小比較する。
それだけ。
X_Xの場合もあるので、3桁に丸めにゃならんのが引っ掛けポイントだなｗ

以前input buttonを画像にする、とかやったんですが、
input type="file"も画像化したいなぁ、と。
んが、どうやら一筋縄じゃいかなさそうだ。
というのも、レンダリングエンジンによって、
デフォルトの表示方法が違う。

IE(Trident)やFirefox(Gecko)、Opera(Presto)だと、左側にテキストエリアっぽいのがあって、その右にボタンがある。
が、googleChromeやSafari(WebKit)だと、ボタンがあってその右側にテキストだけが表示される。
まぁ、この時点で、input:fileをどうにかするよりも、代替コンテンツで対処するしかないのが明白なわけで。

問題点を挙げると・・・
・CSSでwidthやheightを指定しても、ボタンとテキスト欄は個別に幅の指定や比率の指定も出来ない。
・また、Firefoxはcssの幅を無視する。sizeに値を入れてやらねば・・・。
・Firefox、googleChrome、Safariはテキストをクリックしてもファイル選択ダイアログを出す。
・IEとOperaはボタンを押さないとダイアログが出ない。
・input:fileに対し、クリックイベントを発行しても、IEしかダイアログを表示しない。

ﾏﾝﾄﾞｸｾ(‘A｀;)
テキストエリアぽいところクリックしてもダイアログでない＋クリックイベントも受け取らないので、
Operaだけは残念ながら除外せざるを得ない。
(続きを読む…)

GoogleAjax FeedAPIで常に最新のFeedを読み込む。

GoogleAjax FeedAPIで、RSS読んじゃうぞ、と。

JavaScript環境でしか使えないという弱点はあるものの、
コードをペッと貼り付けるだけで動くので便利すなぁ。
PHPだとMagipeRSSを使った方法なんぞを以前紹介しましたが、
実装がややめんどい。

さて、と。
実装する上で、問題がひとつ。
XSSの問題からか、直接データは拾ってこれない。
googleのFeedfetcherというrss用クローラーすでにクロールしていて、
googleのサーバ上にキャッシュしているデータを表示するようだ。
んで、このクローラーは、日に1、2回しか回ってこない。
更新が頻繁でないサイトならそれでもいいのだが、
ニュースサイトなど、一日に何度も更新してるようなサイトだと、
1日遅れのRSSなんぞ用がないわけで。

んで、キャッシュにないものについては、新しく取得しに行くようだ。
なのでFeed設定のときに適当な一意のクエリ文字列を追加してやって、
ページを更新するたびに毎回新しく読み込みに行かせてやればいいんじゃね？
そんなわけで、単純にgetTimeで時間を取得し、
それをrssのアドレスの末尾にクエリ文字列として追加してやれば、
常に最新のRSSを読み込みにいく。
ただし、これだとリロードのたびに毎回更新をしてしまい、レスポンスが悪いので、
5分間隔くらいで更新するようにしてやる。

var feed = new google.feeds.Feed("http://blog.lunatic-code.net/feed/rss/"+"?"+(parseInt((new Date()).getTime()/300000)));

こんな感じ。

まぁでもよっぽど頻繁に更新するサイトでもなければ、1～2時間とかそんなもんでいいんでない？

APIテスト環境だと動いてたものが、なぜか本番環境じゃ動かない。
なぜに・・・？
んでこうなってるのを
<script type=”text/javascript” src=”http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=[キー]“></script>

こう変える
<script type=”text/javascript” src=”http://maps.google.com/maps?file=api&v=2&&key=[キー]“></script>

sensor=true_or_falseを削除するとなぜか動く。
何でじゃろ。
消せば動く、というのはググれば何件か引っかかったが、
なぜ消すと動くかがわからない。

wordpressのフォーラムに出てた問題。
この場合だとカテゴリー。
親子階層でリストが入れ子になってるものを、
親カテゴリーと子カテゴリーを別々のドロップダウンメニューにして、
リスト構造から親子関係を持つドロップダウンを自動生成できれば、
何か他にも使えそう、ということで、勉強がてら作ってみる。

(続きを読む…)

グローバルメニューの画像置き換えのお話。
通常、普通に画像を貼ってjavascriptでロールオーバーさせたり、
あるいはCSSの背景画像で実現する。
画像を貼る場合、HTMLがゴチャッとしてイマイチかっちょ悪い。
cssも画像off時や印刷時に見えなくなる弱点がある。
シンプルなHTMLとして

<ul id="menu">
	<li id="menu1"><a href="./">ホーム</a></li>
	<li id="menu2"><a href="./dir2/">メニュー2</a></li>
	<li id="menu3"><a href="./dir3/">メニュー3</a></li>
	<li id="menu4"><a href="./dir4/">メニュー4</a></li>
	<li id="menu5"><a href="./dir5/">メニュー5</a></li>
</ul>

を、javascriptで

<ul id="menu">
	<li id="menu1"><a class="active" href="./"><img alt="ホーム" src="/img/menu1_on.jpg" height="25" width="82"></a></li>
	<li id="menu2"><a href="./dir2/"><img alt="メニュー2" src="/img/menu2.jpg" height="25" width="82"></a></li>
	<li id="menu3"><a href="./dir3/"><img alt="メニュー3" src="/img/menu3.jpg" height="25" width="82"></a></li>
	<li id="menu4"><a href="./dir4/"><img alt="メニュー4" src="/img/menu4.jpg" height="25" width="82"></a></li>
	<li id="menu5"><a href="./dir5/"><img alt="メニュー5" src="/img/menu5.jpg" height="25" width="82"></a></li>
</ul>

に書き換える。
もちろんマウスオーバーやアクティブ時のロールオーバーも実装する。
サンプル
スクリプト
あ、ｊQuery使ってます。

(続きを読む…)

このブログに組み込んでたjavascriptも少しずつｊQueryベースへ書き換え中。
ファイルサイズも半分とまでは行かないけれど、40%ほどダイエットに成功。
まぁ、jQuery本体の分があるので、全体的には転送量上がってるわけだけれども。

さて、本題。
Thickboxを使って、画像をポップアップするのはいいんだが、
デフォルトではaタグについてるtitleしか表示できない。
aタグより、中のimgのaltを表示してもらいたいんだが。

ってことで改造。
tb_init()内の

var t = this.title || this.alt || this.name || null;

を

var t = this.childNodes[0].getAttribute(“title”) || this.childNodes[0].getAttribute(“alt”) || null;

に書き換える。

こんだけ(‘A｀)

(続きを読む…)