オレもオレオレ検索エンジンを作ってダッシャーしてみた

このようなサービスがちょっと話題になっていた・・・

pasokatu.com

なのだが、除外がガッツリ過ぎて自分には合わないとか、なんか嘘くせーって感じる人も多いようで、 このエントリーにも頑張れば自分で作れるというので作ってみた。

検索エンジン自作入門 ~手を動かしながら見渡す検索の舞台裏

検索エンジン自作入門 ~手を動かしながら見渡す検索の舞台裏

個人サイト用カスタム検索を作る

まずとにもかくにも Google カスタム検索 に行く

ここで個人サイト用のカスタム検索を1個作る。ちょっとちょっと! 作りたいのは Web 全体の検索で個人サイト用じゃないと思ってしまうが、これで合っているのである。 Google カスタム検索はいきなり Web 全体の検索するカスタマイズができないようになっている仕様なのでまずは個人サイト用のカスタム検索を作るのである。

と Google 本人も言っている

support.google.com

Add ボタンを押して追加する。

f:id:zamad:20161006114852p:plain

必要な項目を記入する。検索するサイトは www.example.com とする。これは「例」として入れているわけでなく実際にこの値で設定する。 名前は適当でいいだろう。言語は日本語にしておこう。

f:id:zamad:20161006115141p:plain

できあがったので、作った検索エンジンを編集する

f:id:zamad:20161006115839p:plain

Web 全体対応に変更

作った検索エンジンの設定を変える。追加したサイトを重視して、ウェブ全体を検索する 設定に変更して、検索する対象のサイト www.example.com を削除する。

f:id:zamad:20161006131859p:plain

これで Web 全体を検索対象にする カスタム検索エンジン を作ることができた。

Rubyでつくる検索エンジン

Rubyでつくる検索エンジン

通常の検索

では「HDMI ケーブル」について調べたいとして普通に Google で検索してみる HDMI ケーブル - Google 検索

このように長々と広告も出るが、トップ2に定番の「価格」と「尼」が出ている。

f:id:zamad:20161006132907p:plain

除外設定

では、価格と尼を除外してみよう

まずカスタム検索の設定画面の先程 www.example.com を削除したところの下の 詳細設定 の文字をクリック

f:id:zamad:20161006133218p:plain

そうすると 除外するサイト という欄が出て来るので、追加 をクリックする。このわかりにくさを見るに、Google 自身も作ったはいいがこの機能はあまり使わせたくないという気持ちがビンビンに伝わってくる。

f:id:zamad:20161006133733p:plain

小さなポップアップが上がるので、おもむろに kakaku.com と書き込んで 保存 する。

f:id:zamad:20161006134113p:plain

この設定画面の右側に設定を試すところがあるのでここで試してみる。

f:id:zamad:20161006134330p:plain

「価格」が除外されて「尼」が一番に来ていることが確認できた。 では同様に「尼」除外してみよう。

f:id:zamad:20161006134607p:plain

バッツリ除外できた。

ホーメル スパム レギュラーN 340g

ホーメル スパム レギュラーN 340g

公開

では作った検索エンジンを公開してみよう

vtec.hatenablog.com

これである。

これは、デザイン の画面から 保存してコードを取得 を押すとコードが取得出来る

f:id:zamad:20161006152756p:plain

コードはこのようなタグとJSコードで構成されている

<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

これをこのまま はてなブログのエントリーに貼り付ければおしまいである。 しかしこれは一工夫必要で、実際はこのようなコードをブログに張りつけることになる。

<div>
<script type="text/javascript" src="https://cse.google.com/cse.js?cx=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<gcse:search></gcse:search>
</div>

あとは、ブログ本来の CSS が検索結果にも適用されるのでここを専用に作ってあげる必要がある。 それにしても簡単にできるもんである。

ボブ・ロス ザ・ジョイ・オブ・ペインティング 決定版DVD-BOX1

ボブ・ロス ザ・ジョイ・オブ・ペインティング 決定版DVD-BOX1

ボブ・ロス THE JOY OF PAINTING2 神々しい山 [DVD]

ボブ・ロス THE JOY OF PAINTING2 神々しい山 [DVD]

勇者に滅ぼされるだけの簡単なお仕事です〈9〉

勇者に滅ぼされるだけの簡単なお仕事です〈9〉