自作のサイト内全体を検索できる検索BOXの設置スクリプトと設置方法をおしえてください。

このサイトhttp://www.brooklynparlor.co.jp/のようなBOXを設置したいです。
どこにどう書けばいいのか教えてください。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2010/02/11 11:53:05
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:HowManyFiles No.1

回答回数24ベストアンサー獲得回数7

ポイント23pt

サイト内の検索が出来るような仕組みは何種類か存在しますので、順に紹介します

  1. 全文検索エンジン(Grep型)を用いる
    • メリット
      • それなりに設置が簡単。
    • デメリット
      • サイト内のファイルの数が増えると検索が遅くなり、場合によってはタイムアウトなどが起こるようになる。サーバへの負荷も増える。
      • ページを動的に生成しているサイトでは使えない物が多い。
  2. 全文検索エンジン(インデクス型)を用いる
    • メリット
      • Grep型と比較して、大量のファイルに対応可能。サーバへの負荷もあまり増えない。
    • デメリット
      • Grep型と比べた場合、設置が面倒くさい
      • サイトの内容が変わる度にインデクスを更新する必要がある
  3. 外部サービスを利用する
    • メリット
      • 設置が最も簡単
      • メンテナンスの手間が殆どない
      • サイトを運営しているサーバに負荷がかからない
    • デメリット
      • 細かなカスタマイズが出来ない

というわけで、順に代表的なものを紹介します。

  1. Grep型
  2. インデクス型
  3. 外部サービス

オススメのものなど

私がオススメするのは、Google カスタム検索です。メンテナンスの必要が無い上にサーバへの不可もかからないというのは、長期的に利用することを考えた場合、大きな利点となります。

Grep型やインデクス型を使いたい場合、私が挙げたもの以外にも種々公開されていますので、『全文検索 CGI』等のキーワードで検索してみると良いと思います。

どこに書けばいいのか

一般論ですが、HTML中の検索ボックスを設置したい場所に書けばいいと思います。ページがマルチカラムであれば、メインでないカラムの上のほうに設置すればビジターが使い易いのではないかと思います。

どう書けば良いのか

ものによって違うので『こうだよ』とは言えないのですが、だいたい以下のような感じになると思います。スクリプトを導入するにせよ外部サービスを使うにせよ、ほぼ変わりません。

<form action="cgi の相対URL もしくは外部サービスのアドレス"
    <input type="text" size="30(適当な値)" name="指定された値"value="" />
    <input type="submit" value="Search!" />
</form>
id:louka

ありがとうございます!googleカスタム検索が便利そうなのですが、表示されている検索ボックス内に「googleカスタム検索」と薄字で入っているのが格好わるくて(僕のサイトはデザイン系サイトなので。)、外せないのでしょうか?

(一応、googleのコントロールパネルで試してみました。)

また、外せるのであれば、ボックスのデザインをbrooklynparlor.co.jp/にあるような、オリジナルデザインに変更することは手間がかかる作業になるのでしょうか?

ちなみに、この上記のサイトはどのような、検索のやり方になっているのかお分かりでしたら、教えてやってください。

(このサイトのページ構造を参考にサイトを作っております。)

2010/02/07 14:08:39

その他の回答3件)

id:HowManyFiles No.1

回答回数24ベストアンサー獲得回数7ここでベストアンサー

ポイント23pt

サイト内の検索が出来るような仕組みは何種類か存在しますので、順に紹介します

  1. 全文検索エンジン(Grep型)を用いる
    • メリット
      • それなりに設置が簡単。
    • デメリット
      • サイト内のファイルの数が増えると検索が遅くなり、場合によってはタイムアウトなどが起こるようになる。サーバへの負荷も増える。
      • ページを動的に生成しているサイトでは使えない物が多い。
  2. 全文検索エンジン(インデクス型)を用いる
    • メリット
      • Grep型と比較して、大量のファイルに対応可能。サーバへの負荷もあまり増えない。
    • デメリット
      • Grep型と比べた場合、設置が面倒くさい
      • サイトの内容が変わる度にインデクスを更新する必要がある
  3. 外部サービスを利用する
    • メリット
      • 設置が最も簡単
      • メンテナンスの手間が殆どない
      • サイトを運営しているサーバに負荷がかからない
    • デメリット
      • 細かなカスタマイズが出来ない

というわけで、順に代表的なものを紹介します。

  1. Grep型
  2. インデクス型
  3. 外部サービス

オススメのものなど

私がオススメするのは、Google カスタム検索です。メンテナンスの必要が無い上にサーバへの不可もかからないというのは、長期的に利用することを考えた場合、大きな利点となります。

Grep型やインデクス型を使いたい場合、私が挙げたもの以外にも種々公開されていますので、『全文検索 CGI』等のキーワードで検索してみると良いと思います。

どこに書けばいいのか

一般論ですが、HTML中の検索ボックスを設置したい場所に書けばいいと思います。ページがマルチカラムであれば、メインでないカラムの上のほうに設置すればビジターが使い易いのではないかと思います。

どう書けば良いのか

ものによって違うので『こうだよ』とは言えないのですが、だいたい以下のような感じになると思います。スクリプトを導入するにせよ外部サービスを使うにせよ、ほぼ変わりません。

<form action="cgi の相対URL もしくは外部サービスのアドレス"
    <input type="text" size="30(適当な値)" name="指定された値"value="" />
    <input type="submit" value="Search!" />
</form>
id:louka

ありがとうございます!googleカスタム検索が便利そうなのですが、表示されている検索ボックス内に「googleカスタム検索」と薄字で入っているのが格好わるくて(僕のサイトはデザイン系サイトなので。)、外せないのでしょうか?

(一応、googleのコントロールパネルで試してみました。)

また、外せるのであれば、ボックスのデザインをbrooklynparlor.co.jp/にあるような、オリジナルデザインに変更することは手間がかかる作業になるのでしょうか?

ちなみに、この上記のサイトはどのような、検索のやり方になっているのかお分かりでしたら、教えてやってください。

(このサイトのページ構造を参考にサイトを作っております。)

2010/02/07 14:08:39
id:HowManyFiles No.3

回答回数24ベストアンサー獲得回数7

ポイント22pt

追加情報ということで。

挙げられているサイトに関して

http://www.brooklynparlor.co.jp/ を見る限り、当該サイトは Wordpress で構築されているようです。このサイトが利用している検索システムに関してですが、ソースを覗いてみたところ、検索フォーム部分の form 要素のaction 属性がサイトのトップページの URL となっていましたので、Wirdpress にそもそも検索機能がついているとすれば、それかもしれないです。そうでないとしたら、これ以上は管理人の人に直接聞いてみないと分からなさそうです。

カスタム検索の背景画像に関して

カスタム検索を利用する際に気になるというインプットボックスの背景画像ですが、ソースを見てみたところ、単に CSS で background-image を指定しているだけなようですので、CSS で当概要素に background-image: none!important などと書いておけば良いと思います。

おまけ的な何か

見栄えを細かく制御したいという点が大事である場合、Google カスタム検索は不向きかもしれません。質問文章に挙げられているサイトとできるだけ似た感じに作りたい場合は、Wordpress というブログシステムを利用すれば良いかと思われます。

id:louka

検索boxの設置は、思っていたよりもちょっと大変そうな印象をうけています。

もし、例であげているサイトと同じ、検索boxのデザイン(検索結果のデザインは同じでなくても。)にする場合、最良のソースやシステム策などがございましたら、教えてやってください。サイト内のページ数は多くても30ページ程度(文章も少ない)に収まる予定ですので、サーバーへの負荷はあまり気にしておりません。うーん。難しそうで、めげそうですが..アハハ

2010/02/09 16:08:12
id:HowManyFiles No.4

回答回数24ベストアンサー獲得回数7

ポイント30pt

 さらに追加の情報ということで。

 最初から自前の全文検索システムを導入しようとしてもたぶん挫折してしまうと思うので、最初は Google カスタム検索を「とりあえず使ってみる」というのが無難だと思います。アレなら設置に失敗するということはまずないと思いますので。

 検索ボックスのデザインですが、Google カスタム検索であれなんでアレ、それなりに自由にデザイン出来るはずです。大体の検索ボックスは以下のような感じになっていると思うので、適宜 CSS などを書いてやればOKです。

<form
  method="get(post の場合もある。指定された値にしておく)"
  id="※指定された値か、指定されていない場合は自分で勝手につけても良い※"
  action="※指定された値※"> 
    <p>
        <!-- テキストボックス -->
        <input
            type="text"
            value=""
            name="※指定された値※"
            id="※指定された値か、指定されていない場合は自分で勝手につけても良い※" />
        <!-- ボタン(画像) -->
        <input
            type="image"
            src="ボタンとして表示したい画像"
            (※id 属性や name 属性も必要であれば書いておく※) />
    </p>
</form>

 こんな感じですね。

id:louka

ありがとうございます。ボックス内のgoogleのロゴが消せるのであれば、カスタマイズして設置してみようと思います。ソースまで書いて頂き、どうもありがとうございました!心より。

2010/02/11 11:50:08

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません