wwwsearch検索フォーム導入 - WaniTen｜ワニ天｜わにてん

走るワニ上
WebSiteX5でHP制作！
コンテンツに移動します
【最終更新：2023年6月3日】
【初回公開：2023年6月3日】
Wwwsearch検索フォームの導入

  • WebSite X5 Evoの検索フォーム機能が上手く作動しないので、代わりに導入します。
  • 杜甫々様作成の検索フォームCGI『Wwwsearch』を、利用させていただきます。
  • 杜甫々様、有難うございますお礼アイコン。


『robots.txtを設置する』記事
robots.txtの設置記事リンク
『404ページ作成』記事
404ページ作成記事リンク
『GIFイメージカウンター設置』記事
GIFイメージカウンター設置記事リンク
① Wwwsearchのダウンロード・解凍：


  • 利用規定や注意事項、設置方法などを確認し、問題がない事を確認します。

  • 『wwwsearch-4.0.0.zip』ファイルを、自分のPCの適当な場所に、ダウンロードします。

  • ダウンロードしたファイルを、解凍します。

  • ４つのファイルがある事を確認します。
　　『readme.html』　-　サイトと同じ情報を含んだファイルです。
　　『style.css』　-　検索結果を表示するページ用のスタイルシートです。
　　『wwwsrch.cgi』　-　検索フォーム用スクリプトです。
　　『wwwsrch.log　-　検索日時、IPアドレス、検索ワードのログファイルです。
② 設置先のディレクトリ構造を決める：

　⇒　設置に際し、当サイト用として、一部調整しました。
　⇒　検索対象となるhtmlファイルが全てルートディレクトリの下にある想定です。

　以下の様な構造で、設置することにします：

　　ディレクトリ構造：
　　　[ルートディレクトリ]　　　←　index.html他、全てのhtmlファイルがあるフォルダです。
　　　　 wwwsrch.cgi　　　　←　ルートディレクトリの下に置きます。
　　　　 [kensaku]　　　　　　←　サブディレクトリを作成します。名前は適宜変更して下さい。
　　　　　　style.css　　　　　←　[kensaku]ディレクトリの下に置きます。
　　　　　　wwwsrch.log　　　←　[kensaku]ディレクトリの下に置きます。

　ディレクトリ構造決定の理由（※1）：

　・『stlye.css』『wwwsrch.log』は、
　　誤ってファイルを削除してしまうリスクの回避と、
　　場所を分けてファイルの管理をシンプルにするために、
　　サブディレクトリ（『kensaku』）の下に変更しました。

　・『www.srch.cgi』の設置場所は、
　　不具合回避のため、ルートディレクトリの下としました。

　　　（不具合内容）
　　　　a. 『www.srch.cgi』を、サブディレクトリ（『kensaku』など）の下に設置し、
　　　　　 　且つ、
　　　　b. 『www.srch.cgi』の設定で、『ファイル名の表示』を行う設定とした時に、
　　　　　（検索結果のタイトル横に表示されるファイル名は正しいものの）
　　　　　リンク先が、余分なサブディレクトリが追加されたものに成ってしまう。

　　　　　例）
　　　　　　ファイル名：index.html　　→　○
　　　　　　（正しい）リンク先：https://waniten.com/index.html 　　　　　→　○
　　　　　　（不具合）リンク先：https://waniten.com/kensaku/index.html　　→　×

　　※1：『www.srch.cgi』で『ファイル名の表示』を行わない設定であれば、
　　　　　３ファイルを全て『kensaku』ディレクトリに設置する方法でも、問題ありません。
　　※1：『ファイル名の表示』を行い、且つ、『www.srch.cgi』『stlye.css』『wwwsrch.log』の３ファイルを、
　　　　　全て『kensaku』ディレクトリに設置する設定を、色々と試しました。
　　　　　（出来たにはできたのですが）
　　　　　『www.srch.cgi』で、本来開発者様が変更を想定していない部分の変更が必要になったので、
　　　　　望ましくない方法と判断し、今回は、この設置方法を採用しませんでした。
③ テキストエディタで、サイトに貼り付けるHTMLコードの内容を変更する：

　⇒　WebSite X5 Evoでつくるページの『ヘッダー部分』に検索フォーム窓を貼り付けるケースです

　ディレクトリ構造：

　　[ルートディレクトリ]　　←　検索対象の全てのファイル（html）があるフォルダです。
　　　●●●●●.html　　　　　←　【検索対象】検索対象ページのHTMLファイル（複数）
　　　wwwsrch.cgi　　　　　←　実行ファイル
　　　 [kensaku]　　　　　　←　サブディレクトリ
　　　　　style.css　　　　　←　スタイルシート
　　　　　wwwsrch.log　　　←　検索ログファイル

　（原本）

　　<form method="POST" action="wwwsrch.cgi">
　　　<input type="text" name="word">
　　　<button>検索</button>
　　</form>

　　（変更後）

　　<form method="POST" action="wwwsrch.cgi">　　　※1
　　　<input type="text" name="word" size="12" style="background-color: white;">　※2
　　　<button style="font-size:90%">検索</button>　　　　　　　　　　　　　※3
　　</form>

　　※1：サイトの各ページ用htmlと『wwwsrch.cgi』が同じディレクトリにあるので、このままでOKです。
　　　 　例）『wwwsrch.cgi』が『kensaku』の下であれば：　"kensaku/wwwsrch.cgi"
　　※2：検索フォームでの文字サイズと、検索フォームの背景を追加で指定しました。
　　※3：ボタンに表示される文字サイズを追加指定しました。
　　　 　ボタンの文字です。適宜変更して下さい。
④ テキストエディタで、『wwwsrch.cgi』の内容を変更する：

　上の方から順に、必要箇所のみ記載します。

　　#!/usr/local/bin/perl　　←　　CGIが使用するPerl（プログラム）のパスです。
　　⇒　リトルサーバーでは、変更不要です。

　　（原本）
　　@target_dirs = ('/');　　←　　検索対象フォルダ　　
　　（変更後）
　　@target_dirs = ('.');　　←　『wwwsrch.cgi』自身があるフォルダを指定しました。

　　（原本）
　　@exclude_dirs = ('../../lng');　　←　　検索対象からの除外ディレクトリ　　
　　（変更後）
　　@exclude_dirs = ('');　　←　除外無しにしてみました。

　　（原本）
　　@suffix = (".htm", ".html");　　←　　検索対象ファイル　　
　　（変更後）
　　@suffix = (".html");　　←　htmlファイルだけに絞り込みました。

　　（原本）
　　$recursive_flag = 1;　　←　　下位フォルダを回帰検索するか否かの設定　　
　　（変更後）
　　$recursive_flag = 0;　　←　検索対象は全てルートディレクトリに在るので『しない』設定にしました。

　　（原本）
　　$return_url = '../index.html';　　←　　[戻る]ボタンを押したとき移動するリンク先　　
　　（変更後）
　　$return_url = 'index.html';　　←　サイトの各ページ用htmlと『wwwsrch.cgi』は同じディレクトリにあるので。

　　（原本）
　　$logging_file = "wwwsrch.log";　　←　　検索対象からの除外ディレクトリ　　
　　（変更後）
　　$logging_file = "kensaku/wwwsrch.log";　　←　『wwwsrch.log』は、『kensaku』フォルダにあるので

　　（原本）
　　$print_filename = 0;　　←　　検索結果にフォルダ名を表示するか否かの設定　　
　　（変更後）
　　$print_filename = 1;　　←　『する』設定にしました

　　（原本）
　　$page_title = "検索";　　←　　検索用ページが開かれたときの、タイトル　
　　（変更後）
　　$page_title = "WaniTen内を検索";　　←　今いるページが分かりやすいように変更しました

　　（原本）110行位にあります
　　<link rel="stylesheet" href="style.css">　　←　　検索ページで利用するスタイルシートの設定　　
　　（変更後）
　　<link rel="stylesheet" href="kensaku/style.css">　　←　検索ページ用の『style.css』は、『kensaku』フォルダにあるので　　
⑤ テキストエディタで、『style.css』の内容を変更する：

　上の方から順に、必要箇所のみ記載します。

　　（原本）
　　body {
　　　　font-size: 10pt;　　←　　検索ページの本文のフォントのサイズ　　
　　（変更後）
　　body {
　　　　font-size: 13pt;　　←　　大きくしてみました。

　　（原本）
　　a:link, a:visited {
　　color: #136;　　　　　←　　検索されたタイトル等の色　　
　　（変更後）
　　a:link, a:visited {
　　color: royalblue;　　　←　　好みの色の変更しました
　　font-size:110%;　　　←　文字フォントを大きさの指定を追加しました
⑥ WebSite X5 Evoでつくるページのヘッダー部に、HTMLコードを貼り付ける：

　 ⇒ 　どのページからも利用できるように、ヘッダー部に貼り付けます。


　1. HTMLコード（オブジェクト）の追加

　『Step ２：テンプレート』より『ヘッダーとフッターのコンテンツ』をクリックして、
　 『HTMLコードHTMLコードアイコン』（オブジェクト）を適切な位置に追加します。
　（走るワニの下に貼り付けました）

　WaniTenヘッダー画像


　2. HTMLコードの貼り付け

　③で用意した検索フォーム用のHTMLコードを貼り付けます。

　HTMLコードオブジェクトの設定画面


　3. 見栄えの調整

　　『ブレビュー』で繰り返し利用して、検索フォームの位置、文字の大きさ、色等を、
　　レスポンシブル用の全てのビューで確認し、調整します。
⑦ ファイルのアップロードと設定：

　1. WebSite X5 EvoのFTP機能で、サイトデータをアップロード

　　WebSite X5 Evoの『Step 5: エクスポート』で、
　　『インターネットにWebサイトをアップロード』をクリックして、
　　レンタルサーバーに、Webサイトのデータをアップロードします。


　2. FTPソフト（WinSCP等）で、検索フォームCGIの必要ファイルをアップロード

　　『wwwsrch.cgi』『style.css』『wwwsrch.log』の３ファイルを、レンタルサーバーのにアップロードします。

　　※　kensakuフォルダを、予め作成しておいて、フォルダごとサーバーにアップロードするか、
　　　　kensakuフォルダを、サーバー上で作成して、その中に『style.css』『wwwsrch.log』をアップロードします。


　3. パーミッションの設定

　　パーミッションの設定も忘れず行います。
　　（参考：設定値）

　　　　htmlファイル　　　←　　【604】　　サイトの各ページ用HTMLファイル

　　　　wwwsrch.cgi　　　　←　　【700】　検索フォームCGI実行ファイル
　　　　[kensaku] 　　　　　←　　【604】　フォルダ
　　　　　style.css　　　　　←　　【644】　検索ページ用スタイルシート
　　　　　wwwsrch.log　　　←　　【600】　検索ログファイル
『robots.txtを設置する』記事
robots.txtの設置記事リンク
『GIFイメージカウンター設置』記事
GIFイメージカウンター設置記事リンク
『404ページ作成』記事
404ページ作成記事リンク
コンテンツに戻る