こんにちは。リアルタイム検索担当のあべです。

6月14日にリリースしましたリアルタイム検索のスマートフォン版を、本日、リリースいたしました。

パソコン版とスマートフォン版は、同じURLでアクセスできます。また、ウェブ検索や画像検索などからも、画面上部のタブで選択するか、検索窓にある虫眼鏡アイコンから「リアルタイム」を選択することで、リアルタイム検索をご利用いただけます。

スマートフォン版では、検索スタッフブログでも紹介されているとおり、スマートフォン版Yahoo!検索の共通UIを使用しています。他の検索サービスからリアルタイム検索へ遷移した場合でも、違和感なくご利用いただけます。

もちろんパソコン版の機能は、すべてスマートフォン版でも利用できます。

Tweet

こんにちは、Yahoo!ラボ担当です。

6月13日に、Yahoo!ショッピングの商品を、色や見た目の特徴で検索する、「FashionNavi」をリリースしました。
類似画像検索技術を用いて、色や模様のような、ことばで表現しづらい特徴を切り口とする、直観的な検索体験ができます。

このプロダクトを開発した、Yahoo! JAPAN研究所の岩崎 雅二郎のコメントを紹介します。

■ FashionNaviを開発した発想・開発のポイントは？

Yahoo! JAPAN研究所では大規模な類似画像検索の研究を行っております。その成果を利用した、「VisualSeeker」をすでにリリースしています。今回はこの技術を商品検索に利用してみました。商品の中でも特にファッション系は見た目の印象で選択する場合が多いですが、見た目の印象を言葉で表すことは難しく、うまく検索できないことが多々あります。このような場合には画像の特徴により検索する類似画像検索の技術が有効だと考え、Yahoo!ショッピングのファッションのカテゴリに対して商品の特徴で検索ができるFasionNaviを開発しました。また、開発に当たって検索を意識しないで、ウィンドウショッピングのように見て楽しみながらショッピングができることを目指してみました。

■ FashionNaviの機能紹介

FashionNaviでは大きく二種類の機能を提供しています。

・色検索：色を指定して商品を検索できます。微妙な色合いを指定できます。

・類似検索：検索結果で表示されている商品に類似する商品を検索できます。類似検索では色だけでなく形状や模様（質感）といった特徴も利用しています。

さらに、Yahoo!ショッピングの商品ページにも行けるので、商品を購入することもできます。

■ FashionNaviを実現する類似画像検索技術の概要、技術的優位性
中核となる技術はVisualSeekerと同様に高精度かつ高速な類似画像検索技術ですが、FashionNaviではこれに加えてYahoo! JAPAN 研究所で開発したオブジェクト抽出の技術も利用しています。オブジェクト抽出の技術によって画像から商品の領域と背景の領域を自動的に分離し、商品の領域から画像の特徴を抽出しています。商品の領域を抽出しているので、高精度に検索することが可能です。

■ 今後の展望について

比較的単純な商品画像は良いのですが、複雑な背景をもつ商品画像では精度良く商品の領域を抽出することは困難で、失敗することも多々あります。今後はこの商品領域の抽出の精度を上げることが大きな課題だと思っています。また、現在はファッションのカテゴリだけですが、さらに、カテゴリを増やしたいと思っています。

Tweet

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

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

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

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

となります。

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

検索履歴

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

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

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

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

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

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

Tweet

---

スマートフォン版Yahoo!検索　リニューアルのお知らせ

スマートフォン版Yahoo!検索の作り方

第1回：UI設計編

第2回：ビジュアル・デザイン編

第3回：UI実装編 - 共通UIの部品化と再利用

第4回：UI実装編：JavaScript