入力ボックスに郵便番号のマスクを適用する方法(続編)

jQuery を使って、入力ボックスに郵便番号のマスクを適用する方法の続編を用意しました。

Alt+? キーの振る舞いを考慮するように修正し、Safari のフォーカスが移ったときテキストを選択できないという不都合にも対応しています。

入力ボックスに郵便番号のマスクを適用する #2

また、フォーカスを失ったとき、ハイフン付きの郵便番号となるよう辻褄を合わせるのは、ページのアンロード時に適用するのも有効であることがわかりました。

今まで試した結果に基づいて Postal Search Ajax API の jQuery lookup プラグインの1部として、入力ボックスに郵便番号のマスクを適用する機能を追加する予定です。$('#c').lookupable(); のように指定できるとよいかと思案中です。

Safari onfocus イベントで select してテキストを選択する方法 (改善案)

テキストボックスにフォーカスが移ったとき、そのテキストを選択するという、次のような JavaScript コードはよく見かけますが、onfocus イベントの中で select メソッドを使うという方法だと、Safari 3 では期待どおり動作してくれません。

テキストを編集しようとしてクリックすると、一瞬そのテキストが選択されますが、すぐに選択が解除されてしまいます。ただ例外もあって、タブキーでフォーカスが移ったときは、期待どおり選択され、解除されることはありません。う～む。

<form id="f">
<input id="c" type="text" name="c" value="160-0021" />
<input type="submit" />
</form>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {

$('#c')
  .focus(function() {
    $(this).select();
  });

}); //jQuery
//]]>
</script>

select メソッドは onfocus イベントが完了してから適用しないとダメのようです。ですので、次のように setTimeout 関数を使って、select メソッドの適用を遅らせてみたところ、期待どおり動作するようになりました。

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {

$('#c')
  .focus(function() {
    var self = this;
    setTimeout(function() {
     $(self).select();
    }, 10); // Safari
  });

}); //jQuery
//]]>
</script>

理論上は onfocus イベントの中で select メソッドを適用していないので、そのタイミングによる副作用があること(ありそう)ですが、他のブラウザも含めて試行していますが、今のところ不都合は見つかっていません。

[すぐにできる!] iLife'08 村上 弘子 白瀧 由裕 井村 克也 by G-Tools

ColorZilla ページの気になる配色を簡単に調べるときに役立つアドオン

おっ。このページの配色っていいなと感じたとき、そのカラーコードを知ろうとすると、HTML や CSS をソースを見て覗かせてもらったり、Firebug で該当要素のスタイルをさかのぼったり、けっこう手間がかかるものです。

ColorZilla Extension for Firefox and Mozilla

ColorZilla という Firefox アドオンを使うと、ページの気になる配色を調べるのが簡単です。ページ上の調べたい色の箇所をクリックするだけです。そうすると、カラーコードが表示されます。また、その結果をクリップボードにコピーもできます。

日本語でのローカライズに対応していますので、使い方で迷うこともないでしょう。

Firefox Hacks―次世代ブラウザ徹底活用テクニック Nigel McFarlane dynamis 池田 譲治 by G-Tools

GMap2 の引数 opts.size が役に立つときとは?

GMap2 クラスのコンストラクタに地図のサイズを指定できますが、この指定したサイズが何に役立つのか知る機会があったので紹介します。

よく見かける Google Maps API のコードは、次のように地図を表示する要素のスタイルに、その地図のサイズを指定しています。Google のサンプルコードも同じです。

<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById('map'));
//]]>
</script>
<div id="map" style="width:200px;height:200px;"></div>

ただし、次のようにスタイル display:none; を指定して GMap2 を生成して操作した後、display:block; とすると、地図が期待どおりの位置で表示されなかったり、地図の画像が半分しか表示されないといったことが起こります。

<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(y, x), 15);
//]]>
</script>
<div id="map" style="display:none;width:200px;height:200px;"></div>

このようなときは、GMap2 クラスのコンストラクタで地図のサイズを指定すると、期待どおりの結果になります。

<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById('map'), {
  size: new GSize(200, 200)
});
map.setCenter(new GLatLng(y, x), 15);
//]]>
</script>
<div id="map" style="display:none;"></div>

何のために存在するのかわからないオプションも、そのケースによって重要な意味を持つのですね。感心してしまいます。

Google Maps Hacks 第2版 ―地図検索サービスをもっと活用するテクニック Rich Gibson Schuyler Erle 武舎 広幸 by G-Tools

Postal Search Ajax API がマッシュペディアの WEB API に登録されました

Postal Search Ajax API が 郵便番号と位置情報をMashupしよう「Postal Search Ajax API 」 と題して、マッシュペディアの WEB API に登録されました。

Postal Search Ajax API は iPod touch の Safari でも使えます

Apple iPod touch 8GB の Safari でも Postal Search Ajax API が使えることを確認できました。

jQuery tablesorter 現在の位置をページ単位でなく行単位で表示する方法

jQuery plugin: Tablesorter 2.0 は tablesorter pagination plugin というプラグインと組み合わせて使うと、並べ替えができページングもできるテーブルを実現できます。

残念ながら tablesorter pagination plugin は、現在のページ数と総ページ数の表示をカスタマイズする方法がありません。非公式な方法がないかとソースコードを見てみましたが、その表示を横取りできるようになっていませんでした。そこでプラグインの外部でイベントを捕捉して、現在の行位置と総行数を表示することを試みてみました。

現在の位置をページ単位でなく行単位で表示する方法

カスタマイズの可能性をどこに線引くかは判断が難しいそうですね。表示する書式や内容は、なるべく利用者する側で決められるようにしたほうがよいのかもしれません。(今後の私への教訓とします。)

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のために Michael Mahemoff 牧野 聡 by G-Tools

jQuery tablesorter 並び替えできるテーブルであることをリンクで伝える方法

jQuery plugin: Tablesorter 2.0 は Blue Skin - Images and CSS styles for blue themed headers (as seen in the examples) というスタイルシートを提供しているので、すぐに見栄えのよい並べ替えできるテーブルを実現できます。

ただし、このスタイルシートのデザインだけだと、▼▲のアイコンの存在に気が付いて、そのアイコンをクリックしてみるまで、テーブルの行が並び替わることが伝わりません。これではせっかく導入したテーブルの並べ替えの効果が薄くなってしまいます。

そこで、ヘッダの項目名をリンクにして、テーブルの列に対して何か操作ができることを明示して、並び替えのできるテーブルであることを伝える方法をまとめました。

並び替えできるテーブルであることをリンクで伝える方法

小さな工夫がユーザビリティに大きな影響を与えるという実例でもあります。

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のために Michael Mahemoff 牧野 聡 by G-Tools

jQuery tablesorter HTML 要素を含む列でテーブルの行を並び替える

jQuery plugin: Tablesorter 2.0 は、テーブルの値に HTML 要素が含まれていても、自動的に、半自動的に、もしくは指定したルールにしたがって、テーブルをソートできる柔軟性を備えています。

都道府県を表すテーブルを題材に、span と a の複数の要素を含む列をソートする方法をまとめました。

HTML 要素を含む列でテーブルの行を並び替える

tablesorter 公式サイトの textExtraction を使ったデモ では、textExtraction プロパティに function を指定して、並べ替えのテキストを決定していますが、要素のテキストを使うだけなら もっと簡単に textExtraction プロパティに function 以外かつ simple 以外を指定するだけで、多くのケースをカバーできることがわかります。

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のために Michael Mahemoff 牧野 聡 by G-Tools

jQuery tablesorter 選択ボックスで指定した列でテーブルの行を並び替える

jQuery plugin: Tablesorter 2.0 は、テーブルのヘッダの列にある▼▲のアイコンをクリックする以外にも、リンクやフォームなど外側からのイベントを通じて、テーブルをソートすることもできます。

都道府県を表すテーブルを題材に、選択ボックスで指定した列でテーブルの行を昇順(または降順)ソートする方法をまとめてみました。

選択ボックスで指定した列でテーブルの行を並び替える

ソートの指示は jQuery.trigger メソッドから sorton イベントを指定する仕組みです。jQuery の標準イベントと同じように扱えるので、とても扱いやすい印象が残ります。

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のために Michael Mahemoff 牧野 聡 by G-Tools

jQuery tablesorter 指定した条件でテーブルの行を並び替える

jQuery plugin: Tablesorter 2.0 を使うと、指定した条件でテーブルの行を並び替えることができます。

都道府県を表すテーブルを題材に tablesorter のもっともオーソドックスな使い方をまとめてみました。

指定した条件でテーブルの行を並び替える - tablesorter - Postal Search Ajax API with jQuery - Postal Search APIs & Solutions

1行間隔で行の背景色を変える方法、指定した列と並び順でソートする方法、指定した列のソートを無効にする方法を紹介しています。

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のために Michael Mahemoff 牧野 聡 by G-Tools