このページの本文へ

Yahoo!検索でWebサイトに検索機能を追加

2008年09月11日 16時00分更新

文●小橋川誠己/ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

 ブログやCMSといったデータベースを使った近頃のWebサイトはともかく、長年、スタティック(静的)なHTMLで作り込んでしまったサイトに検索機能を導入するにはどうしたらよいか? 「Namazu」のようなCGIを使ってもいいし、最近はGoogleやYahoo!といった検索サービスのサイト内検索機能を使ってもいい。各サービスとも、検索窓を設置できるHTMLコードを配布しており、数行のHTMLを貼り付けるだけでサイト内検索を実現できる。もっともお手軽な方法だ。

 ただ、検索結果のページがいかにも検索サイトのデザインではかっこ悪すぎる。すでに米グーグルには「Googleカスタム検索」というサービス(2006年10月開始)があり、検索結果ページのデザインや検索オプションを含めて細かくカスタマイズし、Googleの検索エンジンをあたかも自分のサイトの検索機能のように使える。

 残念なのは、Googleカスタム検索は設定画面がすべて英語であり、設定項目が細かいこと(そのおかげでいろいろできるのだが)。そこでオススメなのが、ヤフーが9月10日にリリースした新サービス「Yahoo!検索 カスタムサーチ」(以下、Yahoo!カスタムサーチ)。日本のヤフーが始めたサービスだから設定画面やマニュアルは当然すべて日本語だ。しかも「検索窓デザイン」「検索設定」「検索結果ページデザイン」「HTMLソース確認」という、たった4ステップで導入できる手軽さもいい

Yahoo!

Yahoo!カスタムサーチは4ステップで設定が完了する

 最初の設定画面「検索窓デザイン」では、検索対象とするサイトのURL、検索窓のデザイン(横幅や枠の色など)を指定する。ユニークなのは、デザインを変更するとプレビューがすぐに自動更新されること。プレビュー部分はフローティングしており、画面をスクロールしても追随してくるので、常に最新の状態を確認できる

Yahoo!

最初の画面で検索窓のデザインを選ぶ。設定中、プレビューが常に更新されるのがおもしろい。検索窓に入るYahoo!のクレジットも選べる

 次の「検索設定」は、主にウェブ検索(インターネット検索)を利用する際の設定をする画面。検索の際に自動的に補完/除外するキーワードを「追加クエリ」や「削除クエリ」として指定できる。たとえば、プログラミング言語の「PHP:Hypertext Preprocessor」について検索したいときに、単に「PHP」と入力して検索すると出版社の「PHP研究所」の情報が含まれるページも結果に表示されてしまう。削除クエリに「PHP研究所」と指定しておけば、検索結果から「PHP研究所」を除いた「PHP」の情報が得られるようになる。

Yahoo!

「検索設定」の画面。実際の検索結果を右ペインで確認しながら設定できる

 3番目の「検索結果ページデザイン」では、検索結果ページのデザインをカスタマイズできる。ページの幅やレイアウトパターンを変更したり、ロゴ画像をアップして表示させたりと“見た目”を自分のサイトに近づけられる。あとに「HTMLソース確認」の画面で生成されたHTMLコードを検索窓を設置したいページに貼り付ければ準備は完了である。

Yahoo!

検索結果のページはかなりカスタマイズが可能。背景やロゴの画像もアップロードして指定できる

 実際に作成した検索ページが下の画面。先日、別の記事で作成した「My Jeans.com」のロゴに合わせてデザインしてみた。適当なキーワードを入れて検索すると、オリジナルの検索結果のページが表示される。これだけで自分専用のサイト内検索が設置できた。


 

 Yahoo!カスタム検索はとてもシンプルで簡単に使えるサービスだ。サイト内検索を設置したいが、とにかく手間暇かけたくない! そんなサイト運営者に有用だろう。Yahoo! Japan IDがあればすぐに無料で利用できるのでぜひ試してみよう。

Web Professionalトップへ

この記事の編集者は以下の記事をオススメしています