たくさんのデータを扱う携帯サイトを作ると、
ユーザーの視点で見るとデータを探すのって、
結構めんどくさいんですよね。
そんな、携帯サイトのユーザビリティを向上させるために、
色んな検索方法を組み込んでみるのも一つの手です。
その中でも、一番オーソドックスで簡単に導入できる、
50音検索の作り方をご紹介します。
ZendFrameworkを使用していますが、
パラメータの取得のところぐらいなので、
ご利用の環境に置き換えてご覧になって下さい。
では、説明していきます。
作るに当たって重要なのは、
DBにデータを登録してもらう時に、
「かな」で入力をしてもらう項目を設置してください。
かな検索をかけるので必須です。
次に、HTMLに「あ｜か｜さ｜た｜な｜は｜ま｜や｜ら｜わ」をそれぞれリンクで作成します。
[href]につっこむ遷移先のURLは現在表示されているＵRLです。
ただし、そのURLの最後にパラメータを設定します。
ex.[現在表示されているURL]/search/a/
「あ」行であれば”/search/a/”、「か」行であれば”/search/ka/”をくっつけます。
同じページに飛ばすので遷移後の処理は、
同じアクション内に書きます。
まずこの送られてきたパラメータを取得します。
//パラメータの取得
$search = $this->_getParam('search');
//パラメータを変数にセット
switch($search){
case 'a':
$data['a'] = $search;
break;
case 'ka':
$data['ka'] = $search;
break;
case 'sa':
$data['sa'] = $search;
break;
case 'ta':
$data['ta'] = $search;
break;
case 'na':
$data['na'] = $search;
break;
case 'ha':
$data['ha'] = $search;
break;
case 'ma':
$data['ma'] = $search;
break;
case 'ya':
$data['ya'] = $search;
break;
case 'ra':
$data['ra'] = $search;
break;
case 'wa':
$data['wa'] = $search;
break;
}
ただこれだけのことです。
ここまでできればあとはDBに処理を引き継ぎます。
本来ZendFrameworkではDBでの処理はモデルで行うべきなのですが、
今回はシンプルに分かりやすくするためにこのまま書きます。
DBの中には、テーブル名:search、カラム:name、name_kanaです。
nameは本来表示させたいもの、name_kanaは検索用。
データはこんなものを入れてみました。
INSERT INTO search(name,name_kana) VALUES ('太郎','たろう');
INSERT INTO search(name,name_kana) VALUES ('花子','はなこ');
INSERT INTO search(name,name_kana) VALUES ('勇次','ゆうじ');
INSERT INTO search(name,name_kana) VALUES ('ROBIN','ろびん');
INSERT INTO search(name,name_kana) VALUES ('ちん丸','ちんまる');
DB接続等の処理は割愛し、SQLを書きます。
$sql = SELECT * FROM search;
この基本SQLに、
if($data['a']){
//あ行検索
$sql .= "WHERE name_kana BETWEEN 'ぁ' AND 'か'";
}elseif($data['ka']){
//か行検索
$sql .= "WHERE name_kana BETWEEN 'か' AND 'さ'";
}elseif($data['sa']){
//さ行検索
$sql .= "WHERE name_kana BETWEEN 'さ' AND 'た'";
}elseif($data['ta']){
//た行検索
$sql .= "WHERE name_kana BETWEEN 'た' AND 'な'";
}elseif($data['na']){
//な行検索
$sql .= "WHERE name_kana BETWEEN 'な' AND 'は'";
}elseif($data['ha']){
//は行検索
$sql .= "WHERE name_kana BETWEEN 'は' AND 'ま'";
}elseif($data['ma']){
//ま行検索
$sql .= "WHERE name_kana BETWEEN 'ま' AND 'ゃ'";
}elseif($data['ya']){
//や行検索
$sql .= "WHERE s_name_kana BETWEEN 'ゃ' AND 'ら'";
}elseif($data['ra']){
//ら行検索
$sql .= "WHERE name_kana BETWEEN 'ら' AND 'ゎ'";
}elseif($data['wa']){
//わ行検索
$sql .= "WHERE name_kana BETWEEN 'ゎ' AND 'ァ'";
}
これを追加します。
今回の味噌となる部分で、between ~ AND ~ を使って表示させています。
betweenは文字列でも順番に検索できるようで、
バイナリデータに置き換えて、表示してくれているみたいです。
小さい「ぁ」から始まるのが重要なところです。
betweenでの検索は未満検索なので、
"WHERE name_kana BETWEEN 'ゎ' AND 'ん'";
と入力すると、「ん」はとってこれません。「ゑ」までです。
ですので、「ん」の表示だけがちょっとややこしくて、
「ん」の次にくるカタカナの小さい「ァ」を指定してやってください。それで表示できます。
ex.「た」行が検索される SQLの中身は、SELECT * FROM search WHERE name_kana BETWEEN 'た' AND 'な'; name | name_kana --------+----------- 太郎 | たろう ちん丸 | ちんまる (2 rows)
こんな感じでデータが出てきます。
ちゃんと「た」行検索されています。
簡単ですね。
このように簡単に導入できるものですので、
ユーザビリティ向上のために是非取り入れてみてください。
