人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

自作のサイト内全体を検索できる検索BOXの設置スクリプトと設置方法をおしえてください。
このサイトhttp://www.brooklynparlor.co.jp/のようなBOXを設置したいです。
どこにどう書けばいいのか教えてください。

●質問者: louka
●カテゴリ:インターネット ウェブ制作
✍キーワード:BOX サイト スクリプト 検索 自作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● HowManyFiles
●23ポイント ベストアンサー

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

  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>
◎質問者からの返答

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

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

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

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

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


2 ● rachu
●15ポイント

http://www.watch.impress.co.jp/internet/www/article/1999/0913/sp...

http://www.dspt.net/seo/003/006.html

http://www.futomi.com/library/ftsearch/index.html

◎質問者からの返答

ありがとうございます。勉強してみます。


3 ● HowManyFiles
●22ポイント

追加情報ということで。

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

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

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

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

おまけ的な何か

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

◎質問者からの返答

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

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


4 ● HowManyFiles
●30ポイント

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

最初から自前の全文検索システムを導入しようとしてもたぶん挫折してしまうと思うので、最初は 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>

こんな感じですね。

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ