Google Maps API V3 で標高データが取得できるらしいと知って作ってみた。（⇒ Google標高カラーマップ）
標高データを取得するAPIに回数制限があるので、インターバルタイマーで回避。一定時間内の要求数の制限のようだが、詳細不明。
たまに OVER_QUERY_LIMIT!!! と怒られるが、リトライ処理でどうにかこうにか。
複数端末から同時に要求するとエラー頻度が高くなるのかな。この辺、よくわからないが、まーとりあえず。
海の中のデータもあるので、日本海溝の辺りとか見てるとなかなか呑めます(謎
カラーマップの色や表示範囲の変更が、インタラクティブに出来たらいいなと思うが、それはまたおいおい。。。
早めの午後ラン、ゆっくりロングで20キロほどを目指したのだが、13キロで気持ちが切れて中断した。先週から2キロ程度体重を落としている影響か、それとも水分補給の失敗か。いや両方か。体重が2キロ違うとずいぶん走りやすいやろなと思っていたが、スタミナとやらも減ったのか。で、スタミナってなんやと毎度の疑問。
減量は、この1週間ほど酒の量を減らした結果。見る見る体重が減っていくので面白い。来週当たりから第一回目の踊り場状態になると思うので、リバウンド警戒週間になるんやろな。今のところBMI=22くらいで標準ど真ん中。日常生活は快適だけど、快適な運動にはBMI=21までいっときたい。
運動時間以外は、自宅でXAMPPでAjaxやらjQueryプラグインなど。先日書いたスクロールバーのプラグインなどチョコチョコいじった（⇒(jQueryで超簡単に使えるスクロールバープラグイン）。タイトルを微妙に変えて「超簡単」とか書いてみたw（ま、事実なんだが）。プログラミング以外のこういう作業も楽しいもので。モバイルではスクロールバーが表示されないけど、おまけでつけた[自動で動かす]ボタンをがちゃんと動作していてナルホドなと。本気でモバイル対応してみようかなとかボチボチと秋が深まりますな♪
平日夜に酒を飲まないと利用できる時間がかなりあってなかなか楽しい。
今後のために作っておこうと10時くらいから作業始めたらこんな時間になってしもたので、リンクだけ貼っておく。寝なきゃwww
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。時間は有効に使おう。
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>
問題は、選択肢の画像を小さく出来ない点かな。
----
ということで、ブラウザで使える顔文字入力のチートシート（カンニングペーパー）を作った＼(＾▽＾)／
自分は顔文字を入力するのがとても苦手。スマホには最初から基本的なのが入っていたのでよいのだが、PCでは無理。なので、「ちょっとこの文章に軽～く表情付けたいな！」って時に使えるものを！と、軽～い気持ちで手を出したんだが、予想以上に大変だった(T△T)。
まだまだ不便で機能アップが必要だし、いろいろやりたいこともいっぱいあるけど、とりあえず今日はここまで。眠いし(ﾉ_･､)
※ Firefoxでしかデバッグしてないので他はどうだかわかりません(￣⊿￣)o"
昨日書いていた和暦変換サービスだけど、昨夜の時点で、実は家のPCでしか動いていなくて驚いたw。
朝のうちにホスティングサーバーにアップしたのだけど、まだ不具合があったりしてお恥ずかしいレベル。先ほど修正してアップした。変換テーブルを増やしてとりあえず1615年まで対応したりも（あーしんど。誰か書いてくれw）。
途中で「こんなのjavascriptでやればいいじゃん？」とか根源的な疑念を抱いてみたりしたが、のらりくらりとイイワケを書いて、とりあえず見れるようにサイトをまとめたので、、、寝ます。
暖かくなってきたし運動せなアカン。足が萎えてる。でも明日は雨か・・・
和暦ってたまに必要になって、やっつけで変換処理を書くことが多い。日本全国津々浦々、いろんなところで別々に書かれているんじゃないかな。でも結果が変わるはずは無いのだから、世界に唯一そういうプログラムがあればよいってことで、ワンネンドンリーな和暦変換のWEBサービスでも書いておこうかとやってみた。JSONPをやってみるとか、そういう目的もあったのだけど。
とりあえず、xmlを返すAPIもあるのだけど、javascriptでお手軽に使えるバージョンを。内部的にはJSONP使っているので、クロスドメインOKです。
上のコード
<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を生成していたんだけど、これをキーにしてユーザー定義のコールバックを登録しておけば、後で呼び出せるわけですよ。
リッチクライアントなWebアプリを作るときなど、１ページでたくさんのイベントハンドラ（onclickなど）を扱う場合、いちいちひとつずつ設定するのは大変ですし楽しくない。
こんな機械的な作業は自動的にやりましょう（jQuery必要です）。
mypage.html:とりあえずボタン置きます。
<script type='text/javascript' src='page.js'> </script> <script type='text/javascript' src='mypage.js'> </script> <!-- ボタン要素 --> <button id='btnSample'> 自動登録されたボタン </button>
page.js:ページロード時にボタンエレメントを探して、idが付けられていて「id+イベント名」的なメソッドがあるなら、bindします。
//Webページ基本クラス
Page = function () {}
Page.prototype.init = function () {
var THIS = this;
$('button').each(function() {
var elm = this;
if(elm.id) {
$.each(['click'],
function(i,evt) {
var fxn = THIS[elm.id+'_'+evt];
if(fxn) {
$(elm).bind(evt,function() {
return fxn.call(THIS, elm);
});
}
});
}
});
}
mypage.js:具象的なイベント処理は派生クラス側に記述。
//Pageを継承したMyPageを定義する
MyPage = function() {}
MyPage.prototype = new Page();
//'btnSample'のクリック処理
//thisはMyPageのインスタンス
MyPage.prototype.btnSample_click =
function(element)
{
alert(element.id + ' clicked');
}
$(function(){
//Webページのインスタンス生成
var page = new MyPage();
//ページの初期化
page.init();
});
HTML要素にID付けて、そのIDを利用した名前のメソッドを定義すれば勝手にbindされるわけで、同じ名前を何度も正確に書く手間から開放されます。
上の例ではbuttonのclickだけですが、他のHTML要素の他のイベントにも使えます。onsubmitとかonchangeとか。
photo credit: Darwin Bell via photopin cc
script要素で提供されている広告をブログの各記事の下などに貼りたい。しかし1ページ内の設置数の上限が設けられていて、記事に直接書いてしまうと、複数並ぶトップページで上限を超えちゃう可能性がある。
このブログはココログベーシック。レイアウトを自由に編集できないみたいなので「ページが表示された時、javascriptでブログレイアウトの特定要素（コンテンツのヘッダーやフッター部分）にscriptを生成すればよいのだな♪」と簡単に思った。が、なかなかこれがうまくいかんかった。スクリプトが書かれても中身が実行されないとか、クロスブラウザ的問題とか、deferってなにそれおいしいの？とか
頭の片隅ではモヤモヤしながら結局、そのまま一ヶ月近く放置してましたが、昨日、まさにあきらめかけていたその時、「パッと光明」頭が光る。
「div要素の中にscriptを直接書いてdivを丸ごと移動させればいいじゃんイイジャンそれイイジャン♪」と、、、、まー気づいたというか、「それ先に考えるだろフツー」と落ち込んだというか(笑)
以下のスクリプトをブログのレイアウトの中にしのばせる（ワタシはトップバナーのところ）。jQuery必要です。上から二つのコンテンツそれぞれの最後に広告表示。コンテンツがひとつしかない場合は2つ目をページの最後に表示してます。html要素のidやclassは使っているレイアウトに依存すると思うので、他のレイアウトでやるならfirebugなんかで調べてからヨロシク。
<div style="display:none;">
<div id="ad1" style="display:none;">
<script type="text/javascript">
//広告1
</script>
</div>
<div id="ad2" style="display:none;">
<script type="text/javascript">
//広告2
</script>
</div>
</div>
jQuery(function(){
var ad1 = $("#ad1");
var ad2 = $("#ad2");
var e=$(".entry-body");
var e1 = e.get(0);
var e2 = e.get(1);
var bsel = '.content-bottom:last';
var b = $(bsel).get(0);
if(e1) {
$(e1).append(ad1);
if(e2) {
$(e2).append(ad2);
} else {
if(b) {
$(b).append(ad2);
} else {
$(e1).append(ad2);
}
}
ad1.show();
ad2.show();
} else {
if(b) {
$(b).append(ad1);
$(b).append(ad2);
ad1.show();
ad1.show();
}
}
});
なんてこたーない、もーまんたい。まったく問題なく動作してるので、なんともいやはや（笑）
最近のコメント