参加のご案内
Join Us -step4-

• ホーム
• インデックス
• 掲示板
• リンク
• このサイトについて
• 参加のご案内

---

step4-2.GENERATORの設置方法

GENERATORとは、建築マップサイト内の登録データを検索するCGIスクリプトです。GENERATORは、どのサイトでも設置することが出来ますので大いに活用してください。GENERATOR.CGIのソースを改変しても構いません。

GENERATORの設置方法ページには、以下のサブコンテンツがあります。

GENERATOR設置のサブコンテンツ

1. query form（クエリーフォーム：キーワードを入力する場所）を設置する方法
2. 検索結果をあなたのページ内に表示させる（インラインフレームの設置）方法
3. query formとiframe要素を連携させる方法
4. GENERATOR FAQ

query formの設置方法

入力したキーワードが建築マップに登録されているものであれば、その検索結果を表示します。query formを設置するには以下のソースをHTML文書に追記してください。

<form action="http://www.mediawars.ne.jp/~m921320/a_map/generator/generator.cgi?quot; method="get">
 <p>
 <input type="text" accesskey="w" tabindex="1" name="word" size="25" value=" ">
 <input type="radio" accesskey="o" tabindex="2" value="or" checked name="searchmethod">OR 
 /<input type="radio" accesskey="a" tabindex="3" value="and" name="searchmethod">AND
 <input type="submit" accesskey="s" tabindex="4" name="search" value="Search"></p>
 </form>

accesskey="アルファベット"やtabindex="数字"は、キーボード操作だけでもカーソルを移動させることが出来る機能です（省略してもGENEは動きます）。ソースをHTML文書に記載すると、以下のようなクエリーフォームを設置したことになります。

検索結果をあなたのページ内に表示させる方法

あたかも画像を貼り付けるかのようにページ内に別ページを貼り付けるインラインフレームという要素を使います。今からこの要素を使ってGENERATORの検索結果をページ内に貼り付ける方法を説明します。iframe要素以外にフレームを使用する方法もあります。
iframe要素は、IE3.0以降かネットスケープ6以降のブラウザに対応します。

設置例

建築マップ内に登録されている安藤忠雄氏の検索結果を表示しています。そのソースは以下のようになります。

<iframe title="GENERATOR" name="GENERATOR" 
src="http://www.mediawars.ne.jp/~m921320/a_map/generator/generator.cgi?
field=Architect&word=ANDO+Tadao&searchmethod=and&style=2"
marginwidth="1" marginheight="1" height="500"width="180"></iframe>

GENERATOR.CGI？以降につけるオプション

http://www.mediawars.ne.jp/~m921320/generator/generator.cgiまでは、いつも書かなくてはならないURL。このあとに&で区切ってオプションをつけてゆきます。

searchmethod=and

searchmethod=or

AND検索かOR検索かを指定します。
今回はAND検索を指定しました。OR検索ならsearchmethod=orです。このオプションを入れないと、OR検索の結果を表示します。このあとで説明するword=***にword=HARA+Hiroshiと書くと、原広司さんの作品群に加えて「Hiroshima」までもが表示してしまいます。ANDとORで出てくる結果は、ずいぶん変わるときがあります。

検索する列を指定します。field=Country field=Location field=LocationJp field=Architectあたりが便利かと思います。特に指定しない場合はfield=**そのものを削除しても構いません。ここでフィールドを指定するとword=**に書いたキーワードに対して絞り込んだ検索結果を得ることが出来ます。
例えば、フィールド名を指定しないでword=フランスと指定すると、全DATAから検索するのでフランス国内だけでなくどこかの国の「フランス大使館」までヒットします。
そんなときにはgenerator.cgi?searchmethod=and&fieid=country&word=France と記述すると、確実にフランス国内だけの建物を表示します。

word=***

***に検索したいキーワードを書いておきます。日本語でも構いません。前述したsearchmethod=andとfield=**を記述しなくとも結果は表示します。一番手っ取り早い方法は、クエリーフォームで検索した結果のURLを貼り付けることです。

style=1

style=2

背景色を指定します。値を1にすると黒色の背景、2にすると白色の背景になります。

iframe要素のオプション

scrolling="no"
scrolling="yes"

スクロールバーの表示の有無を選択します。
必要に応じてスクロールバーが表示されるようにする場合は、このオプションごと削除します。

marginwidth="1" marginheight="1"

外枠から表示するまでの余白（マージン）を指定します。

width="***" height="***"

挿入するiframe要素の大きさを指定します。横×縦＝width×height。単位は書きませんがピクセル単位です。GENERATORの検索結果は横幅200ピクセルあればじゅうぶんです。ブラウザのウィンドウサイズに収まれば良いのですから、縦幅500ピクセルあればじゅうぶんです。
width="200" height="500"と記述すれば200×500ピクセルのインラインフレームを挿入することになります。

iframe要素が表示できないブラウザへの対応

iframe要素に対応してないブラウザでは、フレームページを表示するべき部分が白紙になります。そんな場合を考慮して代替テキストを表示させます。その記述例を紹介します。

<a href="http://www.mediawars.ne.jp/~m921320/a_map/generator/generator.cgi
searchmethod=and&field=architect&word=ANDO+Tadao&style=2">GENERATORで関連ページを表示します。</a>

searchmethod=and&field=architect&word=ANDO+Tadao&style=2部分は、その都度変更します。

設置例　その1

沖縄県だけを表示させた例

<iframe title="GENERATOR" name="GENERATOR" src="http://www.mediawars.ne.jp/~m921320/a_map/generator/generator.cgi
searchmethod=and
&field=location&word=okinawa
&style=2" marginwidth="1" marginheight="1" height="500" width="200" scrolling="no">
<a href="http://www.mediawars.ne.jp/~m921320/a_map/generator/generator.cgi
searchmethod=and&field=location&word=okinawa&style=2">GENERATORで関連ページを表示します。</a>
</iframe>

設置例　その2

東京都だけを表示させた例

<iframe title="GENERATOR" name="GENERATOR" src="http://www.mediawars.ne.jp/~m921320/a_map/generator/generator.cgi
searchmethod=and
&word=tokyo
&style=1" height="500" width="400" scrolling="yes" marginwidth="1" marginheight="1">
<a href="http://www.mediawars.ne.jp/~m921320/a_map/generator/generator.cgi
searchmethod=and&field=location&word=tokyo&style=1">GENERATORで関連ページを表示します。</a>
</iframe>

query formとiframe要素を連携させる。

GENERATOR検索をするクエリーフォームと検索結果を表示するインラインフレームを連携させて、ページを切り替えることなく検索ををすることができます。

1. インラインフレームの名前を確認します。
   この左に表示されているインラインフレーム名はname="generator"としました。
2. 次にクエリーフォームでターゲット指定をします。target="generator"です。

検索結果を表示するページが、フレームに移動するようにターゲット指定すれば連携します。これで、このページ内にあるクエリーフォームでの検索結果は、そのすぐ下のインラインフレームへ表示するように設定できました。

ためしに、以下のクエリーフォームで何か検索してみてください。検索結果がiframe要素内に表示されたら正しく動作したことになります。

GENERATOR FAQ

ソースをコピーすると変になります。

GENERATORの設置を説明するために、通常Webページ上では表示させないHTML文書をpre要素で表示させています。

ソース

Web作成ソフトをご利用のかたは、公開したソースをコピーしてHTML文書に貼り付けると、実際にコピーしたい文字列と異なる表示をすることがあります。その表示は以下のようになったことでしょう。

<iframe
title="GENERATOR" name="GENERATOR"
src="http://www.mediawars.ne.jp/~m921320/a_map/generator/generator.cgi
searchmethod=and
&field=architect
&word=ANDO+Tadao
&style=2" marginwidth="1" marginheight="1"
height="500" width="180">
<a href="http://www.mediawars.ne.jp/~m921320/a_map/generator/generator.cgi
searchmethod=and
&field=architect
&word=ANDO+Tadao
&style=2"> GENERATORで関連ページを表示します。</a>
</iframe>

そんなときには一旦「メモ帳」などのテキストエディタにて貼り付けてから、それをもう一度コピーしてWeb作成ソフトのHTML文書内に貼り付けてください。HTML文書を最初からテキストエディタで編集しているかたは、このような問題は発生しませんが実態参照には注意してください。
ソースはWebページでの表示の都合上、強制改行している箇所がありますが、改行せずに続けて書いても構いません。

実態参照って何？。

URLとしては使える文字でも、WWWブラウザ上では使ってはいけない場合があります。

例えばWebページ上で「<hr>は水平線です」と書きたい場合に、HTML文書では「<hr>は水平線です」と書かないと、本当に水平線を表示してしまいます。
今、使用した<や>やGENERATORで使用する&などは、実態参照といいます。ページ上で使えない文字も実態参照に書き換えておけば<や> &も問題なく表示させることが出来ます。
GENERATORで「安藤忠雄」を検索した結果のURLは

http://www.mediawars.ne.jp/~m921320/a_map/generator/generator.cgisearchmethod=and
&field=architect
&word=ANDO+Tadao
&style=2

となりますが、そのことをWebページ上で伝えるための記述や、実際にインラインフレームで表示させるために書き込むソースには&を&と書き換えておかないと誤作動を起こす可能性があります。今のところ、これが原因で誤作動を起こしたという報告は聞いておりませんが、気になるかたはソース内で&と表記する部分を&に書き換えてください。

「参加のご案内」のサブコンテンツ

1. はじめに
2. Webチュートリアル
1. WEBページの概論
2. WEBサーバ領域の確認
3. FrontPage Expressの使い方
4. HTMLの読み方
5. FTPソフトの準備と表示確認
3. 参加に向けて
1. 参加にあたってのお願い
2. テンプレートのダウンロード
3. 【重要】ページ作成のガイドライン
4. 参加申し込みフォーム
　　
4. より使いやすいページ作りのために
1. ユーザーを選ばないページ作り
2. GENERATORの設置方法
3. 「むぎなび」の設置方法

• Web関係の用語集
• よくある質問と回答：FAQ
• メンバーサポート