気象統計情報

お医者様から、めまいやふらつき、突発性難聴など、内耳が関連している病気（症状？）は、気圧変動に関係していると聞きました。

じゃあ、酷いめまいがあった前後の気圧はどうなってたんだろう？と気になったので、気象庁のWEBサイトで確認してみたのですが、、、なんか使いにくいです（すみません個人の感想・・・）。

意外な発見

早朝、加西のお山へ自転車で紅葉・・・とたくらんでいたが、朝から雨でやる気ゼロ。昨日のランニングで右ふくらはぎの動作が怪しく、こちらも自粛。

代わりにSVGで遊んでみよう！と楽しんでいたら「タートルグラフィック」てな、お手頃なテーマを思い出してしまい、おうちでjavascriptをいじくり倒して一日が過ぎてしまった。なに食ったか覚えていないぞ。

JavascriptとSVGでタートルグラフィックスやってみよう！

まだとっかかりだけど、やってる最中から、気楽に絵が描けるようになったもんだと静かに感嘆。で、さきほど、「三次元のタートルグラフィック」という香り高いテーマを思いついてしまったのだが、寝られなくなるのでまた今度。おそらくそんなの世界中の誰かが既にやっているだろうし、検索するのもやめておこう。寝られなくなるから。

ところで、先日ニッセンで買ったソックスが結構細身で、そんじょそこらのコンプレッションタイツよりも気持ちよい。肉離れの達人（見習い中）としては、これは結構な発見。今後、これ履いてランニングするのがベストチョイスか。ちょっと違うか。いや・・・

[javascript] Google Maps API V3 で標高カラーマップを表示

Google Maps API V3 で標高データが取得できるらしいと知って作ってみた。（⇒ Google標高カラーマップ）

標高データを取得するAPIに回数制限があるので、インターバルタイマーで回避。一定時間内の要求数の制限のようだが、詳細不明。

たまに OVER_QUERY_LIMIT!!! と怒られるが、リトライ処理でどうにかこうにか。

複数端末から同時に要求するとエラー頻度が高くなるのかな。この辺、よくわからないが、まーとりあえず。

海の中のデータもあるので、日本海溝の辺りとか見てるとなかなか呑めます(謎

カラーマップの色や表示範囲の変更が、インタラクティブに出来たらいいなと思うが、それはまたおいおい。。。

体重落として秋の夜長はプログラミング

早めの午後ラン、ゆっくりロングで20キロほどを目指したのだが、13キロで気持ちが切れて中断した。先週から2キロ程度体重を落としている影響か、それとも水分補給の失敗か。いや両方か。体重が2キロ違うとずいぶん走りやすいやろなと思っていたが、スタミナとやらも減ったのか。で、スタミナってなんやと毎度の疑問。

減量は、この1週間ほど酒の量を減らした結果。見る見る体重が減っていくので面白い。来週当たりから第一回目の踊り場状態になると思うので、リバウンド警戒週間になるんやろな。今のところBMI=22くらいで標準ど真ん中。日常生活は快適だけど、快適な運動にはBMI=21までいっときたい。

運動時間以外は、自宅でXAMPPでAjaxやらjQueryプラグインなど。先日書いたスクロールバーのプラグインなどチョコチョコいじった（⇒(jQueryで超簡単に使えるスクロールバープラグイン）。タイトルを微妙に変えて「超簡単」とか書いてみたw（ま、事実なんだが）。プログラミング以外のこういう作業も楽しいもので。モバイルではスクロールバーが表示されないけど、おまけでつけた[自動で動かす]ボタンをがちゃんと動作していてナルホドなと。本気でモバイル対応してみようかなとかボチボチと秋が深まりますな♪

平日夜に酒を飲まないと利用できる時間がかなりあってなかなか楽しい。

[jQuery] jQueryで簡単に作るスクロールバーコントロール

今後のために作っておこうと10時くらいから作業始めたらこんな時間になってしもたので、リンクだけ貼っておく。寝なきゃwww

どうぞ⇒ jQueryで簡単に作るスクロールバーコントロール

[javascript+jQuery] イベントハンドラーの一括自動設定

WEBアプリで、ボタンやチェックボックスやSELECT～OPTION等にイベントハンドラを設定するのは、それなりに面倒。そういうのは自動でやればよい。リッチクライアントで大量にある場合なんて特に。

イベントハンドラを登録したい要素にIDを設定し、ID+イベント名みたいな関数を定義。ページのロード時にこのような関数をjQueryで検索して、自動的に登録してやればよいわけ。

以下、jQueryを使っている前提でご紹介

こんなHTMLがあったとして、

<button id="btn1" type='button'>button 1</button>
<input id="chk1" type="checkbox">check 1
<select id="sel1">
<option value="1">選択肢１</option>
<option value="2">選択肢２</option>
</select> 

それぞれのイベントハンドラを定義。

var btn1_click = function btn1_click(element) {
    alert(element.id);
};
var chk1_change = function(element) {
    alert(element.id + $(element).attr('checked'));
};
var sel1_change = function(element) {
    alert(element.id + $(element).val());
};

ページの読み込み時に、特定タグの要素について、操作オブジェクトとハンドラ関数を自動的にbindする。

$(function() {
    //ボタンのclick
    setElementHandler('button', 'click');
    //チェックボックスのchange
    setElementHandler('input[type=checkbox]', 'change');
    //SELECT～OPTIONのchange
    setElementHandler('select', 'change');
});
//jQueryのセレクタで選択した要素にidがあり、且つ 
// id+イベント名な関数があるなら、bindする。
function setElementHandler (stor, eventName) {
    $(stor).each(function (index, element) {
        if (element.id) {
            try {
                var hdl = eval('(' + element.id + '_' + eventName + ')');
                if (hdl) {
                    $(element).bind(eventName, 
                        function () {
                            hdl.call(undefined, element);
                        });
                }
             } catch (e) { /*例外は無視*/ }
        }
    });
}

不毛なコーディングはNothing。時間は有効に使おう。

SELECT～OPTIONにIMG表示

Firefoxでは意図した通りに動いていますが、他は微妙。IEでは選択肢に画像が表示されません。Chromeでは画像は一切表示されません。

実は今まで知らなかったのですが、HTMLでは、素のままでは画像を選択する選択肢って作れないのですね。OPTION要素の中にIMGを置いてもまったく表示されないようで。これってどうしてできなくしてあるんだろ？セキュリティ的にも問題なさそうなんだけど。。。

対処法は、javascriptを使う必要がありますけれど、割と単純。

こんな感じ↓

画像を選択してください 青ドット 赤ドット

各選択肢をあらわすOPTION要素それぞれに背景画像を使えばよろしい（スタイルの指定でコチョコチョしますが）。

単一選択のドロップダウンリストの形式では、ドロップダウンが閉じた後は選択画像が表示されませんから、(SELECT要素の)onchangeで、選択されたOPTIONの背景画像をSELECT要素へ設定してやります。（複数選択の場合はSELECTの背景は不要みたい）

コードはコチラ↓例によってjQuery必要です。

<style type="text/css">
#imgSelect, #imgSelect option {
	background-repeat:no-repeat;
	height:32px;
	padding-left:32px;
}
</style>
<select id="imgSelect">
<option style="background-image:none;">画像を選択してください</option>
<option style="background-image:url(blue-dot.png);">青ドット</option>
<option style="background-image:url(red-dot.png);">赤ドット</option>
<option></option>
</select>
<script type="text/javascript">
jQuery(function($) {
	$('#imgSelect').change(function(){
		var opt = $('#imgSelect option:selected');
		var url = opt.css('background-image');
		$('#imgSelect').css('background-image',url);
	});
});
</script>

問題は、選択肢の画像を小さく出来ない点かな。

----

WEB+DB PRESS Vol.97

posted with amazlet at 17.02.17

外村 和仁 小林 徹 古川 陽介 佐藤 歩 yoku0825 是澤 太志 一野瀬 翔吾 加藤 颯史 のざき ひろふみ うらがみ 水嶋 淳貴 久田 真寛 久保 達彦 伊藤 直也 遠藤 雅伸 ひげぽん 海野 弘成 はまちや2 竹原 倉岡 洋義
技術評論社
売り上げランキング: 1,775

Amazon.co.jpで詳細を見る

(*ﾟ▽ﾟ)ﾉ 苦手な顔文字克服作戦

ということで、ブラウザで使える顔文字入力のチートシート（カンニングペーパー）を作った＼(＾▽＾)／

顔文字チートシート（ブックマークレット）

自分は顔文字を入力するのがとても苦手。スマホには最初から基本的なのが入っていたのでよいのだが、PCでは無理。なので、「ちょっとこの文章に軽～く表情付けたいな！」って時に使えるものを！と、軽～い気持ちで手を出したんだが、予想以上に大変だった(T△T)。

まだまだ不便で機能アップが必要だし、いろいろやりたいこともいっぱいあるけど、とりあえず今日はここまで。眠いし(ﾉ_･､)

※ Firefoxでしかデバッグしてないので他はどうだかわかりません(￣⊿￣)o"

Javascriptからいきなり利用できる和暦変換サービス

昨日書いていた和暦変換サービスだけど、昨夜の時点で、実は家のPCでしか動いていなくて驚いたw。

朝のうちにホスティングサーバーにアップしたのだけど、まだ不具合があったりしてお恥ずかしいレベル。先ほど修正してアップした。変換テーブルを増やしてとりあえず1615年まで対応したりも（あーしんど。誰か書いてくれw）。

途中で「こんなのjavascriptでやればいいじゃん？」とか根源的な疑念を抱いてみたりしたが、のらりくらりとイイワケを書いて、とりあえず見れるようにサイトをまとめたので、、、寝ます。

⇒jsonpによる西暦⇒和暦変換処理のサンプル

暖かくなってきたし運動せなアカン。足が萎えてる。でも明日は雨か・・・

[javascript] 和暦変換サービス

和暦ってたまに必要になって、やっつけで変換処理を書くことが多い。日本全国津々浦々、いろんなところで別々に書かれているんじゃないかな。でも結果が変わるはずは無いのだから、世界に唯一そういうプログラムがあればよいってことで、ワンネンドンリーな和暦変換のWEBサービスでも書いておこうかとやってみた。JSONPをやってみるとか、そういう目的もあったのだけど。

とりあえず、xmlを返すAPIもあるのだけど、javascriptでお手軽に使えるバージョンを。内部的にはJSONP使っているので、クロスドメインOKです。

2012-02-29は和暦では？

上のコード

<script type='text/javascript'
  src='http://bicycle.life.coocan.jp/takamints/js/takamints.js'>
  </script>
<button
  onclick="toWareki();"
  >2012-02-29は和暦では？</button>
<script type='text/javascript'>
function toWareki() {
  takamints.toWareki(
    '2012-02-29',
    function(wdt) {
      alert(wdt); 
    }
  );
}
</script>

今のところ、フォーマットはひとつだけだけど、いろいろバリエーションが作れますね。逆変換とかも、必要かもね。ちゅうか、このサービス自体にホントに需要があるのかどうかは疑問だけど。ま、とりあえず、こんなことも出来るということで勉強にはなった。

「今までコールバックがグローバル領域の関数しか呼べねーんじゃJSONPなんて使えねー」という人だったのですが、専用のコールバック関数を提供すればなんてこたーないんだなと気がついて。動的に生成したSCRIPTを後で削除するためにIDを生成していたんだけど、これをキーにしてユーザー定義のコールバックを登録しておけば、後で呼び出せるわけですよ。