記事詳細 1件表示

スマートフォン版Yahoo!検索の作り方 第4回:JS編 - 検索をより便利に

2011年7月 7日 11:45

こんにちは、Yahoo!検索 開発チーム JavaScript担当の渡邊誓旅です。

スマートフォン版Yahoo!検索の作り方 第1回~第3回 に引き続き、今回で最後、JS編になります。
ここではJavaScriptで実装した機能について紹介したいと思います。
今回スマートフォン版Yahoo!検索のJavaScript部分を担当するにあたり、いかに早く目的の検索結果にたどりつけるかということにこだわり開発しました。開発した機能については賛否あり議論しつつ進めていきましたが、結果的には良いものとなったと思いますので、もし知らなかった機能があればぜひ試してみてください。

入力補助
文字を入力した際に、検索窓の下に候補のワードが出ます。
タップするとそのキーワードで検索されるわりとおなじみの機能で、特にPCに比べキーの小さなスマートフォンでは入力しづらさを軽減してくれます。
今回は少し工夫をして、1秒程度そのまま押し続けると検索窓にそのワードが入力され、
続きを入力できるようにしてみました。
例えば「天気 名古屋」と入力したい場合、通常であれば
「て」と入力→「天気」が候補に出る→「天気」をタップ→「天気」の検索結果が表示→検索窓をタップ→
「天気 名古屋」をタップ→検索結果が得られる

01.png

となります。「天気」検索結果が表示されるのを一度待たないといけませんし、特に回線の遅い環境だと、
非常に長く感じると思います。
そこで、長押し入力を使った場合、
「て」と入力→「天気」が候補に出る→「天気」を長押し→検索窓に「天気 」が入力される→「天気 名古屋」をタップ→
検索結果が得られる

02.png

となります。

今度はすぐに目的の結果に行きつくことができました。

検索履歴

検索窓が空のとき、今までに検索したキーワードの履歴が表示されます。

03.png

検索履歴を残すにあたり、Local Storageを利用しました。
Local StorageはCookieよりも大容量なブラウザのデータ保管機能で、ほとんどのブラウザに組み込まれていますが、
一部で対応していないブラウザもあり、その場合はgearsを利用するようにしています。
gearsは現在オープンソースプロジェクトとして開発されています。
履歴の機能が使えない、という場合は、ブラウザの設定からgearsをオンにしてみてください。

また、履歴からキーワードを検索し、入力補助として出す機能も加えました。
これにより、いつも検索しているキーワードをより早く入力することができます。
前方一致した履歴だけでなく、最初の文字と最後のワードを関連付けることにより、
下記の例のようにアルファベット一文字でも取り出すことが可能になっています。

04.png

履歴を残すのがイヤ! という場合には、検索設定にて履歴の機能をオフにしてください。

05.png

インクリメンタルサーチ
今回は辞書のみですが、インクリメンタルサーチの機能も実装しました。
「a」→「abc」
と入力することで、「a」の検索結果、「abc」の検索結果が画面遷移なしで表示されます。
ちなみに、「abc」と入力した後、「戻る」を押すと「a」の検索結果に戻ります。
通常は画面遷移が発生しない場合「戻る」の操作ができませんが、
フラグメント識別子(#)を利用することで実現しています。

06.png
07.png

具体的な実装についてはスマートフォン版Yahoo!検索 JavaScript機能の紹介で書いておりますので、
ご参考になれば幸いです。


スマートフォン版Yahoo!検索 リニューアルのお知らせ
スマートフォン版Yahoo!検索の作り方
第1回:UI設計編
第2回:ビジュアル・デザイン編
第3回:UI実装編 - 共通UIの部品化と再利用
第4回:UI実装編:JavaScript

カテゴリー:Yahoo!検索

当ブログについて

Yahoo!検索スタッフブログは、Yahoo!検索の新しいサービスのお知らせ、検索データの分析レポート、検索関連の読み物コンテンツ情報などをお届けしています。

ブログ内を検索

ページのトップへ

ブログトップ > スマートフォン版Yahoo!検索の作り方 第4回:JS編 - 検索をより便利に