作成日:2002年11月10日、更新日:2002年11月12日 作成:鷹の巣

Micrsoft(R)Front Page(R)2000で作成したHTMLファイルから、正しいHTML文法(XHTML 1.0 Strict)に効率的に矯正した方法を紹介します。


HTML文法チェックで100点を取る手抜き方法の一例

私のWebページは、Micrsoft(R)Front Page(R)2000を利用して、HTML文法なんか全く気にせず、ワープロ感覚で作成しておりました。 Front Pageを使用した理由は、ただ単にWORDやExcelのおまけとしてついていたに過ぎません。 Another HTML-lint gatewayで、 HTMLの文法を検査した結果は、マスナス50点以下でした。

このサイトで100点を取ろうと考えたきっかけは、一応、どんなブラウザでも極力見れる様にしようと考えたことと、 視覚障害者の方が使用される音声ブラウザやマウスを使用しないキーボードにもある程度対応しようと考えたからです。 従って、今後もまず最初は、Front Pageを使用してワープロ感覚で作成し、後で合格点がもらえる様にタグを置換しようと考えています。 Another HTML-lint gatewayには、ミラーサイトもあって、ちょっと使用する分には、良いのですが、

  1. CGIの処理が重たい。
  2. 訂正するファイル数が50ファイル以上ある。
  3. また一つのファイルで何度もチェックする必要がある。

ということで、そのまま行うとAnother HTML-lint gatewayの提供サイトに迷惑をお掛けすることになります。 従って、これをローカルのクライアント機にインストールして、気軽にHTMLファイルの文法チェックすることとしました。 使用したOSは、Windows XP Home Editionで、WebサーバーにAN HTTPDを使用し、CGIは、Active Perl(Perl5)をインストールし、 まずローカルのクライアント機で、CGIが動作する環境を作成しました。 次にAnother HTML-lintのフルパッケージをダウンロードし、このWebサーバーのドキュメントルート下のhtmllintフォルダに設置し、 環境設定ファイルだけを変更します。 また、UTF-8は、使用しないので、既にCGIで使用していたjcode.plをhtmllintフォルダ内にコピーして使用しました。 UTF-8を使用する方の為にWindows用Jcode.pmのインストール方法も紹介しています。

ご存知だと思いますが、スタイルシートを使用しないと普通は、100点満点になりません。 又、<b>等のタグは、<strong>の様に変更しないといけませんので、 楽をするために「複数のHTML&テキストファイル内を一括置換TextSS」というフリーソフトを使用することにしました。 又、HTMLファイルの訂正を行うのに行番号表示があり、編集ファイルがタグで切り替えられると便利だと考え、 「HTML Project2」というフリーソフトを使用することにしました。

当初は、HTML 4.01 Strictにしましたが、より最新のXHTML 1.0 Strictに対応させました。 現状のブラウザでは、XHTML 1.1には、しない方が良いと考えます。 XHTML 1.0 Strictは、既存のブラウザも考慮して、属性「name」と属性「lang」等を併記する形になっています。 (「name」属性等の併記したものを消去すれば、XHTML 1.1になります。) HTMLの仕様の詳細に関しては、The Web KANZAKIさんのごく簡単なHTMLの説明XHTMLの書き方と留意点初めてのホームページ講座さんのHTML4.01 ReferenceXHTML1.0要約をご覧願います。

以下の説明は、上記の複数ファイルでのHTML文法の訂正を行った手順の紹介ですから、2~3ファイルの訂正を行われるのでしたら、 Web上で、Another HTML-lint gatewayサービスを受けて下さい。

HTML文法校正に使用したフリーソフト一覧(OSは、Windows XP Home Edition)
用途 ホームページ名(敬称略) 備考
HTMLタグの一括置換 Yamashita-Y ARENA 夢いっぱいの冒険者さんの複数のHTML&テキストファイル内を一括置換TextSS 非推奨要素のタグの一括変換とHTMLヘッダの一括挿入。
HTMLファイルの文法検査 Another HTML-lintさんのAnother HTML-lintのダウンロートサイト クライアント機にインストールして、気軽に文法検査。WebサーバーとCGIとしてPerlが必要。
同上用Webサーバー AN HTTPD ドキュメートルートになるフォルダとPerlの絶対パスのみ設定。
同上用CGI Active Perl インストールするだけ。
HTMLファイルの編集 例えばKANETOのホームページさんの HTML Project2 主な機能は、HTML4.0対応のスタイル設定機能と行番号表示 StyleNote窓の杜Vectorにも色々ある様です。

インストール方法や操作方法は、省略します。以下は、私が行った手順を述べています。

1.WindowsにAN HTTPDとActive Perl(Perl 5)をインストールし、立ち上げます。

下図の例では、ドキュメントルートが「D:\WWW\public_html」になっています。従って、
D:\WWW\public_html\index.htmlのhtmlファイルがhttp://127.0.0.1/index.htmlで表示されることになります。
Active Perl(Perl 5)をD:\Perlにインストールしますと、perl.exeは、D:\Perl\bin\perl.exeに存在しますので、拡張子のplとcgiの実行フログラムは、下図の例の様になります。
設定するのは、下図の長方形で囲んだ部分(2箇所)だけです。

ANHTTPDのオプション/一般タブの設定画面

2.Another HTML-lintのダウンロートとインストールと環境ファイルの設定を行います。

Another HTML-lintのダウンロートサイトからフルパッケージ(htmllint.zipかhtmllint.lzhかhtmllint.sit.bin)をダウンロードし、解凍します。この頁に、ローカルマシンへのインストールについて参考となるサイトが紹介されていますで、私は、この中のHTML文法チェック等(HTML-lintをWindows(2000)で動かす) (sesoko'p)を参考にしました。

解凍すると、htmllintというフォルダが出来ます。このフォルダを前項のhttpのドキュメントルート下に移動します。 私の場合は、ドキュメントルートがD:\WWW\public_htmlですから、D:\WWW\public_html\htmllintとしました。

私の場合は、UTF-8は、使用しないので、このhtmllintフォルダ内に既にCGIで使用していたjcode.plをhtmllintフォルダ内にコピーして使用しました。 UTF-8を使用する方は、Windows用Jcode.pmのインストール方法をご参照願います。 上記の参考サイト通り、htmllintのフォルダ内の「htmllintenv」というファイル名を「htmllintenv」に変更します。 クライアント機にインストールすることを前提にhtmllintのフォルダ内に「logs」と「tmp」のサブフォルダを作成します。 (htmllintというフォルダがインターネットWebサーバーのドキュメントルート下に設置されている場合は、アクセス権の甘い「tmp」は、ドキュメントルート下に置かないようにするのが常識です。)

以下の囲みの様に環境ファイルの設定を行います。

# Another HTML-lint 環境ファイル
# ***ファイル名は htmllint.env に改名してください***
#  このファイルは htmllint.cgi、tagslist.cgi が読み込みます。
#  htmllint.pm も、このファイルがあれば読み込みますが、なくても動作します。
#  アクセス権をうまく工夫して、他人から見えないようにしてください。<---クライアント機にインストールしましょう。

# CGI 用ディレクトリ (絶対パスかCGI相対パスで指定、なるべく絶対パスにしてください)
$RULEDIR = './';    # 規則ファイルの場所
#$LOGSDIR = './logs/';  # ログファイルの場所 (不要ならコメントアウト)
$TMPDIR  = './tmp/'; # テンポラリファイルの場所<---クライアント機にインストールし、'/tmp/'の前にドットを追加し'./tmp/'とします。
$IMGDIR  = './';    # イメージファイルの場所
$TAGSLIST = '';     # タグ一覧キャッシュ用の場所 (空ならキャッシュしない)
             # 設定するときはアクセス権を適当に与えておくこと

# HTML 用ディレクトリ (CGI が出力する HTML 中で使う)
$HTMLDIR  = './';           # HTMLファイルの場所
$GATEWAYURL = $HTMLDIR.'htmllint.html'; # ゲイトウェイサーヴィス HTML
$EXPLAIN  = $HTMLDIR.'explain.html'; # 解説用 HTML (HTML用)
$CGIROOT  = $HTMLDIR;         # CGIの場所
$IMGROOT  = $HTMLDIR;         # イメージファイルの場所

# インクルードパスの追加
unshift @INC, '.', $RULEDIR;

# デフォルト規則ファイル (Windows/Macでは . から始まるファイルは無効)
$HTMLLINTRC = 'htmllintrc';<---'.htmllintrc'のドットを除去し、'htmllintrc'に変更します。

# HTMLファイル拡張子 (正規表現)
$HTMLEXT = 'html?|[sp]ht(ml?)?';

# index.html (正規表現)
$INDEXHTML = "index\\.($HTMLEXT)";

# 検査除外ドメイン (不要ならコメントアウト)
# IPで指定するときは 192.168.1.64/26 のようにマスク指定ができます
# IP末尾が 0 の場合、例えば 192.168.0.0/16 のとき /16 は不要です
# 名前指定だけのとき、対応するIPが素通りしてしまうことに注意してください
# IPで指定する場合は、適用条件を書くことができます
# 例えば、192.168.1.0/24 にあるページは 192.168.1.0/24 以外から
# チェックさせたくない場合は、192.168.1.0/24!192.168.1.0/24 と書くことができます
# また、192.168.1.0/24 のページを 192.168.1.64/26 から検索させたくない場合は
# 192.168.1.0/24*192.168.1.64/26 と書くことができます
# IP指定は他のドメイン指定の配列にも書くことができます
#@EXCEPTDOMAINS = qw(uso800.ac.jp);

# 検査非除外ドメイン (不要ならコメントアウト)
# @EXCEPTDOMAINSでひっかかっても、ここで指定してあるドメインは非除外となります
#@PERMITDOMAINS = qw(fake.uso800.ac.jp www.uso800.ac.jp);

# LWP や Jcode.pm の使用を制限する (制限したいときコメントを外す)
#$NOUSELWP = 1;
$NOUSEJCODE = 1;<---jcode.plを使用するので、先頭の#を削除しました。Jcode.pmを使用される場合は、コメント行のままとします。

# httpreq.pl/LWP 用 HTML の限界サイズ (KB) (0 は無制限)
$MAXHTMLSIZE = 512;

# httpreq.pl/LWP 用タイムアウト時間 (秒) (既定値 180秒)
#$TIMEOUT = 3*60;

# httpreq.pl/LWP 用プロキシサーバ (不要ならコメントアウト)
#$HTTP_PROXY = 'firewall:8080';

# httpreq.pl/LWP 用ノープロキシドメインリスト (不要ならコメントアウト)
#@HTTP_NOPROXY = qw(noproxy domain names list);

# htmllint.cgi でローカルファイルも取得できるようにする (不要ならコメントアウト)
# 取得できるファイルは、クライアント上のファイルではなくてサーバ上のファイルを
# 指すことに注意してください (つまり、ローカルファイルというのは不正確です)
# したがって、この指定は、***ローカルなサーバ以外ではセキュリティ上危険です***
# この指定により、file:// で始まるプロトコルを URL に指定できるようになります
# ブラウザは、これをクライアント上のファイルとして取得しますが、ここではサーバ上
# のファイルとして取得するので注意してください
# Windows上のサーバでは、C: のようなドライブ名から始まるファイル名も記述できます
#$GETLOCALFILE = 1;

# CGI が出力する HTML の漢字コードの既定値 (コメントアウトしても可)
#$KANJICODE = 'JIS'; # JIS/EUC/SJIS/UTF8 のいずれか

# Lynx (不要あるいは未実装ならコメントアウト)
#$LYNX = '/usr/local/bin/lynx -dump -nolist -force_html';

# w3m (不要あるいは未実装ならコメントアウト)
#  カラー機能のない場合 -M の指定は不可
#  -e は EUC、Shift JIS なら -s
#$W3M = '/usr/local/bin/w3m -dump -T text/html -M -e';

# 得点記録用ログファイル (不要ならコメントアウト)
#  # の部分は年月に置き換わります
#$SCOREFILE  = "${LOGSDIR}score#.log";
#$SCORECOUNTER = "${LOGSDIR}score.cnt";

# 警告の統計用ログファイル (不要ならコメントアウト)
#  # の部分は年月に置き換わります
#$STATFILE = "${LOGSDIR}statistics#.log";

# 得点記録除外ドメイン (不要ならコメントアウト)
#@EXCEPTSCORES = qw(uso800.ac.jp);

# Muquit's Access Counter CGI (不要あるいは未実装ならコメントアウト)
#$COUNTER = '/usr/local/www/cgi-bin/Count.cgi';

# ビジーチェック関数
# sub BusyCheck() {
#  何かごにょごにょ行なって、lint したくないとき空でない次のような *文字列* を返す
#   q|ただいま大変混雑しております。もうしばらくしてからチェックしてください。|;
#  空文字列や 0 を返すと lint を行なう
#  当然だが正しい Perl スクリプトであること
#  例えば次のようなもの
#  my $ps = `ps -axw`; または `ps -efA`; など
#  my $cnt = 0;
#  $cnt++ while $ps =~ m#/htmllint/htmllint.cgi#og;
#  ($cnt >= 100)? '混雑してます': '';
# }

1;

以上で、クライアント機にAnother HTML-lint gatewayのミラーサイトの構築が終わりました。

3.クライアント機のAnother HTML-lint gatewayの動作試験

クライアント機のWebサーバーのAN HTTPDを起動しておいて、クライアント機のブラウザのアドレス欄に
http://127.0.0.1/htmllint/
と入力しますと、Another HTML-lintのプライマリサイトと同じ画面が出ることを確認します。

右上の「ゲートウェイサーヴィス」というリンクをクリックすると、
ブラウザのアドレス欄がhttp://127.0.0.1/htmllint/htmllint.htmlとなりますので、
これをブラウザの「お気に入り」や「ブックマーク」に登録します

Another HTML-lint gatewayの動作試験入力画面

上図の様に「DATA」を選択し、<body>と</body>タグ間に「12345」と試しに入力して、「チェック」ボタンを押して見て下さい。

そうしますと、ブラウザのアドレス欄がhttp://127.0.0.1/htmllint/htmllint.cgiとなり、チェックの結果が以下の通りに表示されます。

HTML4.01 Strict としてチェックしました。
6個のエラーがありました。このHTMLは -43点です。タグが 4種類 4組使われています。

先頭の数字はエラーのおおまかな重要度を 0~9 で示しています(減点数ではありません)。少ない数字は軽く、9 になるほど致命的です。0 は減点対象外のごく軽度のエラーで (グレイのかっこつき) でメッセージされています。

1: line 2: <HTML> には LANG 属性を指定するようにしましょう。 → 解説 111
1: line 3: <TITLE> と </TITLE> の間が空です。 → 解説 48
0: line 3: (<HEAD>~</HEAD> 内に <LINK REV="MADE" HREF="mailto:~"> が含まれていません。)解説 114
0: line 3: (<HEAD>~</HEAD> 内に <LINK REL="NEXT" HREF="~"> などのナヴィゲーション用のリンクが含まれていません。)解説 115
4: line 3: <HEAD>~</HEAD> 内に <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="~"> が含まれていません。 → 解説 118
5: line 6: <BODY>~</BODY> 内に普通のテキストを書くことはできません。 → 解説 70

どうです。何も知らずに生半可な書き方をしているとこの様な結果となります。以下にHTML 4.01 StrictとXHTML 1.0 StrictのHTMLヘッダ部分のタグの例を示します。(赤字の部分は、用途に応じて確実に変更する部分です。)

HTML 4.01 Strictの雛形ページの例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="description" content="ページ内容の説明です。">
<meta name="KeyWords" content="検索語1,検索語2,検索語3">
<meta name="robots" content="INDEX,FOLLOW">
<!--外部 style sheetの読込み-->
<link rel="stylesheet" href="./style.css" type="text/css">
<link rev="made" href="mailto:webmaster@example.com">
<link rel="index" href="/index.html">
<link rel="contents" href="/index.html">
<link rel="prev" href="PrevPage.html">
<link rel="next" href="NextPage.html">
<title>Webページの表題</title>
</head>
<body>
<div>
<address>作成日:XXXX年XX月XX日、更新日:YYYY年YY月YY日 作成:<a href="mailto:webmaster@example.com">作成者の名前</a></address><br>
ページ内容の説明です。
<hr>
<h1>Webページの表題</h1>
.......
</body>
</html>

XHTML 1.0 Strictの雛形ページの例

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="ページ内容の説明です。" />
<meta name="KeyWords" content="検索語1,検索語2,検索語3" />
<meta name="robots" content="INDEX,FOLLOW" />
<!--外部 style sheetの読込み-->
<link rel="stylesheet" href="./style.css" type="text/css" />
<link rev="made" href="mailto:webmaster@example.com" />
<link rel="index" href="/index.html" />
<link rel="contents" href="/index.html" />
<link rel="prev" href="PrevPage.html" />
<link rel="next" href="NextPage.html" />
<title>Webページの表題</title>
</head>
<body>
<div>
<address>作成日:XXXX年XX月XX日、更新日:YYYY年YY月YY日 作成:<a href="mailto:webmaster@example.com">作成者の名前</a></address><br />
ページ内容の説明です。
<hr />
<h1>Webページの表題</h1>
.......
</body>
</html>

まず、一番にすべきことは、上記の例を参考にヘッダ部分を正しく書いた貴方のWebページの雛形を作成すべきです。この雛形ページのファイル名を仮にBase.htmlとしますと、上記の
「http://127.0.0.1/htmllint/htmllint.html」サイトのURL欄に「http://127.0.0.1/Base.html」
と入力し、まず、100点満点と取らねばなりません

4.複数HTMLファイルの一括置換ソフトのダウンロードとインストール

下図に示す様な複数HTMLファイルの一括置換ソフトのインストールを行います。私が使用したソフトは、Yamashita-Y ARENA 夢いっぱいの冒険者さんの複数のHTML&テキストファイル内を一括置換TextSS Ver.3.12というフリーソフトです。このソフトのダウンロードとインストールは、簡単ですから省略します。

複数HTMLファイルの一括置換ソフトTextSSの起動画面

  1. このソフト自体にもバックアップ機能があるのですが、一括置換という危険なことを行う訳ですから、htmlファイルのあるドキュメントルートのフォルダ以下のデータのバックアップ(複写)は、必ず取っておきます

  2. TextSSの起動画面で、「フォルダ」ボタンを押して、置換フォルダを「htmlファイルのあるドキュメントルートのフォルダ」に指定します。

  3. 前出のhtmlのヘッダ部分を全htmlファイルの先頭部に挿入します。具体的には、上図の「置換語句の設定」タブで、置換前のhtmlファイルの先頭に<html>というタグがあれば、これを複数行から構成されるhtmlのヘッダ部分のタグに置換すれば良いでしょう。

  4. 挿入したヘッダ部分のタグを編集(重複部分を削除)し、htmlのヘッダ部分を完成させます。

  5. 編集が終われば、ここまでの作業が無駄にならない様、再び、htmlファイルのあるドキュメントルートのフォルダ以下のデータのバックアップ(複写)を、必ず取っておきます

5.一括置換リストの編集

TextSSの起動画面から、「フォルダ」ボタンを押して、置換フォルダを指定しますと、下の方の「標準」タブに「一括置換リスト編集」ボタンがありますので、このボタンを押します。

複数HTMLファイルの一括置換ソフトTextSSの起動画面1

すると、下図の様な一括置換リスト編集画面が出てきます。ここで、一度定義しておけば、複数のHTMLファイルのタグが一気に正しい書式のタグに置換され、かなりの修正時間を短くすることが出来ます。
複数HTMLファイルの一括置換ソフトTextSSの起動画面1

この一括置換リストは、TextSSをインストールしたフォルダ内に「一括置換リスト.TLS」というファイル名で保存されます。このファイルは、Windows標準のメモ帳でも編集が出来ます。各行は、Windowsの改行コード(CrLf)で識別され、各列はTabが区切り符号として使用されています。完全ではありませんが、HTMLタグの置換リスト表(Micrsoft(R)Front Page(R)2000版)をたたき台として準備しましたので、ご活用下さい。もし、このたたき台をご使用して頂いて、追加する内容がございましたら、是非、鷹の巣まで、電子メールをお寄せ下さい。

追記:TextSSの唯一の欠点は、文字コードがUTF-8に対応していないことです。もしWebページの文字コードがUTF-8なら、Repl-AceSpeeeedを検討して見て下さい。

6.終わりに

Another HTML-lint gatewayで、とりあえず100点を取れましたでしょうか。はっきり言って、この様なタグの一括置換を行って合格点をもらっても自慢出来るHTMLのタグでは、ありません。なぜなら、<font color="FF0000">という文字を赤色にするタグを機械的に<span class="red">という様に置き換えているからです。文字を赤色にすることが、文章中で強調の意味をもっているのであれば、<strong>タグにすべきでしょうし、ちょっと譲っても<span class="StrongColor">として、スタイルシート側で、文字の色を赤にするように設定するのが本来の使用法では、と考えています。 今回は、htmlファイルだけの置換を行っていますが、CGIを自作されているサイトでは、CGIが出力するHTMLファイルのタグを置換することも出来ます。

Webページは、内容が一番だと考えますので、テキストファイルで公開しても良いのですが、Webページの最大の機能であるハイパーリンクが使用できません。 HTMLファイルで公開する以上、Another HTML-lint gatewayで、100点を取ることは、最低限の努力ではないでしょうか。 ご健闘を祈ります。

目次▲頁先頭