その2
index.php の解説
まずはヘッダ部分。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>インタラクティヴ・プラザ βver. Presented by SirMiles</title> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript" src="plaza.js"></script> </head> <body>
とりあえず、「XHTML 1.0 Transitional」準拠とし、メタ情報に、文字セットがUTF-8であることを明言しておきます。なお、HTMLを一通り作成したら、LINTサイトなどを使用し、Validかどうかはくらいは確認するようにしましょう。
scriptタグには、後ほど登場する「ajax.js」と「plaza.js」を外部ソースとして指定しておきます。
続いてコンテンツ部分の冒頭。
<h1 id="top">Ajaxを利用して、Amazon・楽天・ビッダーズ・ストアミックスから、インタラクティヴに商品を検索します。</h1> <div id="msg" style="font-weight : bold; background-color : #CCFFFF; border : solid 1px #00CCCC; height : 1.5em;"></div>
「id="top"」となっているdivタグは、「このページのトップへ」のリンク先として使用します。
<a href="#top">このページのトップへ</a>
のように使います。
「id="msg"」となっているdivタグは、「検索中…」などのメッセージ、あるいはエラーメッセージを流すのに使います。
続いてフォーム部分。選択項目等は長いので途中を省略します。
<form id="searchbox" action="index.php" method="get" target="_top" accept-charset="utf-8">
<p>検索ワード：<input id="Keywords" name="Keywords" type="text" size="50" value="" /><input id="submitbutton" type="submit" value="検索" /></p>
<script type="text/javascript">
<！--
if(objValid()) {
document.getElementById("submitbutton").disabled = true;
}
else {
document.write('<p><strong>インタラクティヴ検索はご利用になれません。検索ボタンをご利用ください。</strong></p>');
}
//-->
</script>
<noscript>
<p><strong>インタラクティヴ検索はご利用になれません。検索ボタンをご利用ください。</strong></p>
</noscript>
<p><input type="radio" name="Sort" value="Bestselling" id="SortBestselling" checked="checked" /><label for="SortBestselling">指定なし</label>
....(省略)....
<input type="radio" name="Sort" value="HighPrice" id="SortHighPrice" /><label for="SortHighPrice">高い順</label></p>
<p class="indent">※ アマゾンの場合、カテゴリー指定がないと、新着順や価格順が無効になります。</p>
<p class="indent">※ ストアミックスの場合、カテゴリーや並び順はすべて無効になります。</p>
<hr/>
<table summary="CATEGORY" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<p><input id="Amazon" name="Amazon" type="checkbox" checked="checked" value="true"/>アマゾン：</p>
</td>
<td>
<p>
<select id="SearchIndex" name="SearchIndex" style="width : 20em;">
<option value="Blended" selected="selected">カテゴリー指定なし</option>
....(省略)....
<option value="Toys" >トイ</option>
</select>
</p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p><input id="Rakuten" name="Rakuten" type="checkbox" checked="checked" value="true"/>楽天：</p>
</td>
<td>
<p>
<select id="Genre" name="Genre" style="width : 20em;">
<option value="" selected="selected">カテゴリー指定なし</option>
<option value="100371" >ファッション</option>
....(省略)....
<option value="101438" >サービス</option>
</select>
</p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p><input id="Bidders" name="Bidders" type="checkbox" checked="checked" value="true"/>ビッダーズ：</p>
</td>
<td>
<p>
<select id="Categ" name="Categ" style="width : 20em;">
<option value="" selected="selected">カテゴリー指定なし</option>
....(省略)....
<option value="11" >ビジネス・事務・店舗用品・文房具</option>
</select>
</p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p><input id="Storemix" name="Storemix" type="checkbox" checked="checked" value="true"/>ストアミックス：</p>
</td>
<td>
<p>
<select id="SCateg" name="SCateg" style="width : 20em;" disabled="disabled">
<option value="" selected="selected">カテゴリー指定なし</option>
</select>
</p>
</td>
</tr>
</tbody>
</table>
</form> AJAXを使って動的にページを変化させるのに、何故送信フォームが作られているのか。それは、AJAXに対応していない(この言い方には語弊がありますが、平易な言い方として使います)ブラウザへの対策です。
AJAXが使えないブラウザのユーザは、検索ボタンを使うことにより、昔ながらのリクエスト＆レスポンスでこのページを使用することが出来ます。ただし、index.phpに、このリクエストを受け取って結果ページを返す機能を付加しなければなりません。当面はそれを省略します。
各項目には、サーバー側がGETリクエストにおける各パラメータの名前識別をするためのname属性と、JavaScriptからグリグリ内容をいじるためのid属性を、必ず入れておきます。つまり、昔ながらのリクエスト＆レスポンスをサーバーが処理する場合はname属性が、AJAX的に処理する場合はid属性が重要になるのです。
ちなみに、「selected="selected"」や「checked="checked"」という記述が見られますが、XHTMLでは、属性値を単独で書くことを許可していません。その為「属性="属性値"」の形式を遵守すべく、このような記述にしてあります。
ここでの注目箇所は、
<script type="text/javascript">
<！--
if(objValid()) {
document.getElementById("submitbutton").disabled = true;
}
else {
document.write('<p><strong>インタラクティヴ検索はご利用になれません。検索ボタンをご利用ください。</strong></p>');
}
//-->
</script>
<noscript>
<p><strong>インタラクティヴ検索はご利用になれません。検索ボタンをご利用ください。</strong></p>
</noscript>の部分でしょう。
「objValid()」ファンクションは、「ajax.js」内に定義されており、AJAXが使えるかどうかの判定を行います。objValid()がtrueを返したならば、AJAXに対応しているということで、検索ボタンをつぶしておきます。これは、不用意にEnterキーを押下されてしまうのを防止するためです。一方、objValid()がfalseを返したならば、AJAXに対応していないということで、その旨を伝える文字列を書き込んでおきます。
また、noscriptタグに、JavaScriptが使用できないブラウザ対策を講じて起きます。
最後にコンテンツ後半。
<hr /> <div id="amazonbookmarks"></div> <div id="rakutenbookmarks"></div> <div id="biddersbookmarks"></div> <div id="storemixbookmarks"></div> <div id="amazoninfo"></div> <div id="amazonresults"></div> <div id="amazonerror"></div> <div id="rakuteninfo"></div> <div id="rakutenresults"></div> <div id="rakutenerror"></div> <div id="biddersinfo"></div> <div id="biddersresults"></div> <div id="bidderserror"></div> <div id="storemixinfo"></div> <div id="storemixresults"></div> <div id="storemixerror"></div> </body> </html>
divタグの嵐です。
これらが何のためにあるかと言うと、JavaScriptからそれぞれのdivタグ内に、結果などを書き込むためです。
idが「〜bookmarks」となっているものには、「Amazonの検索結果へ」などが書き込まれます。ここに書き込まれるリンク(aタグ)には、idが「〜info」になっているdivタグへのリンクが張られます。例えば、「Amazonの検索結果へ」というリンクをクリックすると、id="amazoninfo"へとページ内ジャンプをするわけです。
idが「〜info」となっているものには、「Amazonの検索結果 100 件中 10 件」などが書き込まれます。検索結果が多い場合、すべての商品が網羅できるように各種ショッピングモールのWebサービスにアクセスし続けると、大変な時間を要するため、当ページでは各Webサービスに対し1〜2回のアクセスに限定します。
idが「〜results」となっているものには、商品の検索結果が羅列されます。サムネイル、商品名、価格などが一覧表示される場所です。
idが「〜error」となっているものには、エラーメッセージが書き込まれます。それぞれのショッピングモールにアクセスした結果、エラーが発生した場合に使用されます。
ちなみに、XHTMLの場合、hrタグのように開始と終了がないエレメントは、スラッシュをつけて自己完結させなければなりません。
