padma colors

« 前のエントリー　・　 Home　・　次のエントリー »

アマゾンのサーチボックスをプルダウンメニュー付のに変更したり他

| 2004年04月30日09:53 | 編集

<link>

padma colorsではアマゾンのサーチボックスを設けておるのですが、このサーチボックスって２種類あります。　勿論どちらを選んでも構わないのですけれど、アマゾンで用意してくれるタグっていうのがxhtml上だと文法的にイカンらしいのです。

という訳で、このプルダウンメニュー付きのサーチボックスを取り付けて、併せてAnother HTML-lint gatewayさんで文法チェックとかしてみますです。　あ、これは自己責任でやってます。　その過程と結果ですので、流用するんであれば自己責任でどうぞ。

先ず、アマゾンで用意してくれるタグっていうのが

<FORM METHOD="get" ACTION="http://www.amazon.co.jp/exec/obidos/external-search">
<TABLE BORDER="0" CELLPADDING="1" cellspacing="0" BGCOLOR="#000000"><TR><TD>
<TABLE BORDER="0" CELLPADDING="2" cellspacing="0" align="center" BGCOLOR="#FFFFFF">
<TR BORDER="0">
<TD BGCOLOR="#FFFFFF" align="RIGHT" valign="middle"><font face="osaka,MS Pゴシック,verdana,arial,helvetica" size="-2"><B>サーチ:</B></font></TD>
<TD BGCOLOR="#FFFFFF" align="left" valign="middle"><font face="verdana,arial,helvetica" size="-2">
<SELECT NAME="mode">
<OPTION VALUE="blended">すべての商品
<OPTION VALUE="books-jp">和書
<OPTION VALUE="books-us">洋書
<OPTION VALUE="electronics-jp">エレクトロニクス
<OPTION VALUE="kitchen-jp">ホーム&キッチン
<OPTION VALUE="music-jp">音楽
<OPTION VALUE="dvd-jp">DVD
<OPTION VALUE="video-jp">ビデオ
<OPTION VALUE="software-jp">ソフトウェア
<OPTION VALUE="videogames-jp">TVゲーム
</SELECT>
</font></TD></TR>
<TR BORDER="0">
<TD BGCOLOR="#FFFFFF" align="RIGHT" valign="middle"> <font face="osaka,MS Pゴシック,verdana,arial,helvetica" size="-2"><B>キーワード:</B></font></TD>
<TD BGCOLOR="#FFFFFF" align="left" valign="middle"><font face="verdana,arial,helvetica" size="-2">
<INPUT TYPE="text" NAME="keyword" SIZE="10" VALUE="">
<INPUT TYPE="hidden" NAME="tag" VALUE="desktoppedotn-22">
<INPUT TYPE="hidden" NAME="encoding-string-jp" VALUE="日本語">
<INPUT TYPE="image" BORDER="0" VALUE="Go" NAME="Go" src="go-button.gif?tag=desktoppedotn-22" ALIGN=absmiddle>
</font></TD>
</TR>
<TR>
<TD COLSPAN="2" VALIGN="top" ALIGN="center" BGCOLOR="#000000">
<A HREF="http://www.amazon.co.jp/exec/obidos/redirect-home?tag=desktoppedotn-22"><IMG SRC="jp_searchbox.gif" BORDER="0" HSPACE="0" VSPACE="0" ALT="Amazon.co.jpアソシエイト"></a>
</TD>
</TR>
</TABLE></TD></TR></TABLE>
</FORM>

こんな感じで、タグが大文字だったり小文字だったり、大文字で開始して小文字で閉じたり、一寸意図が掴み辛いので全部小文字で統一してしまいます。　それと、画像はダウンロードして自分とこからリンクします。　ここまでで文法チェックをしてもらうと、結果は（ちなみに変更前の採点は97点でありました）

1: line 98: <table> には summary 属性を指定するようにしましょう。 → 解説 186
1: line 99: <table> には summary 属性を指定するようにしましょう。 → 解説 186
6: line 100: <tr> に不明な属性 `border` が指定されています。 → 解説 79
0: line 101: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
0: line 101: (<b> は物理的フォントタグです。論理的タグを使うようにしましょう。例えば <strong>。) → 解説 198
0: line 102: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
0: line 103: (<select> には tabindex 属性を指定するようにしましょう。) → 解説 176
7: line 105: <option> を 104行目の <option>〜</option> 内に書くことはできません。</option> を補ってください。 → 解説 43
7: line 105: 104行目の <option> に対応する終了タグ </option> が見つかりません。 → 解説 72
7: line 106: <option> を 105行目の <option>〜</option> 内に書くことはできません。</option> を補ってください。 → 解説 43
7: line 106: 105行目の <option> に対応する終了タグ </option> が見つかりません。 → 解説 72
7: line 107: <option> を 106行目の <option>〜</option> 内に書くことはできません。</option> を補ってください。 → 解説 43
7: line 107: 106行目の <option> に対応する終了タグ </option> が見つかりません。 → 解説 72
7: line 108: <option> を 107行目の <option>〜</option> 内に書くことはできません。</option> を補ってください。 → 解説 43
7: line 108: 107行目の <option> に対応する終了タグ </option> が見つかりません。 → 解説 72
5: line 108: メタ文字 `&` は `&` と書かなければなりません。 → 解説 117
7: line 109: <option> を 108行目の <option>〜</option> 内に書くことはできません。</option> を補ってください。 → 解説 43
7: line 109: 108行目の <option> に対応する終了タグ </option> が見つかりません。 → 解説 72
7: line 110: <option> を 109行目の <option>〜</option> 内に書くことはできません。</option> を補ってください。 → 解説 43
7: line 110: 109行目の <option> に対応する終了タグ </option> が見つかりません。 → 解説 72
7: line 111: <option> を 110行目の <option>〜</option> 内に書くことはできません。</option> を補ってください。 → 解説 43
7: line 111: 110行目の <option> に対応する終了タグ </option> が見つかりません。 → 解説 72
7: line 112: <option> を 111行目の <option>〜</option> 内に書くことはできません。</option> を補ってください。 → 解説 43
7: line 112: 111行目の <option> に対応する終了タグ </option> が見つかりません。 → 解説 72
7: line 113: <option> を 112行目の <option>〜</option> 内に書くことはできません。</option> を補ってください。 → 解説 43
7: line 113: 112行目の <option> に対応する終了タグ </option> が見つかりません。 → 解説 72
7: line 114: </select> は 113行目の <option> と重なり合っているようです。 → 解説 70
2: line 114: </select> の前に </option> が省略されているとみなします。 → 解説 64
6: line 116: <tr> に不明な属性 `border` が指定されています。 → 解説 79
5: line 117: <td> の align の属性値 `RIGHT` は `right` でなければなりません。 → 解説 106
0: line 117: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
0: line 117: (<b> は物理的フォントタグです。論理的タグを使うようにしましょう。例えば <strong>。) → 解説 198
0: line 118: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
6: line 119: 空要素タグ <input type="text"> の要素には空白さえも含めることはできません。 → 解説 40
0: line 119: (<input type="text"> には tabindex 属性を指定するようにしましょう。) → 解説 176
4: line 119: 空要素タグ <input> は <input /> として閉じなければなりません。 → 解説 38
0: line 119: (<input> には accesskey 属性を指定するようにしましょう。) → 解説 177
7: line 120: 119行目の <input type="text"> に対応する終了タグ </input type="text"> が見つかりません。 → 解説 72
6: line 120: 空要素タグ <input type="hidden"> の要素には空白さえも含めることはできません。 → 解説 40
4: line 120: 空要素タグ <input> は <input /> として閉じなければなりません。 → 解説 38
7: line 121: 120行目の <input type="hidden"> に対応する終了タグ </input type="hidden"> が見つかりません。 → 解説 72
6: line 121: 空要素タグ <input type="hidden"> の要素には空白さえも含めることはできません。 → 解説 40
4: line 121: 空要素タグ <input> は <input /> として閉じなければなりません。 → 解説 38
7: line 122: 121行目の <input type="hidden"> に対応する終了タグ </input type="hidden"> が見つかりません。 → 解説 72
5: line 122: <input type="image"> に Mozilla 用の属性 `border` が指定されています。 → 解説 80
4: line 122: <input type="image"> の align の属性値 `absmiddle` は引用符で囲まなければなりません。 → 解説 95
6: line 122: <input type="image"> の align の属性値 `absmiddle` は正しくありません。`top`、`middle`、`bottom`、`left` または `right` でなければなりません。 → 解説 102
6: line 122: 空要素タグ <input type="image"> の要素には空白さえも含めることはできません。 → 解説 40
7: line 122: <input type="image"> には alt 属性を指定するようにしましょう。 → 解説 182
0: line 122: (<input type="image"> には tabindex 属性を指定するようにしましょう。) → 解説 176
4: line 122: 空要素タグ <input type="image"> は <input type="image" /> として閉じなければなりません。 → 解説 38
0: line 122: (<input> には accesskey 属性を指定するようにしましょう。) → 解説 177
0: line 127: (<img> には width と height 属性を指定するようにしましょう。) → 解説 183
4: line 127: 空要素タグ <img> は <img /> として閉じなければなりません。 → 解説 38

わははは．．．こんな感じ。　ちなみに採点は53点にまで落ち込みました。

では修正していくです。　先ず

<table> には summary 属性を指定するようにしましょう。

です。　これは素直に追加します。　テーブルは２つなんで「amazon_t1」「amazon_t2」とでもしておきますか。

次、

<tr> に不明な属性 `border` が指定されています。

あ、ホントだ、ってなもんです。　trタグに境界線．．．これ削除しますです。　２箇所ありますね。

次、

<option> を ***行目の <option>〜</option> 内に書くことはできません。</option> を補ってください。
***行目の <option> に対応する終了タグ </option> が見つかりません。

要は「閉じろ」って事です。　「</option>」で閉じます。

<option value="blended">すべての商品</option>
<option value="books-jp">和書</option>
<option value="books-us">洋書</option>
<option value="electronics-jp">エレクトロニクス</option>
<option value="kitchen-jp">ホーム&キッチン</option>
<option value="music-jp">音楽</option>
<option value="dvd-jp">DVD</option>
<option value="video-jp">ビデオ</option>
<option value="software-jp">ソフトウェア</option>
<option value="videogames-jp">TVゲーム</option>

次、

<td> の align の属性値 `RIGHT` は `right` でなければなりません。

私のケアレスミスで、小文字にしてませんでした。　修正します。

次、

空要素タグ <input type="text"> の要素には空白さえも含めることはできません。

そんくらい、いいじゃねーか！って思うんですけど（笑）、ダメなのなら従いますぅ。

サイズが10なのに、こんなに長々と書いてしまいましたが、後で補正しますです。

次、

空要素タグ <input> は <input /> として閉じなければなりません。

こんな感じのが数行に渡って指摘されてますが、　要は半角スペース＋／で閉じなさいってこった。

更には

<input type="image"> に Mozilla 用の属性 `border` が指定されています。

これは削除します。

<input type="image"> の align の属性値 `absmiddle` は引用符で囲まなければなりません。
<input type="image"> の align の属性値 `absmiddle` は正しくありません。`top`、`middle`、`bottom`、`left` または `right` でなければなりません。

Goボタンの画像は絶対中心でなくても構わないので、引用符を付けて中心に配置します。　ここまでが以下の通りになります。

なんかワケわかんなくなってきましたので、ここでいったんテンプレにペーストして再構築し、文法チェックしてもらいます。

0: line 101: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
0: line 101: (<b> は物理的フォントタグです。論理的タグを使うようにしましょう。例えば <strong>。) → 解説 198
0: line 102: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
0: line 103: (<select> には tabindex 属性を指定するようにしましょう。) → 解説 176
5: line 108: メタ文字 `&` は `&` と書かなければなりません。 → 解説 117
0: line 117: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
0: line 117: (<b> は物理的フォントタグです。論理的タグを使うようにしましょう。例えば <strong>。) → 解説 198
0: line 118: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
0: line 119: (<input type="text"> には tabindex 属性を指定するようにしましょう。) → 解説 176
0: line 119: (<input> には accesskey 属性を指定するようにしましょう。) → 解説 177
7: line 122: <input type="image"> には alt 属性を指定するようにしましょう。 → 解説 182
0: line 122: (<input type="image"> には tabindex 属性を指定するようにしましょう。) → 解説 176
0: line 122: (<input> には accesskey 属性を指定するようにしましょう。) → 解説 177
0: line 127: (<img> には width と height 属性を指定するようにしましょう。) → 解説 183
4: line 127: 空要素タグ <img> は <img /> として閉じなければなりません。 → 解説 38

減った減った！（笑）　続けて修正を施しますです。

<b> は物理的フォントタグです。論理的タグを使うようにしましょう。例えば <strong>。

これは素直に従います。　２箇所ありますのでそれぞれ変更。

次、

<select> には tabindex 属性を指定するようにしましょう。
<input type="text"> には tabindex 属性を指定するようにしましょう。
<input type="image"> には tabindex 属性を指定するようにしましょう。

これも素直に従います。　tabindex="n"としてもしておき、nは1.2.3...って感じで。

次、

メタ文字 `&` は `&` と書かなければなりません。

何かと思ったら「ホーム＆キッチン」のトコらしいんですよ。　これは全角の「＆」にして回避しますです。

次、

<input type="image"> には alt 属性を指定するようにしましょう。

素直に追加。

次、

空要素タグ <img> は <img /> として閉じなければなりません。

これも素直に修正。

で、文法チェックはこんな採点をしてくれます。

: line 101: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
0: line 102: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
0: line 117: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
0: line 118: (<font> はあまり薦められないタグです。スタイルシートを使いましょう。) → 解説 57
0: line 119: (<input> には accesskey 属性を指定するようにしましょう。) → 解説 177
0: line 122: (<input> には accesskey 属性を指定するようにしましょう。) → 解説 177
0: line 127: (<img> には width と height 属性を指定するようにしましょう。) → 解説 183

減点対象にならないものばかりなので、これで一応完成。　タグはこんな感じになりました。

<form method="get" action="http://www.amazon.co.jp/exec/obidos/external-search">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" summary="amazon_t1"><tr><td>
<table border="0" cellpadding="2" cellspacing="0" align="center" bgcolor="#FFFFFF" summary="amazon_t2">
<tr>
<td bgcolor="#FFFFFF" align="right" valign="middle"><font face="osaka,MS Pゴシック,verdana,arial,helvetica" size="-2"><strong>サーチ:</strong></font></td>
<td bgcolor="#FFFFFF" align="left" valign="middle"><font face="verdana,arial,helvetica" size="-2">
<select name="mode" tabindex="1">
<option value="blended">すべての商品</option>
<option value="books-jp">和書</option>
<option value="books-us">洋書</option>
<option value="electronics-jp">エレクトロニクス</option>
<option value="kitchen-jp">ホーム＆キッチン</option>
<option value="music-jp">音楽</option>
<option value="dvd-jp">DVD</option>
<option value="video-jp">ビデオ</option>
<option value="software-jp">ソフトウェア</option>
<option value="videogames-jp">TVゲーム</option>
</select>
</font></td></tr>
<tr>
<td bgcolor="#FFFFFF" align="right" valign="middle"> <font face="osaka,MS Pゴシック,verdana,arial,helvetica" size="-2"><strong>キーワード:</strong></font></td>
<td bgcolor="#FFFFFF" align="left" valign="middle"><font face="verdana,arial,helvetica" size="-2">
<input type="text" name="keyword" size="10" tabindex="2" value="キーワードをここに記入して下さい" />
<input type="hidden" name="tag" value="desktoppedotn-22" />
<input type="hidden" name="encoding-string-jp" value="日本語" />
<input type="image" value="Go" name="Go" src="http://www.padmacolors.org/pics/go-button.gif?tag=desktoppedotn-22" align="middle" tabindex="3" alt="Go" />
</font></td>
</tr>
<tr>
<td colspan="2" valign="top" align="center" bgcolor="#000000">
<a href="http://www.amazon.co.jp/exec/obidos/redirect-home?tag=desktoppedotn-22"><img src="http://www.padmacolors.org/pics/jp_searchbox.gif" border="0" hspace="0" vspace="0" alt="Amazon.co.jpアソシエイト" /></a>
</td>
</tr>
</table></td></tr></table>
</form>

続きまして、padma colors的に修正。　右テーブルは300px位あるので、これに合わせてリサイズしますです。　先ずは外枠を275pxに。

次に内枠を100%に。

「サーチ」と「キーワード」が右合わせになっているので左に揃えようと思いますが、テーブル作るのも面倒なので「サーチ」の前に全角空白を２つ入れて無理矢理揃えます。　環境によってはズレるかも知れませんけど、無視無視（笑）。

次に例のテキスト入力部分でありますが、10だとあまりに少ないので25にします。

結果はこんな風なレイアウトになり、タグは以下に示す通りですが、Goボタンは何とかせねばならないような、はたまたこれでいいやっていう感じもしたりです。

<form method="get" action="http://www.amazon.co.jp/exec/obidos/external-search">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" summary="amazon_t1" width="275"><tr><td>
<table border="0" cellpadding="2" cellspacing="0" align="center" bgcolor="#FFFFFF" summary="amazon_t2" width="100%">
<tr>
<td bgcolor="#FFFFFF" align="left" valign="middle"><font face="osaka,MS Pゴシック,verdana,arial,helvetica" size="-2"><strong>　　サーチ:</strong></font></td>
<td bgcolor="#FFFFFF" align="left" valign="middle"><font face="verdana,arial,helvetica" size="-2">
<select name="mode" tabindex="1">
<option value="blended">すべての商品</option>
<option value="books-jp">和書</option>
<option value="books-us">洋書</option>
<option value="electronics-jp">エレクトロニクス</option>
<option value="kitchen-jp">ホーム＆キッチン</option>
<option value="music-jp">音楽</option>
<option value="dvd-jp">DVD</option>
<option value="video-jp">ビデオ</option>
<option value="software-jp">ソフトウェア</option>
<option value="videogames-jp">TVゲーム</option>
</select>
</font></td></tr>
<tr>
<td bgcolor="#FFFFFF" align="left" valign="middle"><font face="osaka,MS Pゴシック,verdana,arial,helvetica" size="-2"><strong>キーワード:</strong></font></td>
<td bgcolor="#FFFFFF" align="left" valign="middle"><font face="verdana,arial,helvetica" size="-2">
<input type="text" name="keyword" size="25" tabindex="2" value="キーワードをここに記入して下さい" />
<input type="hidden" name="tag" value="desktoppedotn-22" />
<input type="hidden" name="encoding-string-jp" value="日本語" />
<input type="image" value="Go" name="Go" src="http://www.padmacolors.org/pics/go-button.gif?tag=desktoppedotn-22" align="middle" tabindex="3" alt="Go" />
</font></td>
</tr>
<tr>
<td colspan="2" valign="top" align="center" bgcolor="#000000">
<a href="http://www.amazon.co.jp/exec/obidos/redirect-home?tag=desktoppedotn-22"><img src="http://www.padmacolors.org/pics/jp_searchbox.gif" border="0" hspace="0" vspace="0" alt="Amazon.co.jpアソシエイト" /></a>
</td>
</tr>
</table></td></tr></table>
</form>

Next Entry (韓国の言論自由世界第６８位、北朝鮮は最下位) »

Search

Contact

■Administrator
padmacolors@gmail.com

■Akane Miyashita
akane.padma@gmail.com
イラスト、デザインのお仕事を承ります！

padma colors

アマゾンのサーチボックスをプルダウンメニュー付のに変更したり他

Search

Archives

Contact