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

1年のスケジュールを見渡せるポスターカレンダー

2008年全体のスケジュールを見渡せるように、次のような A2 版の ポスターカレンダーを購入 しました。

1枚の中に1月から12月すべてのカレンダーが含まれ、かつ記入スペースもあるので実用性も高いです。

また、カレンダーといえば週単位で改行するものが多いですが、このカレンダーは月単位の改行となっているので、月単位でスケジュールが決まる私にとっては、週をまたいで記入できたり、月末がハッキリ見えるので、とても扱いやすいです。

価格もお手ごろ 420 円です。東急ハンズでも取り扱っています。

DANESE（ダネーゼ） 卓上万年カレンダー Ti ホワイト



by G-Tools