Another HTML-lintで100点を狙う のバックアップ(No.8)

Another HTML-lintについて

　Another HTML-lintはHTML(XHTML)の文法チェックを行うソフトウェアである。(Wikipediaより)
　スミスというアメリカ人が「おいらは、だよ、スミス」といったとき、(文法的におかしいな)と思うものの、あ、この人は「おいらはスミスだよ」と自己紹介しているんだなと脳内補完して笑顔で握手できるだろう。世の中にあるウェブサイトのHTMLも文法的に間違って書かれているケースが多いものの、ブラウザが「多分こういう意図なんだろうな」と補完して表示してくれるので破綻しない。
　だが、文法的に正しいことに越したことはないので、Another HTML-lintを使ってチェックするわけである。URLかソースを入力するとAnother HTML-lintが設定した独自の点数が表示される。0点以下、マイナス数百点ということもある。

　正確な点数は忘れたが、XOOPSはデフォルトのテーマでは100点にならない。なので100点を取るためにはソースを書き換える必要がある。ほとんどのエラーはマイナス点とともに書かれる解説を読めば直していけるのだが、一部、これはどういうことをいっているんだろう、どうすればいいんだろうという部分があるので簡単に解説していきたい。XOOPSのHTMLは「XHTML1.0 Transitional」という文書型で書かれているが、せっかくなのでより厳格な「XHTML1.0 Strict」での100点を狙っていこう。

　ちなみにAnother HTML-lintで100点を取ったとしても、それで完璧かというとそうではない。いま、大晦日なのでいろいろ省略するが、スミスさんが「おいらはスミスだよ」と文法的に正しくいえたとしても、いった相手がスミスさんが勤める会社の日本人社長だったらそれは違うよね、という話になるということだ。
　ただ、Another HTML-lintで100点を狙うというのはHTMLをできるだけ正しく書こうというきっかけになるので、最初はあまり難しく考えずに取り組んでみるのもいいと思う。

「XHTML1.0 では XML宣言をすることが強く求められています。」の修正

　ページの一番上に、

<?xml version="1.0" encoding="任意の文字コード名"?>

　を書けば解決するのだが、Internet Explorer6の有名なバグで表示が崩れるためにそのまま書くことはできない。解決方法は三つあって一つ目はサイト全体の文字コードをUTF-8にすること。そうすればXML宣言の省略が可能になる。二つ目はInternet Explorer6のバグが出ないようなスタイルシートを書くこと。三つ目はInternet Explorer6だけXML宣言を表示しないようなコードをtheme.htmlに埋め込むこと。うちの本家では文字コードをUTF-8にした上で三番目の方法を採用してXML宣言の表示も行っている。
　theme.htmlの一番上に、

<{php}>
$ua = $_SERVER['HTTP_USER_AGENT'];
if (ereg("MSIE 6.",$ua) > 0) {
echo '';
} else {
echo '<?xml version="1.0" encoding="任意の文字コード名"?>'."\n";
} 
<{/php}>

　を挿入すればよい。

参考サイト

　ブラウザによってCSSの解釈（挙動）が違う原因と対策
　ADP: IE6のwidth解釈バグ対処法

「<script>～</script> 内にコメントを書くと、本当にコメントとして扱われます。」の修正

　スクリプトを直接貼りつけるとこのエラーが出てしまうのでファイルにしてリンクを張る形にする。

　例

<script type="text/javascript">
<!--
printDate();
// -->
</script>

　とHTMLに書かれていたら、これを、

printDate();

　とだけ書いたJavaScriptファイル(仮に名前はhoge.js)にし、includeフォルダなどにアップロードして、

<script type="text/javascript" src="<{$xoops_url}>/include/hoge.js"></script>

　とリンクを張る。
　XOOPSのデフォルトテーマではxoops.js表示部分がこのエラーに引っかかるので、

<script type="text/javascript">
<!--
<{$xoops_js}>
// -->
</script>

　を、

<script type="text/javascript" src="<{$xoops_url}>/include/xoops.js"></script>

　に置き換える。

参考サイト

　第 8 章 テーマの怪変 - XOOPS Cube 怪変 覚え書き

table、tdなどに関するエラーの修正

　summaryがないとかスタイルシートを使えといったエラーが出るが、だからといってsummaryを付けたりスタイルシートを使っても根本的な解決にはならない。その部分が表でないのなら<div>などに置き換え、改めてスタイルシートを書くべきだろう。

「<input> を *行目の <form>～</form> 内に書くことはできません。」の修正

　<form>の直下に<input>を書くことはできないということなので、<input>を<p></p>で括り、<form><p><input>という形にする。

　例

<form action="<{$xoops_url}>/modules/search/index.php" method="get">
  <input type="text" name="query" size="20" class="search" value="" />
  <input type="hidden" name="action" value="results" />
  <input type="hidden" name="showcontext" value="1" />
  <input type="submit" value="検索" class="submit" />
</form>

↓

<form action="<{$xoops_url}>/modules/search/index.php" method="get">
<p>
  <input type="text" name="query" size="20" class="search" value="" />
  <input type="hidden" name="action" value="results" />
  <input type="hidden" name="showcontext" value="1" />
  <input type="submit" value="検索" class="submit" />
</p>
</form>

「<input type="～"> には ** 属性を指定するようにしましょう。」の修正

　ログインブロックと検索ブロックを表示するとこのエラーが出る。それぞれの<input>にtabindex属性とaccesskey属性を書けば解決だが、該当するテンプレートには直接書き込めない……ような気がする。もしかしたら書き込めるのかもしれないが方法がわからない。なので、該当部分をHTML化したものに書き換えてしまおう。

　user_block_login.htmlを以下のように修正。

     <{$smarty.const._MB_USER_USERNAME}><br />
     <{xoops_input type=text name=uname size=12 value=$block.unamevalue maxlength=25 id="`$smarty.const.XOOPS_INPUT_DEFID_PREFIX`block_uname"}><br />
     <{$smarty.const._MB_USER_PASSWORD}><br />
     <{xoops_input type=password name=pass size=12 maxlength=32 id="`$smarty.const.XOOPS_INPUT_DEFID_PREFIX`block_pass"}><br />
<!--<label><{xoops_input type=checkbox name=rememberme value=On class=formButton}><{$smarty.const._MB_USER_REMEMBERME}></label><br />-->
     <input type="hidden" name="xoops_redirect" value="<{$xoops_requesturi}>" />
     <{xoops_input type=hidden name=op value=login id="`$smarty.const.XOOPS_INPUT_DEFID_PREFIX`block_op"}>
     <{xoops_input type=submit name=submit value=$smarty.const._MB_USER_LOGIN id="`$smarty.const.XOOPS_INPUT_DEFID_PREFIX`block_submit"}><br />

↓

     <{$smarty.const._MB_USER_USERNAME}><br />
　   <input name="uname" id="legacy_xoopsform_uname" type="text" size="12" maxlength="25" value="" tabindex="任意の数字" accesskey="任意のアルファベット" /><br />
     <{$smarty.const._MB_USER_PASSWORD}><br />
　   <input name="pass" id="legacy_xoopsform_pass" type="password" size="12" maxlength="32" tabindex="任意の数字" accesskey="任意のアルファベット" />
<!--<label><{xoops_input type=checkbox name=rememberme value=On class=formButton}><{$smarty.const._MB_USER_REMEMBERME}></label><br />-->
     <input type="hidden" name="xoops_redirect" value="<{$xoops_requesturi}>" />
　   <{xoops_input type=hidden name=op value=login}>
　   <input name="submit" id="legacy_xoopsform_submit_login" type="submit" value="ログイン" tabindex="任意の数字" accesskey="任意のアルファベット" /><br />

　 legacy_block_search.htmlを以下のように修正。

   <{xoops_input type=text name=query size=14 }>
   <{xoops_input type=hidden name=andor value=AND}>
   <{xoops_input type=hidden name=action value=results }><br />
   <{xoops_input type=submit name=submit value=$smarty.const._MB_LEGACY_SEARCH }>

↓

   <input name="query" id="legacy_xoopsform_query" type="text" size="20" value="" tabindex="任意の数字" accesskey="任意のアルファベット" />
   <{xoops_input type=hidden name=andor value=AND}>
   <{xoops_input type=hidden name=action value=results }><br />
   <input name="submit" id="legacy_xoopsform_submit" type="submit" value="検索" tabindex="任意の数字" accesskey="任意のアルファベット" />

　なお、tabindexの数字は上から順番に振っていけばいいのだが、accesskeyに入れるアルファベットの選択は難しい。なぜならブラウザのショートカットキーとかぶる可能性があるからだ。下にある参考サイトを読んでうまく割り振ろう。

参考サイト

　フォームにaccesskeyを設定しようと思ったが... | ホームページ作成、制作 | 青森県八戸市 ホームページ制作・作成 studio md

[PR]