29分でできる！ あのサイトの“技”を盗め ― 第26回
普通のtableタグを1行で動く表にするJSライブラリ
2009年06月02日 14時00分更新
大量の情報を分かりやすく一覧で見せたい。そんなときには、やはり「表（テーブル）」をうまく使いこなしたいもの。罫線やセルの色分け、文字サイズの調整などを調整して見やすくデザインすることはもちろんですが、同時に、ユーザーが求める情報を的確に、分かりやすく表示する仕掛けがあるといいでしょう。
ヤフーが運営する「Yahoo！不動産」は、ユーザーの操作によってテーブルを分かりやすく表示するユーザーインターフェイスが参考になるサイトです。単なる見た目の装飾ではなく、実際に使い勝手を向上させるためにAjaxを活用した好例と言えるでしょう。
今回は、このYahoo！不動産をお手本に、Webサイトのブラッシュアップに取り組みます。
 |
|---|
今回のお手本サイト：『Yahoo！不動産』
ヤフーが運営する不動産総合情報サイト。日本全国の売買／賃貸物件の情報が大量に掲載されており、「写真掲載の有無」「部屋の広さ」といったさまざまな条件で検索できる。検索結果一覧画面から、気になる物件情報だけを1ページにまとめて整理したり、業者に問い合わせるといったアクションをすぐに取れる便利なサイトだ。
ユーザー自身がソートできるテーブルで使いやすく
家賃や最寄駅、間取りなどの情報をテーブルで一覧表示する、Yahoo！不動産の検索結果ページ（サンプルページ）には、ユーザーが目的の情報に到達しやすくなるように、さまざまな機能が用意されています。その1つが、テーブルのソート機能です。
テーブルの見出し行から、「駅名」「賃料」などの任意の項目をクリックするだけで、その項目をキーにして行が入れ替わります。再度、同じ項目名をクリックすると、今度は昇順／降順が切り替わるので、たとえば、家賃が安い順、築年数が新しい順、といった具合に物件リストをチェックできます。
 |  | |
|---|---|---|
| ソートしたい項目の見出し行をクリックするだけで、その項目をキーにして並べ替えができます | ||
こうしたテーブルの並べ替え操作は、多くのパソコンユーザーが表計算ソフトなどでなじみがあることもあり、迷わず操作できる便利なものです。不動産サイトに限らず、大量の情報をテーブルで表示するようなサイトでは幅広く使える手でしょう。「ユーザーの操作でソートできるテーブル」を今回は組み込んでみましょう。
