現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。JavaScript機能の紹介こんにちは。ヤフーエンジニアのわたなべせいりょです。検索をより便利にの中でご紹介させていただいた機能の実際の実装について書きたいと思います。長押し入力について書いてみたいと思います。array」を調べたい時など、一度「JavaScript」の検索結果に飛ばないといけないのを億劫に感じていました。いったところから長押し入力を思いついたのですが、実装に当たり、長押しにより入力ボックスの文字が変わり、後で説明いたしますが一定時間間隔で入力ボックスをチェックしていることから指を抑えたままの状態でサジェストが書き変わり、その状態でいるとまたそこを長押ししたと判定してしまったり、指を離すとタップしたと判定されたりすることを防ぐのに少し苦労しました。次にインクリメンタルサーチの説明をしたいと思います。インクリメンタルサーチの実装は割と単純で、入力ボックスの値が変更されれば対応するHTMLを入れ替えるという方法を取っています。JSONでデータだけ受け取る方法もあったのですが、共通フレームワークであることから、それぞれのサービスのデザインをJSで持つことは避けたかったので、現在の仕様にしました。インクリメンタルサーチの場合、JavaScriptでDOMを変えていくことからページ遷移が発生しませんので、例えば何も入力されていな状態から「abc」と入力した後、検索結果がJavaScriptで描画され、その後その結果のページへ移動した後、「戻る」を行っても何も入力されていな状態に戻るという問題がありました。イベントを利用して「戻る」「進む」の挙動を実現しました。"";}次は、検索履歴について触れてみます。スマートフォンだしローカルストレージが使えるだろう、ということでローカルストレージを利用した検索履歴の保存を行い、同時に検索履歴からのサジェストも行えるようにしました。デリミタはタブを利用しています。Yahoo!検索ではクエリ内のタブはスペースへ変換されるため、デリミタとして適しています。制御文字でもよかったのですが、デバッグのしやすさからこちらを採用しました。histarr.join("\x09"));}スマートフォンのバージョンによってはローカルストレージが使えませんので、その場合はGearsを利用します。読み込むようにすることで、容量の増大を抑えています。次に、入力補助の実装について触れたいと思います。一定間隔で入力ボックスをチェックしており、内容に変化があればAPIをたたき、サジェストを表示するようにしています。onkeyupをトリガーにしてもいいのですが、ブラウザ間のタイミングの違いや、素早く入力された場合を考慮し、現在の方法を取っています。}}通常のサジェストに加え、検索履歴からも入力補助が出せるようにしています。」を検索している人にとってはそちらが入力補助として出た方がユーザビリティとして高いと考えました。本当は検索履歴内でマッチするものが5つあれば5つとも出したいと考えていたのですが、社内での議論の結果1行だけしか出さないということになりました。ログから検索履歴が良くつかわれているようであれば表示を増やすことも検討するということになっていますので、履歴からの入力補助をたくさん使っていただけると嬉しいです。コードとしては入力補助で利用したタイマーに入れ込む形で実装します。履歴は前方一致で、カタカナも含まれるようにしています。}}また、最初の文字と最後のクエリを関連付けることにより、アルファベット一文字でも履歴を呼び出せるようにもしてみました。前方一致であれば「ro」と打ち、「ロ」に変換しなければ「ローカルストレージ」と出てきませんが、これであれば「r」と打てばいつも検索している「ローカルストレージ」が表示されます。こちらもタブをデミリタとして使用しています。fst_arr.join("\x09\x09"));}いかがでしたでしょうか。履歴に関してはその頻度のデータも取得し、よりパーソナライズされた入力補助を出せるようにするなどを考えています。他にも工夫を続け、検索ブログでも書きましたがより早く目的の検索結果を表示できるよう、またユーザビリティへもこだわり、改善していきたいと思っていますので、今後ともよろしくお願いいたします。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。